Загружаю...Почему важно, чтобы сайты открывались быстро? Казалось бы, на вашем смартфоне или компьютеры сайт грузится всего 4-5 секунд, что не напрягает. Интернет сейчас быстрый. Но 5 секунды для сайта – это очень много! Если человек ищет товар или услугу в пригороде, возможно, его мобильный интернет не будет таким быстрым. Да и даже домашний интернет иногда работает медленно из-за технических неполадок. В итоге сегодня вы потеряли 5 потенциальных клиентов, завтра 10, послезавтра еще 10. Если вы платите за рекламу в Яндекс.Директе, то каждый такой потерянный клиент — это ваши деньги на рекламу, а также ваша потенциальная прибыль. Последствия такой потери доли клиентов — это потеря поисковых позиций. А значит еще больше потерь финансовых, временных, нервных.
А некоторые сайты могут грузиться 10-15-20 секунд, выдавать ошибки, тормозить. В итоге это негативно сказывается на позициях в поисковых системах.
Вот что об этом говорит Google
«Более быстрые сайты не только улучшают ощущения пользователей; последние данные показывают, что повышение скорости работы сайта, кроме того, ведёт к снижению стоимости его поддержки. Мы очень ценим скорость. То же самое можно сказать и о наших пользователях. Именно поэтому мы решили, что при расчёте показателей поискового ранжирования будем учитывать и скорость сайта».
И тут же разработчики Google подытоживают:
«Если страницы сайта загружаются медленно — это снизит оценку качества рекламы (ad quality score) и рекламные объявления будут стоить дороже.»
Что же говорит Яндекс
«Высокая скорость загрузки сайта напрямую влияет и на показатель отказов, и на конверсию сайта. По данным исследований, 70% людей не готовы ждать загрузки мобильного сайта более 2-х секунд.* Чтобы самостоятельно увеличить скорость загрузки сайта, оптимизируйте его.»
Яндекс.Вебмастер и Google Console
Более того, в сервисе Яндекс.Вебмастер появилась шкала определения скорости работы сайта. Она анализируется только в Яндекс.Браузере.
Панель Яндекс.Вебмастера с факторами, которые для него важны для ранжирования, включая скорость работы.
У Google есть подобная аналитика, но она работает только при установке на сайт Google Analytics. Есть ещё довольно популярный сервис PageSpeed Insights, но он уже не является сервисом от Google. Хотя неофициально его рекомендуют в качестве инструмента для работы с оптимизацией скорости загрузки сайта для Google.
Проще говоря, все поисковые системы отдают приоритет в выдаче быстрым сайтам. Потому что правильная выдача – это то, к чему они стремятся. А корректно и быстро работающие сайты в ТОП поиска – это «правильная выдача». Всё логично.
Почему сайты отрываются медленно?
Причина такой медленной работы в 90% случаях — это неграмотный или ленивый разработчик. На остальные 10% приходится выбор дешёвого хостинга, какие-то проблемы с виджетами и так далее.
Почему мы виним именно разработчиков? Всё сводится к практике. Если для разработки сайта требуется форма обратной связи? Он ставит для этого плагин. Требуется скрипт слайдера — ещё один плагин! И таких плагинов может быть установлено десяток и более. Почти каждый такой плагин на том же WordPress подгружает к работе сайта свою версию библиотеку jQuery, файл стилей и кучу других скриптов. А часть даже умудряются подгружать рекламу и скрытые скрипты майнинга криптовалюты в браузере… Встречали и такое! А также подгрузку реферальных ссылок на «Алиекспресс» и прочие магазины. Это точно не то, что допустимо на вашем сайте!
Мы берёмся за оптимизацию чужих сайтов не очень активно, потому как приходится очень много менять и переделывать. Но все-таки беремся. А также с радостью ускорим свои же сайты, которые работают уже 5-8-10 лет и требуют оптимизации.
Что же включает оптимизация скорости работы сайта
1. Установка свежих версий платформы и плагинов.
2. Установка свежей версии PHP на сервере.
3. Настройка кеширования сайта на стороне сервера и клиента — увеличение времени кеша для статистических объектов.
4. Разработка функционала плагинов «руками» с целью сократить число плагинов, а значит снизить нагрузку при работе сайта. Это сокращает число подключений библиотек, а также уменьшает нагрузку на сервер.
5. Установка новых версий библиотек jQuery и прочих, которые могут использоваться сайтом. Это исключает появление ошибок в коде, а также увеличивает скорость обработки кода браузером, исключает уязвимости безопасности.
6. Перевод графики в новый актуальный формат .webp, рекомендованный Google. Учитывая, что именно Google является законодателем мод с Google Chrome, вопрос рекомендаций довольно актуальный. На практике изображения в этом формате занимают в 1,5-2 раза меньше, сокращая общий вес страниц. Кроме того, .webp быстрее обрабатывается браузером.
«WebP — это современный формат изображений, который обеспечивает превосходное сжатие изображений в Интернете без потерь. Используя WebP, веб-мастера и веб-разработчики могут создавать изображения меньшего размера и насыщеннее, что ускоряет работу в Интернете. Изображения WebP без потерь на 26% меньше по размеру по сравнению с PNG. Изображения с потерями в WebP на 25-34% меньше, чем сопоставимые изображения в формате JPEG при эквивалентном индексе качества SSIM.»
На практике уменьшение общего веса страницы может составлять 100% и более. Если сайт небольшой, например, Landing page или визитка, то оптимизацией изображений можно заняться руками. Если же на сайте несколько сотен или тысяч страниц, то требуется уже массовое решение. Это может быть как пакетное изменение формата, то и изменение «на лету».
7. Настройка вывода изображений с атрибутами асинхронной загрузки, загрузки при прокрутке и кодировки. А также настройка и указание размеров изображений, чтобы браузер мог быстрее и «стабильнее» для структуры строить страницу. Современные браузеры умеют читать код так, чтобы максимально оперативно передавать контент в браузер. У разработчика же есть инструкция, как сообщить браузеру, что требует моментальной загрузки, а что можно подгрузить по мере прокрутки страницы.
8. Правильная отдача размера изображений, чтобы снизить время загрузки и не показывать размытые фотографии. В некоторых проектах вопрос графики основной. В этом случае могут создаваться группы изображений, которые передают при одном разрешении экрана одни изображения, для мобильных устройств — другие, для новых версий браузеров — одни, для старых — другие. В итоге достигается максимальная корректность передачи изображений с высокой скоростью загрузки даже при наличии тысячи и более страниц с большими фотографиями.
9. Настройка атрибутов для загрузки библиотек при построении страницы: сразу с построением DOM, асинхронно или после построения страницы. В некоторых случаях принимается решение подгрузки скрипта уже после загрузки всей страницы или при прокрутке до определённой позиции страницы. Это могут быть карты сайта с контактами, тяжелые галереи, формы связи, онлайн чаты, квизы от сервисов и прочего. В итоге практически нивелируется проблема долгой загрузки скриптов.
10. Отложенная загрузка iframe, а именно видео с Youtube, карты Яндекс.Карты и Google Maps, сторонних калькуляторов и прочих элементов.
11. Удаление лишнего кода для мобильной и ПК версии. Довольно часто мобильная версия сайта исключает часть элементов страницы, которые не требуются для загрузки. В этом случае можно использовать программную логику проверки версии браузера клиента и передачи или не передачи блоков информации. В итоге мобильная версия может быть технически легче ПК версии. Например, можно отказаться от вывода половины фотографий галереи, квиза, карты, части контактов в шапке сайта и даже блоков с информацией.
С чего начать?
Факторов несколько десятков основных и более сотни второстепенных. Каждый фактор — это 10, 5 или 0,5% от общей доли в оптимизации. Что-то даст «прирост скорости» в 1-2 секунды, что-то в 0,1 секунду. Важно думать головой.
PageSpeed Insights
Часть рекомендаций может показать сервис https://pagespeed.web.dev/, часть вы должны определить сами.
Стоит переживать, если сервис показывает скорость загрузки в красной зоне — до 49%. Но я бы рекомендовал стремиться к показателю выше 80% как минимум, а в идеале — зеленая зона от 10 до 100%. Важно, чтобы работа над скоростью загрузки сайта не расходилась с качеством графики и необходимостью предоставить определённый функционал клиенту. Не стоит делать слишком мутные изображения, как и не стоит убирать квизы или онлайн чаты, если они помогают в продаже. Например, если удалось оптимизировать скорость загрузки сайта до 70%, а далее вы стоите перед выбором: убирать функционал или сжимать фото сильнее, оставьте как есть.
Пример замера скорости в PageSpeed Insights для сайта
Или найти решение, которые поможет это сделать. Например, подчас библиотеки фотогалереи нужны только на страницах работ; как и код слайдера нужен чаще всего только на главной. Если правильно построить логику работы со страницами, то вам скажут спасибо не только посетители сайта, но и это положительно скажется на позициях в поисковых системах.