14 марта

PageSpeed Insights (советы ускорения веб-страниц)

минут чтения

0  комментариев

Друзья, приветствую всех! Как настрой? На моем блоге — Дениса Чернятинского, много полезной информации. Сегодня вам будет доступна очередная её порция. Сейчас я изучаю вопрос оптимизации своего блога. На мой взгляд из доступных бесплатных решений, самым оптимальным инструментом в этом направлении является PageSpeed Insights от Google, который доступен в инструментах разработчика.

Содержание

Инструмент PageSpeed

Часть 1 Инструмент оптимизатора

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

Вводим URL страницы

Для всех пользователей браузера Chrome от Google существует одноименное расширение. Присутствует поддержка API Insights для интеграции со сторонними сервисами и программными решениями. Отличный инструмент для оптимизаторов.

Расширение PageSpeed

Часть 2 Как работает PageSpeed Insights

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

  • В первой вкладке видны все советы для мобильной версии сайта;
  • Во второй вкладке содержится информация для обычных сайтов.

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

Можно выделить три основных направления. Все советы разделены по типу важности и выделены цветом:

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

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

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

Часть 3 Примеры советов по ускорению веб-страниц

Начнем с важных советов для компьютеров

Исправьте обязательно

  • Обязательным для исправления в большинстве случаев является совет «Используйте кеш браузера». Исправить такое положение можно либо через файл «.htaccess» или непосредственно писать хостинг провайдеру о включении такой функции;
  • Следующий важный совет предлагает следующее — «Удалить код CSS и JavaScript из верхней части страницы».

Важных советы для компьютеров

К сведению! Как вы можете видеть под каждым советом есть специальная ссылка «Как исправить?». По нажатию на неё откроется более подробная информация, описывающая проблему и пути решения.

Исправьте по возможности

  • Совет по оптимизации изображений, тоже является актуальным для большинства сайтов или блогов. Люди загружают картинки даже не задумываясь об их оптимизации;
  • Сокращение времени ответа вашего сервера на запросы со стороны браузеров пользователей;
  • Сокращение HTML кода на странице. Для устранения можно использовать различные способы сжатия кода для быстрой его обработки.

Исправить для компьютеров

Переходим к важным советам для мобильных устройств

Советы для мобильных устройств

Их устранение дает отличные перспективы для мобильного трафика, растущего день ото дня. Не буду повторятся, так как советы практически схожи с теми, что даны для обычных компьютеров.

Исправить для мобильных устройств

Часть 4 Мои планы по ускорению

Так как я только начал заниматься этим направлением, то показатели моего сайта находятся не в зеленой зоне. Один тот факт, что кеш браузера даже мой хостинг провайдер не может просто так активировать, говорит о последующей не корректной работе сайта. И для активации кеша браузера им нужно официальное заявление.

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

Ах да я же обещал написать параметры моего сайта по версии PageSpeed Insights. Запомните вот эти цифры:

Для мобильных устройств
74/100 Скорость

Для компьютеров
62/100 Рекомендации

В перспективе увидим, как сильно изменяться представленные значения. Вы можете провести подобный эксперимент и со своим сайтом. Участвуйте в этом вместе со мной!

Часть 5 Личное наблюдение

Большинство владельцев сайтов спешу разочаровать. У вас наверняка будут параметры 50-60 или меньше. Если вы хорошо потрудитесь и исправите все рекомендации, то результат не заставит долго ждать и трафик на сайт возрастет в разы.

Конечно 100 из 100 достичь можно, но я такого еще не видел, да и эти значения не достойны затраченных сил. Поэтому совет номер один от меня — просто войдите в зеленую зону 80 и выше.

Часть 6 Ближайшие события

В ближайшее время я постараюсь значительно превзойти эти параметры, о чем непосредственно сообщу в своем блоге. Так что следите за обновлениями информации на блоге. А если статья оказалась для вас полезной поделитесь ей в социальных сетях с помощью наших кнопочек. Так же не забывайте оставлять свои комментарии и написать какие параметры выдает PageSpeed по вашему сайту. Всем высоких баллов!


Теги

google, PageSpeed


Об авторе

У меня есть огромная уверенность в том, что каждый человек может реализовать себя с помощью современных интернет технологий, зарабатывать на этом, развивая и внедряя свои проекты. Реализация себя в том или ином направлении не требует большого времени. Вся необходимая информация уже существует, нужно только знать, что и как использовать для конкретных задач. Я окажу вам помощь в этом!

Denis Chernyatinsky

Вам также может понравиться

Как я осуществил перенос сайта на другой хостинг
Кэширование изображений WordPress в 1 клик
{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>