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

Автор [Константин], 22-01-2012, 20:52:58

« назад - далее »

[Константин]Topic starter

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

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

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


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

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

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



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


<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType application/javascript "access plus 7 days"
  ExpiresByType text/javascript "access plus 7 days"
  ExpiresByType text/css "access plus 7 days"
  ExpiresByType image/gif "access plus 7 days"
  ExpiresByType image/jpeg "access plus 7 days"
  ExpiresByType image/png "access plus 7 days"
</IfModule>


где access plus 7 days это и есть срок действия кэша для обьектов - картинок, ксс, скриптов.

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

Включите сжатие
Сжатие следующих ресурсов посредством gzip позволит уменьшить их размер для переноса на 85.8Кб (на 74%).
Например:
[spoiler]
Сжатие http://www.sbup.com/seo-forum/Themes/seo_1/css/index.css?fin20 позволит уменьшить размер на 47.6Кб (на 77%).
Сжатие http://www.sbup.com/seo-forum/Themes/default/scripts/script.js?fin20 позволит уменьшить размер на 34.1Кб (на 72%).
Сжатие http://www.sbup.com/seo-forum/Themes/seo_1/scripts/theme.js?fin20 позволит уменьшить размер на 2.2Кб (на 61%).
Сжатие http://www.sbup.com/scripts/newbottombanner.js позволит уменьшить размер на 2.0Кб (на 60%)[/spoiler]

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


<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>


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

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

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

[spoiler][/spoiler]

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

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

<script type="text/javascript">
         function onLoadScript () {
             var scri = document.createElement('script');
             scri.src = '<путь к файлу>';
             document.body.appendChild(scri);
         }
         window.onload = function () {setTimeout(onLoadScript, <количество миллисекунд после загрузки документа>)}
</script>


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


Konsul

Цитата: dreadful от 22-01-2012, 20:52:58И нужно дописать в .htaccess такой код

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



Alexo

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

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

[Константин]Topic starter

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

Добавлено: 23-01-2012, 13:16:34


dar333, к сожалению uCoz не поддерживает .htaccess - поэтому разогнать его этим путем вряд ли получится.
  •  

alexsanris

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


darmoid

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

Darius

Я везде пробежал в плагине, но то что описано во втором шаге скриншота не нашел.
Версия лисы 9,0,1
Пицца на заказ в Камышине, бесплатная доставка. Пиццерия Сан-Ремо ул. Юбилейная 4.
Тел заказов: 8-909-39-039-39. И шикарная итальянка уже в Вашей компании!
  •  

alexsanris

Цитата: darmoid от 23-01-2012, 14:38:17
Хм.. не могу убрать ошибку "Используйте кэш браузера". Делаю все как здесь написано. Блог на вордпресс. После добавление кода в хтацесс ничего не меняется. Плагин кеширования выключал и папку кеша чистил.

Я использую так- </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

Цитата: dreadful от 22-01-2012, 20:52:58i]Включите сжатие[/i]
Сжатие следующих ресурсов посредством gzip позволит уменьшить их размер для переноса на 85.8Кб (на 74%).
Скажите, пожалуйста, а есть ли где-то четкое утверждение, что сжатие всегда дает быстродействие, даже на слабых серверах?

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

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


Alexo

Цитата: dreadful от 23-01-2012, 13:15:20
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]
  •