Блог

Инструмент Google PageSpeed Insights: как добиться ускорения загрузки страниц?

Лилия Смирнова / 18.05.2017421

Скорость загрузки страниц — невероятно важный фактор, влияющий на отношение потенциальных клиентов к вашему ресурсу.

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

Не можешь сделать так, чтобы сайт работал быстро — «Ты кто такой, давай, до свидания!». 

Google PageSpeed Insights — что за зверь? 

Google PageSpeed Insights — бесплатный инструмент, содержащий список рекомендаций для разработчиков, как выписать своему сайту волшебный пендель и заставить его работать быстрее.

Что сервис может:

  • Проанализировать страницу сайта по ее адресу;
  • Рассказать, что именно тормозит ее прорисовку;
  • Посоветовать, что с этим делать.

Что сервис не может, так это сделать оптимизацию за вас.

Если вы все еще сомневаетесь, на кой вам сдался Google PageSpeed Insights, читайте дальше, будем обращать вас в свою веру.

Скорость загрузки влияет не только на удобство использования сайта пользователями, но и на его SEO продвижение. Другими словами — что не нравится пользователям, то не нравится и поисковым системам.

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

От чего зависит скорость загрузки страниц?

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

Причин может быть несколько:

  • Скорость подключения пользователя к сети

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

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

Основное сразу, а плюшки потом: пока посетитель изучает первичную информацию и еще не перешел куда-нибудь дальше по сайту, успеют подгрузиться все скрипты и библиотеки.

  • Хостинг, где живет сайт

Если ваш сайт поселился на плохом хостинге — тут и говорить нечего. Оборудование хостинга может нехило сказаться на загрузке вашего ресурса.

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

  • Размер страницы

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

Чтобы «похудеть», нужно уменьшить размер страничек. Сделать это можно, уменьшив разрешение картинок либо поменяв их формат.

Google PageSpeed Insights: как работает лечебная пилюля

Чтобы воспользоваться инструментом Google PageSpeed Insights, перейдите по адресу:

https://developers.google.com/speed/pagespeed/insights/

Поисковики считают плохую скорость загрузки настоящим злом. Поэтому для борьбы с ним нам нужно ввести адрес сайта в специальную URL строку на странице сервиса и кликнуть по кнопке «Анализировать».

Сервис предлагает нам две категории оценки ресурса: для мобильной версии и для ПК, поэтому оценки и советы для вашего сайта также будут поделены на две категории.

Шкала оценки: от 0 до 100. Соответственно, чем выше цифры, тем лучше грузится ваша страница.

Если ваш сайт получил от 86 баллов и выше, он относится к быстрым, оценка выше 70 говорит о средней скорости. Все, что попадает в зону ниже 70 баллов, говорит о наличии проблем, требующих решения в ближайшее время.

Создавая шкалу оценок, разработчики решили поиграть в светофор.

  • Красный – хода нет! 

Этим цветом отмечаются самые серьезные ошибки.

Если при проверке ваш ресурс попал в красную зону, ошибки нужно устранить как можно скорее.

Смотрите, как это выглядит в жизни.

На версии для ПК:

На мобильной версии:

  • Оранжевый – скоро можно ехать!

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

Это скорее подсказки о том, что на сайте есть элементы, замедляющие его загрузку, но они не такие страшные, как «красные»;

  • Зеленый – погнали!

Вас можно только поздравить: все оформлено правильно.

Обратите внимание: Один из проектов нашей веб-студии — разработка сайта для стоматологической клиники Дентал Студио.

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

Одной из задач этого проекта была его оптимизация по Google PageSpeed Insights.

Делимся с вами результатами.

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

На версии для ПК:

На мобильной версии:

Как видите, показатели отличные!

Google PageSpeed Insights: как улучшить загрузку?

Для начала стоит заняться валидацией сайта и разобраться с ошибками в коде. Устаревшие html-элементы или CSS могут негативно сказаться на оптимизации.

Не забудьте проверить сайт при помощи http://validator.w3.org/ и устранить все ошибки.

Кроме этого, у сайта могут быть другие пробелы:

  • Сервер тормозит или медленно отвечает 

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

  • Большие картинки

Следите за тем, что грузите на свой сайт. Проверьте разрешение изображения и, при необходимости, уменьшите его или пересохраните в формате «для веб».

  • «Тяжелый» javascript. 

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

 

Если «вылечить» все болезни сайта, можно добиться очень хорошей оценки.

Доверить оптимизацию своего ресурса стоит опытной студии, знающей кучу трюков, с помощью которых можно добиться высшей оценки в Speed Insights.

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

Подпишитесь на рассылку

Наш Twitter

У вас есть проект?

Давайте обсудим его!

Свяжитесь с нами, или оставьте заявку онлайн

+38 (098) 455 35 55

Заказать звонокОтправить запрос

Остались вопросы?
Мы ответим

Оставьте заявку

и мы свяжемся с Вами в ближайшее время

Бриф

Заполните бриф по интересующему направлению и мы свяжемся с вами в ближайшее время

Оставьте свой номер

и мы свяжемся с Вами в ближайшее время