Ускоряем свой сайт с помощью Page Speed

[dreadful]

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

Итак, устанавливаем на свой браузер дополнение PageSpeed от Google.
Я использую Google Chrome, сюда ставится очень легко в 2 клика мышкой, и FireFox. Для лисички наиболее приятной для веб-разработчика будет возможность совместить 2 дополнения - FireBug (установить) и сам PS.

Далее буду рассказывать и показывать на примере FireFox:
 заходим на нужный сайт
1) кликаем правой кнопкой мыши и выбираем пункт "Inspect Element with FireBug"
2) в открывшемся окошке снизу выбираем пункт "Page Speed"
3) жмем на кнопку "Analyze Performance"
подробнее на картинке


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

Наиболее часто распространенные ошибки имеют следующие названия.

Используйте кэш браузера
Следующие кэшируемые ресурсы имеют короткий срок действия. В дальнейшем следует указать для следующих ресурсов срок действия не менее недели:
- и далее видим список ссылок на скрипты и картинки, как на картинке:



Теперь устанавливаем для этих объектов срок действия кэша на неделю, как рекомендует Page Speed.
Для этого в файл .htaccess добавляем следующий код:

Код:

Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.
где access plus 7 days это и есть срок действия кэша для обьектов - картинок, ксс, скриптов.

Объедините изображения в CSS-спрайты
описывать всё полностью не буду, много букаф получится, да и зачем? Уважаемый Ктонановенького очень классно раскрыл эту тему

Включите сжатие
Сжатие следующих ресурсов посредством gzip позволит уменьшить их размер для переноса на 85.8Кб (на 74%).
Например:

(нажмите чтобы показать/скрыть)

Сжатие http://www.seobuilding.ru/seo-forum/Themes/seo_1/css/index.css?fin20 позволит уменьшить размер на 47.6Кб (на 77%).
Сжатие http://www.seobuilding.ru/seo-forum/Themes/default/scripts/script.js?fin20 позволит уменьшить размер на 34.1Кб (на 72%).
Сжатие http://www.seobuilding.ru/seo-forum/Themes/seo_1/scripts/theme.js?fin20 позволит уменьшить размер на 2.2Кб (на 61%).
Сжатие http://www.seobuilding.ru/scripts/newbottombanner.js позволит уменьшить размер на 2.0Кб (на 60%)

Как это сделать? Очень просто. На вашем сервере Apache должен быть активирован мод mod_gzip.
И нужно дописать в .htaccess такой код

Код:

Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.
Сократите CSS
Сокращение следующих ресурсов CSS позволит уменьшить их размер на xxКб (на xx%).

Тут всё еще проще - в Page Speed сразу предлагают сохранить оптимизированную версию ксс кода на компьютер, жмем на ссылку "See optimized version". А уж заменить ее на исходный код(который обязательно скопируйте отдельно, для дальнейшего удобного редактирования) сумеет и ребенок

Оптимизируйте изображения
Аналогично предыдущему пункту моей инструкции, тоже жмем "See optimized version" - сохраняем картинку на компьютере и перезаливаем на хостинг. Примерно так, как на рисунке

(нажмите чтобы показать/скрыть)

Отложите синтаксический анализ javascript

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

Код:

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

[Konsul]

И нужно дописать в .htaccess такой код

Все вроде бы понятно но - май сайт на Ucoz и я не имею доступа к файлу  .htaccess (если такой и есть то он на сервере ucoz) -как тогда ? могу я выше приведенный код засунуть в css или непосредственно в код страниц ?

[Alexo]

На вашем сервере Apache должен быть активирован мод mod_gzip

ИМХО Лучше использовать статическое сжатие (хранить две версии файлов сжатые и без сжатия) и отдавать в зависимости от поддержи сжатия нужную версию файла.

[dreadful]

Alexo, а можно подробнее, пожалуйста?
Добавлено: 23-01-2012, 15:16:34
dar333, к сожалению uCoz не поддерживает .htaccess - поэтому разогнать его этим путем вряд ли получится.

[alexsanris]

Для полного счастья- ExpiresByType image/ico"access plus 7 days"

[darmoid]

Хм.. не могу убрать ошибку "Используйте кэш браузера". Делаю все как здесь написано. Блог на вордпресс. После добавление кода в хтацесс ничего не меняется. Плагин кеширования выключал и папку кеша чистил.

[Darius]

Я везде пробежал в плагине, но то что описано во втором шаге скриншота не нашел.
Версия лисы 9,0,1

[alexsanris]

Хм.. не могу убрать ошибку "Используйте кэш браузера". Делаю все как здесь написано. Блог на вордпресс. После добавление кода в хтацесс ничего не меняется. Плагин кеширования выключал и папку кеша чистил.

Я использую так- </IfModule>
FileETag MTime Size
<ifmodule mod_expires.c>
<filesmatch ".(jpg|gif|png|ico|css|js)$">
ExpiresActive on
ExpiresDefault "access plus 1 month"
</filesmatch>
</ifmodule>
и плагин Quick Cashe  и с помощью сервиса http://gtmetrix.com ОН КОНКРЕТНО ПОД WORDPRESS с рекомендациями

[gr]

Включите сжатие[/i]
Сжатие следующих ресурсов посредством gzip позволит уменьшить их размер для переноса на 85.8Кб (на 74%).

Скажите, пожалуйста, а есть ли где-то четкое утверждение, что сжатие всегда дает быстродействие, даже на слабых серверах?

Еще вопрос про css: чем отличаются оптимизированные файлы от неоптимизированных; насколько реальное быстродействие увеличится? Нет ли тут подводных камней, уж не знаю - проблем с разными браузерами, css-агрегаторами и т.д.? Абсолютно безопасная операция?

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

[Alexo]

Alexo, а можно подробнее, пожалуйста?

Создаем две версии файла один style.css.gz другой style.css   

RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{HTTP_USER_AGENT} !X #Тут вот вместо X браузер не поддерживающий gzip
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.*)$ $1.gz [QSA,L]