Об ускорении сайта

Мне нередко приходится заниматься ускорением сайта. И иногда приходится объяснять заказчикам, что без доступа к самому сайту, я мало что смогу сделать, могу дать только общие советы. В этой заметке я расскажу на конкретном примере, зачем мне нужен доступ внутрь сайта для ускорения его.

Существует много инструментов проверки скорости сайта, но самый популярный этот - https://pagespeed.web.dev/?hl=ru

Обратите внимание, что проверять надо каждую страницу отдельно, но много настроек настраиваются и для сайта в целом. Также при разных проверках сайт может выдавать разные данные (колебаться числа). И даже небольшое изменение кода страницы (убрали один скрипт js) может значительно повлиять на итоговые числа (как ни странно но может и в плюс. А может и в минус!): в связи с чем и требуются многочисленные проверки, причем максимально приближенные к боевому сайту.

Давайте посмотрим на вашу главную страницу



Именно тут будут все показатели, которые вам надо улучшить. Я пройдусь вкратце по некоторым из них с комментариями:

Отложите загрузку скрытых изображений Потенциальная экономия – 43 КиБ

Обычно тут используется какой-нибудь плагин, библиотека (lazy load они обычно называются). Я не знаю, на каком движке (CMS) у вас сайт и ничего не смогу посоветовать, если не узнаю. Кроме этого, многие плагины могут конфликтовать друг с другом, так что даже если например у вас вордпресс, то не зная какие установлены другие я не смогу вам ничего посоветовать без риска.

А если у вас вообще самописный движок – то тут вообще надо смотреть, как внутри всё организовано и подключать скрипты JS.

Используйте современные форматы изображений Потенциальная экономия – 143 КиБ

Тут картинки обычно конвертят в формат webp и заменяют все вхождения. Было картинка.png -> стало картинка.webp и т. Но опять же я не знаю, каким образом у вас в шаблоне сайта (или на страницах) выводится это все. Через базу данных может можно все заменить запросами, или же в файлах. Я не знаю как у вас организована загрузка картинок – через фтп или админку.

Для изображений не заданы явным образом атрибуты width и height.

Смотри пункт выше. Как у вас генерируется html код? Где все это править? Непонятно.

Задайте правила эффективного использования кеша для статических объектов Найдено 44 ресурса

Здесь можно пойти тоже многими путями. Один из них – это создать правила для вашего сервера. Но надо знать, кто у вас отдает статику – nginx или apache. Кроме этого, даже зная сервер, иногда не все правила подходят и приходится экспериментировать, чтобы найти правильное – они могут записываться разными способами. Другой способ – установить кэширующие плагины. Но тут возвращаемся к вопросу – какая CMS и может у вас уже есть подобные. Или в движке есть какое-то кэширование и всё будет конфликтовать.

Еще способ – это подключить кэширование от хостера, у некоторых есть. Но тут надо знать хостера и иметь доступ в панель управления сайтом.

Включите сжатие текста Потенциальная экономия – 375 КиБ

Смотри пункт выше – тоже надо настраивать на сервере

Уменьшите влияние стороннего кода Сторонний код заблокировал основной поток на 1 800 мс

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

Удалите неиспользуемый код JavaScript Потенциальная экономия – 1 082 КиБ

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

А искать по сайту не имея к нему доступ – неблагодарное дело. Также непонятно как эти скрипты потом редактировать.

Итог

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