Оптимизация сайта с помощью сервиса PageSpeed Insights

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

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

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

Итак, сервис PageSpeed Insights, показывает какие конкретно файлы влияют на скорость загрузки сайта и даёт практические рекомендации по их оптимизации.

Как я пользовался этим сервисом

Когда я написал, что пользуюсь этим сервисом очень давно, я конечно сильно преувеличил. Я начал заходить на него очень давно, а вот именно использовать начал только вчера...  

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

Причём сервис показывает данные по двум параметрам - удобство для пользователей и скорость. И по каждому параметру выдаёт свои рекомендации.

И если кликнуть по ссылке «Как исправить», то сервис выдаст конкретные рекомендации... Вот только... Вот только до реализации этих рекомендаций на практике у меня руки никогда не доходили. Стоило взглянуть на перечень всех этих файлов, например, изображений, которые требуется оптимизировать, как всякое желание что-то делать пропадало.

 Вот как это выглядит:

Это что-же, мне надо выискивать все эти картинки, которые распиханы по разным папкам (сервис, кстати показывает конкретные ссылки на них), скачивать, каким-то образом оптимизировать, и закачивать обратно?

 Где взять столько времени?

Отдельная песня про сжатие скриптов и css. Есть несколько онлайн сервисов, которые делают такое сжатие - при этом весь файл записывается в одну строчку. Суть тут в том, что браузеры считывают скрипты и стили построчно, а если всё в одной единственной строке, то время на считывание такого файла уменьшается на несколько порядков.

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

Поэтому использование сервиса Google PageSpeed у меня сводилось к следующему: заходил, проверял, смотрел на результаты, чесал, что называется, репу, говорил «М-да...» и уходил.  

Опыт применения рекомендаций сервиса

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

Смотрел на сервисе ссылку на картинку, при помощи FileZilla находил её и скачивал на компьютер, сжимал (чем и как возможно напишу в следующий раз), и заливал на сайт.

Периодически повторял анализ, чтобы не запутаться что сделал, а что нет... Долго, муторно, но отвлекало меня от моих невесёлых мыслей, да и польза блогу какая-никакая а выходила...

Потратил почти целый вечер, но до конца списка так и не добрался. И вот тут, вдруг обнаружил ту самую фишку, о которой говорил в самом начале статьи... Вот она!

Сервис уже сам всё подготовил и оптимизировал для нас!

Скачиваем архив и в нём находим и скрипты, и стили, и картинки.

Что имеем по итогу?

Картинки 

Скрипты и стили

.arklink { color: #0944A2 !important;cursor:pointer !important; /* цвет ссылки, курсор в виде пальца */ }
.arklink:hover { color: #f00 !important; /* цвет ссылки */ text-decoration: none !important; /* отключение подчёркивания */ }
.tooltip {
border: 1px #696969 solid !important;
background: #FEFFE2 !important;
color: #0944A2 !important;
border-radius: 5px !important;
font: bold 14px Arial, Verdana;
padding: 5px !important;
width: auto !important;
white-space: nowrap !important;
}

.arklink { color: #0944A2 !important;cursor:pointer !important; /* цвет ссылки, курсор в виде пальца */ }
.arklink:hover { color: #f00 !important; /* цвет ссылки */ text-decoration: none !important; /* отключение подчёркивания */ }
.tooltip { border: 1px #696969 solid !important; background: #FEFFE2 !important; color: #0944A2 !important; border-radius: 5px !important; font: bold 14px Arial, Verdana; padding: 5px !important; width: auto !important; white-space: nowrap !important; }

 

И почему я заканчиваю писать эту статью пол-второго ночи? Кто-нибудь может мне объяснить?

😀 

Материалы по теме:

Яндекс возвращает ТИЦ

Закрыть ссылки в комментариях WordPress

Использование специальных UTM меток в ссылках

Продвижение в социальных сетях

Оптимизация изображений – формат webp

Расширенный поиск по сайту