Как добиться ускорения загрузки страниц сайта при помощи инструмента Google PageSpeed Insights?
Александр Шут / 18.05.20173012
Скорость загрузки страниц — невероятно важный фактор, влияющий не только на отношение потенциальных клиентов к вашему ресурсу, но и на позиции сайта в Google!
Современные пользователи стали чертовски нетерпеливыми: буквально 5-7 лет назад никто не психовал, ожидая, пока белый фон сменится необходимым контентом, то сейчас люди не станут заморачиваться и ждать, пока медленный сайт надумает загрузиться.
Не можешь сделать так, чтобы сайт работал быстро — «Ты кто такой, давай, до свидания!».
Google PageSpeed Insights — что это?
Google PageSpeed Insights — бесплатный инструмент, содержащий список рекомендаций для разработчиков, как выписать своему сайту волшебный пендель и заставить его работать быстрее.
Что сервис может:
- Проанализировать страницу сайта по ее адресу;
- Рассказать, что именно тормозит ее загрузку;
- Посоветовать, что с этим делать.
Что сервис не может, так это сделать оптимизацию за вас.
Если вы все еще сомневаетесь, на кой вам сдался Google PageSpeed Insights, читайте дальше, будем обращать вас в свою веру.
Скорость загрузки влияет не только на удобство использования сайта пользователями, но и на его SEO продвижение. Другими словами — что не нравится пользователям, то не нравится и поисковым системам!
В начале 2017 года представители компании Google официально заявили: "Чем быстрее будет грузиться ресурс, тем больше шансов у него занять хорошие позиции в поисковой выдаче."
От чего зависит скорость загрузки страниц веб сайта?
Скорость загрузки страниц — это целый перечень показателей, которые нельзя вылечить одной таблеткой.
Причин может быть несколько:
- Скорость подключения пользователя к сети
Если у пользователя плохая скорость Интернета, то страницы будут подгружаться медленно. Тут от нас с вами мало что зависит. Нет, мы конечно можем попробовать убедить людей перейти на скоростной Интернет и услышать рекомендации, куда нам с этим пойти…
Поэтому мы пойдем другим путем: — контент, за которым пришел посетитель, должен быть выдан максимально быстро и максимально простым способом без всяких наворотов, прикольных фишечек и других эффектов.
Основное сразу, а плюшки потом: пока посетитель изучает первичную информацию и еще не перешел куда-нибудь дальше по сайту, успеют подгрузиться все скрипты и библиотеки.
- Хостинг, где живет сайт
Если ваш сайт поселился на плохом хостинге — тут и говорить нечего. Оборудование хостинга может нехило сказаться на медленной загрузке вашего ресурса.
Рецепт для такого случая банален: выбирать хороший хостинг, соотнести задачи сайта с возможностями пакета хостинга, а также навести порядок в коде!
- Размер страницы
Все любят толстых котов, но никто не любит толстые сайты. Чем тяжелее ваша страница (в килобайтах), тем хуже она будет качаться в браузер пользователя.
Чтобы «похудеть», нужно уменьшить размер страничек. Сделать это можно, уменьшив разрешение картинок либо поменяв их формат.
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
Внести исправления в коде можно, уменьшив его размер за счет минификации.
Услуги по ускорению скорости загрузки страниц сайта от Zwebra
Быстрая скорость загрузки страниц сайта является одним из важных показателей качества верстки и его кода. Если вы заказываете разработку сайта у новичка, фрилансера или начинающей студии, то рассчитывайте на выходе получить проект, который в большинстве случаев будет находиться в «красной» зоне согласно сервиса Google PageSpeed Insights, а следовательно он будет иметь более низкие позиции в поисковой выдаче, в сравнении с сайтами, у которых нет такой проблемы.
При размещении заказа на разработку корпоративного сайта в Zwebra услугу по оптимизации скорости загрузки сайта вам предложат в качестве дополнительной опции.
Да, добиться «зеленой» зоны достаточно нелегко, поэтому оптимизация Google PageSpeed требует примерно неделю дополнительной работы нашего верстальщика и программиста.
Также мы предоставляем услугу по оптимизации Google PageSpeed для клиентов, которые уже имеют разработанные сайты и обращаются к нам за помощью по ускорению.
В нашем портфеле более 25 примеров работ по ускорению сайтов на WordPress, ModX, OpenCart, Magento и кастомных CMS. Давайте рассмотрим одну из них поподробнее.
Как исправить плохую статистику WordPress в сервисе Google PageSpeed
Если у вас стоит задача оптимизировать скорость загрузки сайта под управлением Wordpress, то первое, что нужно сделать — это провести тестирование скорости страницы. Для этого используется онлайн-инструмент, позволяющий проверить текущую оценку для десктопной версии и для мобильных устройств, что в свою очередь дает возможность получить перечень рекомендаций от Google PageSpeed.
Так какая же оценка Google PageSpeed является хорошей?
Эта оценка формируется на основе таких факторов:
- наличие редиректов (перенаправлений на другие страницы);
- сжатие всех доступных ресурсов;
- максимально быстрый ответ сервера;
- включение браузерного кеширования;
- минификация верстки, стилей и скриптов;
- правильная доставка стилей и скриптов;
- быстрая отрисовка первого экрана;
- устранение скриптов, мешающих отрисовке первого экрана;
- оптимизация изображений.
Это справедливо для всех сайтов. К счастью, у сайтов под управлением Wordpress есть инструменты, помогающие добиться хорошей оценки без огромных усилий.
Речь идет о плагинах Wordpress. Первый из них — Google Pagespeed Insights, одноименный плагин для удобного анализа и создания отчетов по существующим проблемам, влияющим на скорость загрузки веб-сайта.
Далее мы можем использовать плагины для сжатия всех изображений и их «ленивой» подгрузке. Это особенно важно для мобильной версии веб-ресурса.
Последующие важные шаги для увеличения скорости загрузки страниц на Wordpress:
- кеширование страниц;
- оптимизация базы данных;
- отключение ненужных функций и плагинов;
- интеграция с сервисом CDN.
Услуга оптимизации скорости загрузки веб-сайта на Wordpress — пожалуй, одна из самых распространенных наших услуг и это неудивительно, ведь сегодня оценка Google Pagespeed Insights является одним из факторов SEO и высокого ранжирования в Google.
Если «вылечить» все болезни сайта, можно добиться очень хорошей оценки.
Доверить оптимизацию своего ресурса стоит опытной студии, знающей кучу трюков, с помощью которых можно добиться высшей оценки в Speed Insights.
Протестируйте ваш сайт и, если он нуждается в оптимизации или у вас остались вопросы о том, как увеличить скорость его загрузки — пишите в комментарии и мы вам обязательно поможем!