Топ-10 советов о том, как увеличить скорость загрузки страницы

[ishamshur]

Это верно. Сжатие хоть и позволяет уменьшить объем файла в несколько раз, но ведь 80% времени тратится на загрузку статики. Поэтому на общем фоне это и не заметно.

[demimurych]

При первой загрузке да.
Все последующие загрузки статику уже не грузят.

[datacompboy]

Согласно проведённых исследований, ученые доказали, что большинству достаточно ссылки на ученых или исследования, поэтому проводить эти самые исследования этим самым ученым нет нужды.

[twenty]

prooflink.ru/

[kefiijrw]

speedupyourwebsite.ru/books/speed-up-your-website/SpeedUpYourWebsite.v1.4.1.pdf
Со страницы 22.

[Perkov]

«Как показали проведенные исследования...» — Читайте между строк. Пособие по чтению — «Физики продолжают шутить».«Инструкция для читателя научных статей». Издательство «Мир», Москва, 1968.

[Stdit]

К слову, в Webkit-браузерах (Хром, Сафари) есть замечательная встроенная штука, которая может многое из перечисленного рассказать о странице:
Developer Tools->Audits (в русской версии Проверки)

[ishamshur]

А для FireFox есть замечательное расширение Page Speed

[Richard_Ferlow]

Не могу найти — можно ссылку?

[ishamshur]

code.google.com/intl/ru-RU/speed/page-speed/download.html

[Shark]

Для любого вообще браузера можно воспользоваться этим:
developers.google.com/pagespeed/

[imsamurai]

И сколько можно мусолить одно и то же…

[2fast4rabbit]

А как же кармы надрочить?

[2fast4rabbit]

Так это еще ж и писать надо!
Легче взять статью про сколько то классных методов деланья чего либо, поменять местами порядок методов, пару выкинуть и получиться новый контент!

[ishamshur]

Забавно, а почему >550 человек добавили этот пост в избранное, если это уже >100 раз обсуждалось и все всё об этом знают?

[jursovet]

Так это перевод… А то, думаю, почему говоря о CDN для библиотек javascript автор не упоминает Яндекс, который тоже предоставляет такую услугу как хостинг javascript библиотек? (Кстати, у Яндекса, вроде, больше библиотек).

[ishamshur]

Ну это не совсем и перевод. Кое что конечно взято из этой статьи, кое что добавил от себя. Не судите строго, если что-то не так!

[Valery4]

И (оглядывается) Google.

[Q2W]

> 9. Не масштабируйте изображения
> Не изменяйте размер изображения при помощи атрибутов width и height тега, либо при помощи CSS.

Стоит отметить, что указывать фактические размеры изображений нужно обязательно, иначе по мере загрузки страницы она как бы прыгает. Это происходит из-за того, что браузер предполагает какие-то размеры картинки по-дефолту, а потом они оказываются другими.
Выглядит очень непрофессионально, криво и вообще жутко раздражает.

[TIgorA]

Называется LazyLoad.
Есть у меня такая страничка с сотней картинок
tigor.org.ua/battlefield-3-dog-tags/

Вот пару дней назад сделал LazyLoad и скорость сильно изменилась.
g.tigor.org.ua/google_analytics/page-speed.png

[ishamshur]

Собственно ссылку на него я ниже и давал

[TIgorA]

Вы дали ссылку на отложенную загрузку рекламы, а не изображений.

[ishamshur]

А точно, прошу прощения. Хотел побыстрому дать сслыку и не туда дал. Вот правильная ссылка www.appelsiini.net/projects/lazyload

[ishamshur]

Если я правильно Вас понял, то посмотрите вот этот плагин jqueryad.web2ajax.fr

[Richard_Ferlow]

Мне очень понравился www.kraken.io/ — если по простому — может изображения с сохранением директорий сжать и остается только выгрузить папку на сервер)

Вопрос кстати, про поддомены — на обычном хостинге можно как-то сделать чтобы физически папка располагалась на одном домене — site.ru/photo но при этом была доступна через new.site.ru/photo?

На ум приходит редирект, но это думаю неверно, может жесткие ссылки как-то можно делать или как они там называются

[docomo]

