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

Опубликовано: 02.09.2018

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

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

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

ВидеоБлиц - за 5 минут ускоряем загрузку сайта

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

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

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

Как ускорить загрузку сайта на WordPress

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

Получаем примерно вот такое, с целым списком рекомендаций по оптимизации сайта, как под мобильные устройства, так и под компьютер.

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

И если кликнуть по ссылке «Как исправить», то сервис выдаст конкретные рекомендации...

Вот только...

Вот только до реализации этих рекомендаций на практике у меня руки никогда не доходили.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Картинки

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

Зачёт.

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

Вопреки моим ожиданиям, сервис и тут всё сделал очень корректно, я бы даже сказал бережно. Он не сжал файлы до уровня одной строки, но зато записал в одну строку каждый селектор в случае с CSS или функцию в случае с js.

Чтобы было понятно, приведу пример. В оригинале так:

.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; }

А сервис сделал так:

В таком варианте работоспособность скриптов и стилей не подвергается сомнению, а вот их загрузка заметно ускорится.

Нам остаётся только загрузить это всё в нужные папки на свой сайт!

Вот такая фишка этого сервиса. Если кому-то это пригодится, то будет просто здорово.

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

????

Удачи Вам и до встречи на моём блоге!