Статьи об оптимизации по Google PageSpeed Insights
Недавно взял в оптимизацию пару сайтов. Сделано всё по максимуму, но влияние сторонних скриптов даёт о себе знать в показателе значения гуглспид. Решил попробовать подправить пару пунктов из раздела ДИАГНОСТИКА, потому что из раздела ВОЗМОЖНОСТИ сделано всё, что только можно было. Как и в случае с моим блогом на главной странице в разделе ВОЗМОЖНОСТИ остались пункты «Удалите неиспользуемый код jаvascript» и «Удалите неиспользуемый код CSS».
В первом случае речь идёт о jquery, но там нельзя ничего вырезать.
Во втором случае речь о сокращении css, для первичной загрузки стилей и рендеринга страницы. Многие плагины на вордпресс для решения данного вопроса выгружают все стили в код страницы. Я несколько лет назад делал так же, но это неправильно с точки зрения скорости загрузки сайта, потому что при загрузке CSS файлов, они будут кешироваться в браузере пользователя, и в последующем будут страницы сайта у пользователя загружаться быстрей, чем выводить все стили в html код. Другой вариант решения данной проблемы, как многие пишут — это разделения файла стилей на два:
- Первый для первычных загружаемых классов
- Второй — все остальные стили
Но и здесь не всё просто. Пробовал делать критические стили страницы этим сервисом, но он не всегда помогает. Например, один шаблон был построен на Bootstrap и при попытке создания критических стилей сервис выдавал всего несколько классов, которые только ухудшали загрузку страницы.
Далее начал гуглить различные варианты по улучшению пунктов из раздела ДИАГНОСТИКА:
- Минимизируйте работу в основном потоке
- Старайтесь не допускать создания цепочек критических запросов
- Постарайтесь уменьшить количество запросов и размеры передаваемых данных
- Сократите размер структуры DOM
Как оказалось статей довольно много, и нигде нет никакой конкретики. Встречаются статьи от разных веб-студий и блоггеров, которые предлагают услуги по оптимизации загрузки, при всём этом показатели гуглспид у них 10-40 для моб версии и из выполненных рекомендаций у них всего 5-10 пунктов. И тут сразу же возникает вопрос: как они могут предлагать подобную услугу, когда они не смогли оптимизировать свой сайт?
И в заключение хочу напомнить, что довольно редко получается достичь 100/100, главное при оптимизации загрузки по гуглспид — это максимально выполнить все возможные рекомендации, чтобы сайт загружался максимально быстро, а так же стоит обратить внимание на то, что все сторонние скрипты понижают данный показатель. Взять, например, данный блог. Главная страница моб версии выходит на данный момент 98-99/100, пк — 100/100. Но страница с материалом уже показывает более низкий показатель ~70-75/100 моб версия, и ~95-99/100 пк. В полной новости такой низкий показатель идёт только из-за рекапчи от гугла. Но с данным моментом ничего нельзя сделать, потому что данная рекапча выводится самой CMS DLE.
Вот пример статистики загрузки главной страницы DLE на одном сайте, который я сейчас настраиваю:
<!-- The script execution time 0,09513 seconds -->
<!-- The time compilation of templates 0,01651 seconds -->
<!-- Time executing MySQL query: 0,0003 seconds -->
<!-- The total number of MySQL queries 0 -->
<!-- RAM uses 3,34 MB -->
<!-- For compression was used gzip -->
<!-- The total size of the page: 123105 bytes After compression: 23312 bytes -->В отличие от того, как сайт загружался до оптимизации, это отличный результат. При этом показатель по гуглспид моб версии главной страницы выходит всего 50-60/85-90 (моб/пк). Конечно результат вроде как не очень, судя по циферкам, но в реалии сайт загружается довольно быстро, как на телефоне, так и на ПК.