Если под обычным хостингом понимается шареный Apache, то сделайте new.site.ru алиасом для site.ru, при этом не забудьте в .htaccess закрыть остальные папки (кроме /photo), дабы не получить дубликат сайта в поисковиках.

[Richard_Ferlow]

символьные ссылки мне помогли, результат не оценил пока)

[deforcer]

На моем хостинге, к примеру, можно сделать директорию img и в сделать субдомен img.domain.com, который будет обращаться к директории img.

Тогда путь к файлу 01.jpg может быть представлен двумя способами:
1) /img/01.jpg
2) img.domain.com/01.jpg

Думаю на других хостингах это тоже возможно.

[TIgorA]

Можно наделать субдоменов и ссылать их все в одну папку, тогда будет вообще круто

domain.com/img/01.jpg
img.domain.com/img/01.jpg
cdn.domain.com/img/01.jpg
static.domain.com/img/01.jpg
gallery.domain.com/img/01.jpg

[Richard_Ferlow]

По статье пункт 5 хочу попробовать

[vdv73rus]

Америка не открыта.
Одному мне это кажется прописными истинами клиентской оптимизации?

[ishamshur]

А никто и не говорил, что это статья претендует на гениальность. Я просто старался собрать в единое целое, основные способы клиентской оптимизации со своими комментариями

[furyk]

Столько стараний, чтобы напихать в статью кучу ссылок на очередной «Инфо-бизнес блог»

[ishamshur]

Почему напихать?! Если статьи на блоге, как раз дополняют тему, то почему бы и нет?

[dima_smol]

ну сео же там, ссылка индексируемая, всё такое…

Как правильно заметили – таких статей мильён уже, писать миллионпервую не стоило

[ishamshur]

ну и что? Почему я не могу дать ссылку на статью на своем блоге, если она раскрывает более подробно данную тему? В чем тут криминал, чтобы минусовать? Или надо было все в одной статье описывать?

[murr]

Если кому-то вдуг эти банальные советы стали откровением, я хочу посоветовать замечательный ресурс, одно время пиарившийся в хорошем смысле слова на Хабре: webo.in. А в особенности раздел webo.in/articles/ (там же есть ссылки на книги автора).

[lega]

> Помещайте CSS файлы в начале страницы
>… служит отличным индикатором загрузки страницы для пользователя и улучшает общее впечатление от сайта.

В одной из подобных статей (по моему тут же на хабре) рекомендовали наоборот css файлы помещать в конец страницы, с причиной, что при этом стили накладываются на документ разом, а если вставлять в начало, то будет происходить (многоразовая) перерисовка стилей, по мере подгрузки/построения документа при этом тратиться больше ресурсов/времени.

[cavin]

Недавно задался вопросами быстрой загрузки и нашел пару инструментов, которые оценивают качество страницы по параметрам приведённым в статье и некоторым другим (например слишком большой размер favicon)

В варианте для FireFox обе программы — плагины для FireBug (есть варианты и для всех современных браузеров!).

Это YSlow ( developer.yahoo.com/yslow/ ) и Google Page Speed ( code.google.com/speed/page-speed/download.html )

Для открытого сайта проверяют массу параметров скорости, составляют рекомендации по кешу, показывают список неоптимизированных картинок и процент выигрыша в случае оптимизации и т.д.

[Borro]

Обычно в название файла добавляют его версию, например так: styles.v1.css

Можно просто добавлять? номер_версии, например: styles.css?1, номер версии можно брать как номер коммита в репозитории.

Одним из таких CDN – является Google Libraries. Это CDN для популярных open-source JavaScript библиотек. Загрузка популярных javascript фреймверков с Google Libraries позволяет увеличить скорость загрузки страницы и снизит траффик на ваш сервер.

У Яндекса тоже есть отличная CDN: api.yandex.ru/jslibs/

[demimurych]

> Можно просто добавлять? номер_версии, например: styles.css?1, номер версии можно брать как номер коммита в репозитории.

Не вполне.

Указывая styles.v1.css и styles.css?1 вы получите разное поведение браузера в случаях еcли пользователь нажмет f5.

Откройте тот же фаербаг в фаерфоксе или аналогичный инструмент в хроме и посмотрите как они перегружают файлы в обоих случаях, именно при реакции на нажатие f5.

[Borro]

GET application.js?1327152543 304 Not Modified
Так в чем разница реакций? Если изменить номер, то он принудительно загрузит тот файл, т.к. будет считать его новым.

