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

Вернуться
Опубликовано: 15.05.2015 г.

Поисковый гигант Google в ранжировании сайтов использует очень разные параметры – насколько страница полезна пользователю, не несет ли она в себе угроз и спама, нормально ли работает на различных браузерах и т.д. И одним из важных критериев является время загрузки сайта. Поисковик считает, что медленно загружающиеся сайты – это зло, поэтому сильно понижает их в выдаче. А для того, чтобы каждый вебмастер смог оценить скорость загрузки своего сайта, доступен удобный инструмент, который носит название PageSpeed Insights. Найти его можно по адресу https://developers.google.com/speed/pagespeed/insights/.

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

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

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

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

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

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

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

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

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

  1. создается отдельный css-файл для первой видимой части страницы, назвать который можно, к примеру, head.css. В него добавляются все стили, которые относятся к первому экрану, выдаваемому пользователю при загрузке сайта;
  2. после этого все скрипты делятся на часть, которая идет в head.css, и на всё остальное;
  3. после этого в <head> с помощью тега <style> инлайново подключаем скомпилированную сетку на Bootstrap. Это делается для того, чтобы даже еще не загрузившаяся страница уже имела свою структуру и все элементы заранее находились на своих местах. Вместо Bootstap можно использовать любой другой инструмент для создания сеток;
  4. после сетки точно также указываются все стили из head.css;
  5. затем подключается скрипт для загрузки шрифтов, который работает с внутренним хранилищем, и берет шрифты из него, если они есть, а если нет, тянет из сети;
  6. перед закрывающим тегом </body> подключаем оставшиеся скрипты. Обязательно все подключаемые js-файлы и другие элементы должны лежать в корне сайта;
  7. дополнительно нужно создать и подключить файл стилей min.css, куда помещаются все стили, не уместившиеся в head.css.

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

5875 0

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *