Главная страница / Блог / Разное / Google PageSpeed Insights

Google PageSpeed Insights

19 сентябрь 2020, Суббота
154
0
Google PageSpeed Insights

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

Первое что нужно сделать - это оптимизация изображений. Сделать это можно:

Потом можно выполнить сжатие CSS/JS файлов, например, плагином DLE-ASSET
Следующим этапом можно выполнить сжатие HTML кода страницы - плагин тут.
Ну так же не стоит забывать об отложенной загрузки изображений, в ДЛЕ с 13-й версии lazyload.js включен в дистрибутив CMS.
Отложенная загрузка некоторых скриптов, например, яндекс.метрики.

Чаще всего данных действий вполне достаточно, чтобы показатель по гуглспид был выше 50-60 для мобильной версии, а для ПК версии может быть 80-90+.

Но иногда можно и подтянуть показатели ещё и другими способами. Более подробно о них сейчас и напишу.
  1. Асинхронная загрузка JS
    Здесь всё предельно просто - нужно добавить к скриптам async, чтобы было, например, так:
    <script async src="/libs.js"></script>

    Асинхронную загрузку скриптов нельзя ставить на JQuery скрипты, на остальные скрипты можно это использовать, но всегда главное проверять работу скриптов после установки асинхронной загрузки, поскольку часто некоторые скрипты отказывают работать в таком режиме.
  2. Асинхронная загрузка CSS
    Здесь немного посложнее чем со скриптами... Но выход есть, и один из вариантов должен сработать.

    Ранее я делал критический код стилей и выводил их непосредственно в коде шаблона, но, согласитесь, - это не всегда удобно, даже если делать это через {include... Поэтому продолжил поиски и тестирую их в данный момент на некоторых сайтах, в том числе и на данном блоге!

продолжение следует...

изучаемая и проверяемая инфа:
https://habr.com/ru/post/436966/
https://fooobar.com/questions/313160/how-to-load-css-asynchronously
https://github.com/filamentgroup/loadCSS
Комментарии:
Прокомментировать
Модули для создания киносайта и не только на базе DataLife Engine, и многое другое...
Просто блог Евгения Попова, он же - byroot © 2020