[Borro]

А вот чуть больше:

самый первый раз:
GET /test/ 200 OK
GET styles.css 200 OK
GET styles.v1.css 200 OK
GET styles.css?1 200 OK
f5:
GET /test/ 304 Not Modified
GET styles.css 304 Not Modified
GET styles.v1.css 304 Not Modified
GET styles.css?1 304 Not Modified
модифицировали styles.css:
GET /test/ 200 OK
GET styles.css 200 OK
GET styles.v2.css 200 OK
GET styles.css?2 200 OK
f5:
GET /test/ 304 Not Modified
GET styles.css 304 Not Modified
GET styles.v2.css 304 Not Modified
GET styles.css?2 304 Not Modified
просто сменили версию:
GET /test/ 200 OK
GET styles.css 304 Not Modified
GET styles.v4.css 200 OK
GET styles.css?4 200 OK
f5:
GET /test/ 304 Not Modified
GET styles.css 304 Not Modified
GET styles.v4.css 304 Not Modified
GET styles.css?4 304 Not Modified


[w0den]

Насчёт использования CDN — стоит напомнить, что никто не может гарантировать 100% аптайм. И если однажды один из контент-провайдеров CDN будет недоступен, тогда и все сайты, подключающие скрипты с его веб-серверов, будут работать некорректно (не говоря уже о скорости загрузки).

[TIgorA]

Я в хелпе вычитал, что в случае недоступности запросы перебрасываются на ближайший доступный сервер.

[azxc]

Обычно доступность CDN'а намного лучше, чем uptime сайта, который пользуется этим CDN.

[propovednik]

Когда ваш сайт лежит — кому нужны библиотеки на CDN? А когда лежит CDN, а ваш сайт нет, то какой смысл в неоткрывающихся библиотеках?

[ishamshur]

Например, можно делать так:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript">
window.jQuery || document.write('<script type="text/javascript" src="js/jquery-1.6.2.min.js"><\/script>');
</script>

тогда если библиотека не загрузится с CDN, то она загрузится с Вашего сайта

[azxc]

> 5. Используйте поддомены для параллельного скачивания.
С этим надо аккуратно и смотреть по своей задаче и обстоятельствам, так как лишние поддомейны добавляют лишние запросы на DNS, который тоже может негативно сказаться на загрузке.

[azxc]

И ещё ломается keep-alive связь если идёт новые поддомен, что тоже несколько может повредить общей скорости.

[Borodean]

Всё это было уже тут.

[Terion]

Все эти советы вместе с оценкой показывает YSlow плугин для лисы.
Да и GooglePageSpeed, или как его. Сразу указывают на узкие места и дают рекоммендации

[sunnybear]

топ10 не такой, а:
1) gzip для всего, что шевелится
2) cache для всего, что не динамика
3) оптимизация изображений / устранение их масштабирования
4) объединение файлов (css/js/img), data:URI можно применять уже после отрисовки
5) css-файлы перед JS (строго)
6) Отложенная загрузка JS-виджетов
7) Параллельная загрузка изображений
8) Кэширование динамических страниц/блоков на сервере
9) Минимизация CSS/JS/HTML
10) Устранение избыточного DOM-дерева / оптимизация CSS-селекторов

[E_STRICT]

В последнее время значительное количество сайтов имеет одну и ту же проблему связанную с очень большим количеством внешних JS файлов. Я имею ввиду JS cниппеты для контекстной рекламы, различных сервисов Яндекса и Гугла, кнопки социальных сетей, счётчики и т.д. Есть сайты, у которых кол-во внешних http запросов составляет 100 и больше…
Типичная ситуация: Сайт проектируется с учётом требований к производительности. Принимаются специальные меры по уменьшению времени загрузки страницы, устанавливаются различные модули для кэширования, покупается дорогой хостинг. Вроде всё ОК, при запуске сайт «летает». Однако, потом начинается наполнение сайта различной JS хренью в угоду SEO и маркетингу. В результате сайт начинает тормозить. Особенно при медленном интернет соединении.
При этом многие владельцы таких сайтов не понимают почему это происходит. Меняют хостинг, нанимают программистов для того, чтобы разогнать «тормознутый» движок и т.д.