Google page speed или как набрать 100/100. Часть 1
Рассмотрим решение самых простых в исправлении ошибок в Google page speed Insights.
Google page speed или как набрать 100/100. Часть 1

Google page speed или как набрать 100/100. Часть 1

Салют, друзья! С Вами как всегда Алексей.

В наше время, вопрос быстрой загрузки сайтов, имеет актуальность большее, чем когда-либо. Уже сегодня трафик на сайты с мобильных устройств доходит до 50%.  А на мобильных гаджетах обычно скорость интернет соединения ниже чем на ПС.


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

Наш любимый Google, придумал головную боль для вебмастеров - PageSpeed Insights.

Google page speed -  инструмент проверки показателей скорости, всех совсем запугал. После проверки своих сайтов и получения результатов с красными и желтыми метками, владельцы сайтов начинают судорожно искать способы выйти в зеленую зону. Эх.. и я это прошел.

Если вы проверите мой блог, то он в зеленой зоне с хорошими показателями. (Надеюсь с ними и останется). 

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

Пункт 1: Оптимизируйте изображения

Это самая распростроненная рекомендация от google pagespeed. Тут наш любимый гугл проверяет скорость загрузки картинки. Если скорость можно повысить путем оптимизации изображения, то он не молчит.

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

Нашел несколько бесплатных инструментов по оптимизации изображений, может вам пригодиться: compressor.io и TinyPNG. Я же использую встроенные возможности моего сайта. При загрузке изображений скрипт обрезает их до нужного размера, переводит в JPG формат с качеством 0.7 - этого вполне хватает.

Пункт 2: Используйте кеш браузера

Тут, как правило, тоже все просто. Просто page speed insights хочет кеша )) 

Для скорости страниц, это реально очень полезно.  Т.е. мы должны указать браузерам, что кешировать и на какое время. Я это делаю через .htaccess файл в корне сайта.

Я использую такой код в файле:

<ifModule mod_headers.c>

<FilesMatch "\.(html|htm)$">
Header set Cache-Control "max-age=43200"
</FilesMatch>

<FilesMatch "\.(js|css|txt|woff|woff2|ttf|eot)$">
Header set Cache-Control "max-age=604800"
</FilesMatch>

<FilesMatch "\.(flv|swf|ico|gif|jpg|jpeg|png)$">
Header set Cache-Control "max-age=2592000"
</FilesMatch>

</IfModule>

Не буду расписывать что к чему там. Думаю найдете кучу информации в интернете на эту тему. Просто коротко скажу, что это установка времени кеширования ресурсов браузером. Js,css файлы изображения и т.д.

С таким кодом и сайт быстрее и гугл доволен.

Внешние ресурсы не поддаются кешированию таким способом. Так что не удивляйтесь если гугл будет ругаться на подключенный счетчик метрики от яндекс - это нормально.

 

Пункт 3: Включите сжатие

Что может быть проще. Вы наверное забыли включить сжатие у себя на сервере? Ну так самое время это сделать. Успокойте дядюшку Google и его инструмент измерения скорости страницы.

Возможно вы не можете включить сжатие на сервере, но ваша CMS поддерживает включение Gzip-сжатие для исходящего HTML-кода. Включайте в CMS. 

Внимание, не включайте эту опцию, если ваш сервер уже применяет Gzip к страницам сайта. 

Проверить сжимается ваш html код на сайте или нет можно Тут вводим адрес сайта и смотрим результат. Или в яндекс вебмастер есть инструмент под названием "Проверка ответа сервера".

Вводим там адрес страницы и смотрим ответ сервера. Если в ответе сервера видим строчку:

Content-Encoding: gzip

то все в порядке, сжатие включено.

Пункт 4: Сократите JavaScript или Css

Ну что сказать, опять не все так плохо. В подсказках гугл пэйджспид смотрим какие файлы не минифицированны. 

Для js файлов есть 2 пути. Первый - найти аналог файла в минифицированном варианте. Ну к примеру это jQuery, находим min.js и меняем на сайте. Второй - самостоятельно минифицировать файл.

Тоже очень много инструментов есть в интернете. Я использую гугловский инструмент Closure Compiler

Для CSS файлов, точно такая же ситуация. Если есть вариант найти готовые min файлы, то меняем. Если нет, то делаем сами, например cssminifier.

Так же необходимо включить сжатие html кода в вашей CMS. Убрать лишние пробелы и т.д. это сократит время загрузки самого документа.

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

Более сложные проблемы рассмотрим во второй части: Google PageSpeed Insights Часть 2

Сайтостроение2 комментария

Поделитесь с друзьями:

  • Спасибо

    07.02.2018 в 15:37 | ответить
  • Отлично, давно хотел оптимизировать сайт до максимальных показателей :-)

    22.02.2018 в 16:36 | ответить