В последнее время стали обращаться клиенты других разработчиков, которые просят увеличить скорость работы сайта. Сайты могут грузиться 10-15-20 секунд, выдавать ошибки, тормозить. В итоге это и раздражает самого владельца сайта, негативно сказывается на позициях в поисковых системах, да и часть посетителей сайта просто закроют такой сайт и уйдут к конкуренту.
Причина такой медленной работы в 90% случаях - это неграмотный или ленивый разработчик. Требуется форма обратной связи? Плагин. Требуется скрипт слайдера - ещё один плагин! И таких плагинов может быть установлено десяток и более. Почти каждый такой плагин подгружает к работе сайта свою версию библиотеку jQuery, файл стилей и кучу других скриптов. А часть даже умудряются подгружать рекламу и скрытые скрипты майнинга криптовалюты в браузере... Встречали и такое! А также подгрузку реферальных ссылок на Алиекспресс и прочие магазины. Это точно не то, что допустимо на вашем сайте!
Мы берёмся за оптимизацию чужих сайтов не очень активно, потому как приходится очень много менять и переделывать. Но все-таки беремся. А также с радостью ускорим свои же сайты, которые работают уже 5-8-10 лет и требуют оптимизации.
Что же включает оптимизация скорости работы сайта:
1. Установка свежих версий платформы и плагинов.
2. Установка свежей версии PHP на сервере
3. Настройка кеширования сайта на стороне сервера и клиента - увеличение времени кеша для статистических объектов
4. Разработка функционала плагинов "руками" с целью сократить число плагинов, а значит снизить нагрузку при работе сайта. Это сокращает число подключений библиотек, а также уменьшает нагрузку на сервер.
5. Установка новых версий библиотек jQuery и прочих, которые могут использоваться сайтом. Это исключает появление ошибок в коде, а также увеличивает скорость обработки кода браузером, исключает уязвимости безопасности.
6. Перевод графики в новый актуальный формат .webp, рекомендованный Google. Учитывая, что именно Google является законодателем мод с Google Chrome, вопрос рекомендаций довольно актуальный. На практике изображения в этом формате занимают в 1,5-2 раза меньше, сокращая общий вес страниц. Кроме того, .webp быстрее обрабатывается браузером.
7. Настройка вывода изображений с атрибутами асинхронной загрузки, загрузки при прокрутке и кодировки. А также настройка и указание размеров изображений, чтобы браузер мог быстрее и "стабильнее" для структуры строить страницу.
8. Правильная отдача размера изображений, чтобы снизить время загрузки и не показывать размытые фотографии. В некоторых проектах вопрос графики основной. В этом случае могут создаваться группы изображений, которые передают при одном разрешении экрана одни изображения, для мобильных устройств - другие, для новых версий браузеров - одни, для старых - другие. В итоге достигается максимальная корректность передачи изображений с высокой скоростью загрузки даже при наличии тысячи и более страниц с большими фотографиями.
9. Настройка атрибутов для загрузки библиотек при построении страницы: сразу с построением DOM, асинхронно или после построения страницы. В некоторых случаях принимается решение подгрузки скрипта уже после загрузки всей страницы или при прокрутке до определённой позиции страницы. Это могут быть карты сайта с контактами, тяжелые галереи, формы связи, онлайн чаты, квизы от сервисов и прочего. В итоге практически нивелируется проблема долгой загрузки скриптов.
10. Отложенная загрузка iframe, а именно видео с Youtube, карты Яндекс.Карты и Google Maps, сторонних калькуляторов и прочих элементов.
11. Довольно часто мобильная версия сайта исключает часть элементов страницы, которые не требуются для загрузки. В этом случае можно использовать программную логику проверки версии браузера клиента и передачи или не передачи блоков информации. В итоге мобильная версия может быть технически легче ПК версии. Например, можно отказаться от вывода половины фотографий галереи, квиза, карты, части контактов в шапке сайта и даже блоков с информацией.
Конечно, существуют и другие факторы, на которые можно повлиять при оптимизации страницы. Часть рекомендаций может показать сервис https://pagespeed.web.dev/, часть вы должны определить сами. Или найти решение, которые поможет это сделать. Например, подчас библиотеки галереи нужны только на страницах работ; как и код слайдера нужен чаще всего только на главной. Если правильно построить логику работы со страницами, то вам скажут спасибо не только посетители сайта, но и это положительно скажется на позициях в поисковых системах.
Наш сайт - https://andreymaksimov.ru/
