PageSpeed Insights - как получить 100 баллов от Google

Поисковый гигант Google в ранжировании сайтов использует очень разные параметры – насколько страница полезна пользователю, не несет ли она в себе угроз и спама, нормально ли работает на различных браузерах и т.д. И одним из важных критериев является время загрузки сайта. Поисковик считает, что медленно загружающиеся сайты – это зло, поэтому сильно понижает их в выдаче. А для того, чтобы каждый вебмастер смог оценить скорость загрузки своего сайта, доступен удобный инструмент, который носит название PageSpeed Insights.

Принцип действия Google PageSpeed Insights

Для того чтобы проверить скорость загрузки сайта, просто введите его адрес в строку для URL на странице инструмента и нажмите кнопку «Анализировать». Через несколько секунд будет показан результат. Формат вывода результата стоит рассмотреть отдельно. Во-первых, PageSpeed Insights проверяет сайт по двум категориям – для мобильной и десктопной версии. Рядом с оценками доступен эскиз того, как страница смотрится на экране мобильного или же ПК. Также выдается общая оценка быстродействия сайта для каждой из версий. Оценка находится в диапазоне от 0 до 100. Чем оценка выше, тем страница грузится быстрее.

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

  • красный – для критических ошибок. Влияние этого элемента на загрузку страницы очень сильное, поэтому исправить проблему нужно чем скорее, тем лучше;
  • оранжевый – для ошибок, которые лучше исправить, но можно сильно не торопиться. Это скорее предупреждения о наличии замедляющих загрузку сайта элементах, но которые не настолько сильно влияют, как «красные»;
  • зеленый – всё в норме, проверенные элементы оформлены правильно и не требуют вмешательства.

Общий результат также подсвечивается одним из цветов: если результат 90 баллов и выше, сайт считается быстрым, если выше 70 – средней скорости, результат ниже 70 баллов указывает на однозначные проблемы, которые нужно быстро решить.

 

Как улучшить показатели скорости загрузки

По сути, результат проверки сайта при помощи PageSpeed Insights – это уже краткий перечень инструкций по улучшению быстродействия. Однако не всегда эти указания оказываются действенными. Оптимизацию следует начинать с основ – валидации сайта. Дело в том, что ошибки в коде приводят к тому, что браузеру приходится тратить на них дополнительное время, что влияет на скорость загрузки. К такому же эффекту может привести и использование устаревших html-элементов и т.д. Для этого нужно проверить сайт при помощи http://validator.w3.org/ и исправить все замечания.

Теперь, когда сайт проходит валидацию, начинается самое интересное, ведь проблемы со скоростью загрузки могут зависеть от очень разных причин: конфигурации и настроек сервера, «железа», программного обеспечения, используемой CMS и и т.д. Причем один и тот ж симптом может быть вызван различными причинами. Наиболее распространённые проблемы сайтов следующие:

  • медленный ответ сервера. Проблема может заключаться как в самом сервере, так и в используемом софте. Проверить это просто: если основной сайт грузится медленно, а отдельный php-файл, лежащий там же – быстро, то причина однозначно «неповоротливых» скриптах движка. Причем чем «тяжелее» CMS используется, тем с большей вероятностью проблема будет именно в ней. Также часто причина кроется не в самом движке, а в используемых плагинах, особенно самописных или мало известных. Чтобы это проверить, попробуйте протестировать сайт со стандартным шаблоном и отключенными плагинами;
  • отключенный кеш и/или сжатие. Чтобы добиться высоких оценок в PageSpeed Insights, каждый передаваемый файл должен на ходу сжиматься, а также иметь свой «срок жизни», во время которого он не будет повторно запрашиваться из интернета, поскольку будет использоваться копия из кеша. Чтобы исправить это, нужно включить модули deflate и expires на сервере (в случае, если используется Apache), а также внести определённые изменения в файл .htaccess;
  • использование больших изображений. Многие пренебрегают этой рекомендацией, но на самом деле значительная часть промедления при загрузке страниц связана именно с подгрузкой тяжелых картинок. Google при анализе страницы использует специальные библиотеки, которые определяют, достаточно ли сжата картинка, или можно ее дополнительно оптимизировать. Поэтому не ждите, пока проблему выявит PageSpeed Insights, а самостоятельно прогоните все изображения сайта через специальную программу, например, optiPNG или другие подобные;
  • громоздкий javascript. Даже если вы не программист, можно внести необходимые коррективы в код, чтобы Google перестал считать скрипты перегруженными. Для этого откройте скрипт в любом текстовом редакторе и удалите комментарии, лишнюю табуляцию, переносы строк и т.д. Возможно, код будет выглядеть не так красиво, но он станет легче, что непременно оценит инструмент для проверки скорости;
  • подключенные скрипты и стили, которые мешают загрузке основного контента. Эта рекомендация вызывает немало дискуссий, но Google твердо уверен, что вначале должен идти контент сайта, и только потом – скрипты и CSS. Поэтому по возможности перенесите скрипты в конец страницы, исключение разве что составляет библиотека jQuery, которая обязательно должна быть перед любым другим javascript-кодом, а также код, который должен выполниться до загрузки основного контента сайта – прелоадеры и т.д. CSS перенести в конец файла тоже можно, хотя и не рекомендуется, поскольку подключаются стили в теге . Однако можно попытаться ускорить их загрузку, разделив один громоздкий css-файл на несколько небольших, весом около 100 Кб. По возможности нужно также указать браузеру, чтобы дополнительные файлы он загружал асинхронно.

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

Если исправить все замечания, которые выдал PageSpeed Insights, можно добиться очень высокой оценки, вплоть до 100 баллов. Существует целый ряд трюков, который позволяет это сделать. Вот вполне рабочий способ добиться высшей оценки в Speed Insights. Метод основан на том, что вначале пользователю выдается одна быстро загружаемая страница, а пока он ее изучает, подгружаются остальные. Происходит это за счет возможности использования javascript для загрузки других js и css:

  1. создается отдельный css-файл для первой видимой части страницы, назвать который можно, к примеру, head.css. В него добавляются все стили, которые относятся к первому экрану, выдаваемому пользователю при загрузке сайта;
  2. после этого все скрипты делятся на часть, которая идет в head.css, и на всё остальное;
  3. после этого в с помощью тега
visibility 305 август 2018
share

Обсуждение

Похожие статьи

Симантическая микроразметка (Schema.org)

Семантическая микроразметка – это новая эра в оптимизации сайтов, которая рассчитана прежде всего на...

visibility 334
insert_comment 0
share
send