Начну с тезисов:
1. Чем быстрее загрузится страница, тем меньше пользователей ее покинут. По данным исследований, 70% людей не готовы ждать загрузки мобильного сайта более 2-х секунд
2. С 2021 года скорость загрузки сайта на мобильном станет одним из факторов ранжирования в поисковой выдачи у Гугла
3. В вебмастере Яндекса появилась метрика «Скорость сайта», что видимо так же будет учитываться (или уже учитывается) при ранжировании поисковой выдачи
4. Для оптимизированных сайтов контекстная реклама у Гугла дешевле (по непроверенным данным от одного рекламного агентства)
Хочу поделиться опытом ускорения собственного сайта. Разработчик мне особо не смог помочь (или не захотел), пришлось разбираться самостоятельно. В сети встречается много однотипных статей по ускорению сайта, которые по сути являются переводом советов от PageSpeed Insights , я постараюсь не увлекаться копипастом.
Метрики производительности сайта
Основные требования Гугла по метрикам сформулированы тут . Ему важно следующее:
1. Largest Contentful Paint (LCP) – время отрисовки самого большого видимого элемента. Как правило для е-комерса это какая-либо картинка: либо фото товара, либо банер
2. First Input Delay (FID) – скорость ответа сайта
3. Cumulative Layout Shift (CLS) – смещение слоев сайта в процессе загрузки страницы
Все остальные метрики больше справочные, позволяющие понять суть проблем.
Инструментарий для диагностики проблем
PageSpeed Insights
В PageSpeed Insights я пользовался блоком «Данные наблюдений» для сбора статистики по метрикам. В этом блоке отображаются реальные данные пользователей за последние 28 дней по заданной странице. Этот блок выводится только для популярных страниц, у которых было достаточно посетителей.
Блок «Origin Summary» показывает картинку по сайту в целом.
В блоке «Имитация загрузки страницы» не всегда выводятся релевантные данные (по моему опыту). К примеру, для мобильной версии в разделе «Диагностика» в «Отрисовка самого крупного контента» почему-то выводятся файлы от десктопной версии, возможно эти же десктопные файлы и учитываются в расчетах имитации. Так же имитация в PageSpeed Insights отрабатывает в основном быстрее, чем реальные девайсы у пользователей.
Общая оценка скорости может варьироваться в пределах +- 20 единиц. Достаточно сделать 3-5 запусков с интервалом в пару часов, чтобы в этому убедиться. При этом замечал, что это не связано с возможным изменением нагрузки на сервер.
Данные наблюдений от PageSpeed Insights я фиксировал в экселе: как сайту в целом, так по некоторым страницам. Там так же отражал основные действия с сайтом, чтобы понимать какие именно доработки на что могли повлиять.
Вот так выглядит статистика:
Спойлер: на момент публикации мой сайт соответствует требованиям WebVitals и для десктопной, и для мобильной версии.
Google Search Console
В разделе «Улучшения» - «Основные интернет-показатели» видна картинка как в целом по сайту, так и по конкретным страницам, которые нужно взять в работу.
Панель разработчика в Chrome
Наиболее полезной мне показалась панель разработчика в Хроме. Открываем страницу в режиме инкогнито, жмем F12, переходим во вкладку lighthouse.
Для запуска тестов рекомендую выбрать Low-end-mobile или Mid-tier-mobile. С низкой скоростью можно больше поймать проблем, связанных с загрузкой. К примеру, у меня банера начинали листаться до полной загрузки всей страницы, что негативно сказывалось на метрике «Совокупное смещение макета при отрисовке». На нормальной скорости эта проблема не выявлялась, и я голову сломал, прежде чем нашел эту багу.
Информацию о скорости и порядке загрузки файлов можно получить на вкладке Perfomance. Там же можно увидеть, как происходит сборка страницы послайдово. Именно тут становится понятно, как смещаются слои.
Еще бывает полезным для контроля за LCP раздел Experience. В нем видно, что куда и на сколько сместилось. Но мне все же удобнее показались именно слайды.
Как же ускорить сайт?
На скорость загрузки сайта влияют:
1. Подготовка страницы на стороне сервера (рендеринг)
2. Количество загружаемых файлов и их размер
3. Скорость отработки скриптов
Рендеринг
Для ускорения рендеринга помимо стандартных советов по настройке сервера и кэшированию стоит проанализировать долгие запросы к БД. Мы перестали делать некоторые запросы к БД «на лету» в момент рендеринга, и стали их пересчитывать по расписанию. К примеру, можно заранее подсчитывать количество товаров в категориях. Или пересобирать характеристики товаров в специальную таблицу для ускорения сборки работы фильтра (денормализация таблиц).
Количество файлов
В процессе загрузки страница тянет за собой файлы со стилями, скриптами, изображениями и т.д.
Перед загрузкой каждого файла тратится время на ожидание отдачи файла сервером. Грубо говоря, файлы грузятся друг за другом последовательно. Сократив их количество можно существенно уменьшить время.
Некоторые мелкие изображения (например, лого или заглушки) можно записать непосредственно в html файл, предварительно закодировав в base64.
Что касается стилей, их в идеале объединять в 1 файл. Это же касается скриптов.
Неважные скрипты (пиксель ВК, мэйла, фэйсбука, чат) я перестал погружать вместе со страницей. Сейчас они подгружаются только при скроле или клику.
Ленивую подгрузку тоже никто не отменял.
Размер файлов
Так же сократив размер изображений можно добиться существенного прироста в мобильной версии. Сокращать можно как за счет снижения качества фотографий, так и за счет снижения размера. У меня на мобильной версии для ширины экрана в 320 пикселей подгружалось изображение размером 700*700. Сократив его до 350*350 я уменьшил размер файла в 4 раза.
Я проводил эксперименты с переводом изображений jpg в более современный формат WebP. Размер уменьшался процентов на 20%. Казалось бы – кайф, но заметил, что отрисовка страницы стала отрабатывать медленнее.
Порядок загрузки
Порядком загрузки файлов можно управлять с помощью директив async, preload, defer, preconnect. Первые 2 позволяют существенно улучшить метрики быстродействия сайта. Встречаются неочевидные ситуации, когда подгружается файл стилей, а из него уже начинают подгружаться файлы со шрифтами. Полезно такие шрифты подгрузить заранее.
По ним директивам информации в сети достаточно много, тут не буду останавливаться.
Размещение файлов
Зачастую верстальщики не сохраняют необходимые файлы стилей и скриптов на сервере, предпочитая их загружать со сторонних ресурсов. Стоит ли вашему сайту зависеть от доступности других? Вопрос открытый.
Встречал точку зрения, что неизменяемые файлы (статику) лучше выносить на отдельный домен, пусть даже на этом же сервере. Несколько доменов позволят увеличить лимит на одновременную загрузку файлов. Эту магию не проверял.
Так же статику (да и вообще весь сайт) можно перенести на CDN (Content Delivery Network) - это сторонние серверы, которые заточены на быструю отдачу контента. В сети активно рекламируется сервис Сoudflare. Лично для нас он не дал какого-либо прироста. Вероятно, потому, что у него в РФ всего 2 сервера: в МСК и СПБ, ну а наши клиенты живут в Сибири. Предполагаю, что даст ускорение локальные CDN-сервисы, но их я не успел испытать.
Уменьшение смещения слоя
Очень хорошо на снижение LCP повлияла предварительная загрузка самого крупного изображения – мы так подгружаем первый банер для главной или фото товара в карточке товара
До загрузки изображений лучше использовать заглушки. Обычный прозрачный квадрат весит примерно 1 кб, если его сжать в фотошопе.
На этом - все! Надеюсь, публикация оказалось полезной.
Если что-то упустил - буду рад дополнениям в каментах.
PageSpeed Insights - единственный инструмент в интернете, которому можно доверять. Но это, Александр, не самое печальное))). Печально то, что в статье ничего нового и ничего полезного. Для чайников - тёмный лес, по пояс в болоте, для разработчиков - все у гугла описано.
1. Из за того, что сайт для мобильных не бьёт 100 по PageSpeed Insights, никто из поиска ещё не вылетел. И даже если он даст 65 - не вылетит. Ну да ладно, кликбейт!))
2. Использовать cdn, странно по определению. Только если ваш сервер с сайтом стоит в подвале, и интернет у него "билайн" 🤣🤣🤣
У всех нормальных хостинг провайдеров (для России), data центры или в Москве, или в Питере. Никакой cloudflare не даст скорости быстрее. Мало того, это ещё и запрос на сторонний ресурс, который по определению время отнимает.
Шрифты, картинки, скрипты - кладите в папку public-html и будет вам счастье!
3. Что то про падение скорости от webp - на пиздежь похоже! У webp есть свои минусы, но здесь речь не о том. Чтоб не парится с webp, с прописыванием условий для safari, просто сожмите картинки с помощью онлайн сервиса и ошибки с форматами изображений пропадают. Тока это.... Миниатюры тоже!!
Ленивую загрузку тоже можно и нужно использовать!!
3. Css. Если хоть чуть понимаете в разработке - их однозначно нужно выносить в отдельный файл!
4. Javascript - по любому нужно сжимать!
Сторонние (подключаемые) скрипты лучше не использовать. Надеюсь не нужно объяснять почему?
5. Используйте системные шрифты! Их более чем достаточно. Вообще, проблема со шрифтами, пока они подгрузятся, решается не сложно. У google все описано.
6. Консоль разработчика в Chrome, или Firefox - замечательные инструменты. Только с английским нужно дружить. Ну, или хотя бы с гугл переводчиком!
Серебряной пули на самом деле не существует! Прежде чем делать сайт, нужно понимать, что и для каких задач ты делаешь!
Ключевой момент: скорость загрузки, при прочих равных, рассматривается как фактор ранжирования! Только при прочих равных!
Если сайт супер быстрый, а контент говно, место ему в жопе выдачи!
Алексей, спасибо за каменты!
А кто вылетал из поиска по таким странным причинам, или это кликбейт?
да вроде как тут написано https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html , не?
Именно кликбейт!
Первая часть статьи показалась интересной и уже начала надеяться, что во второй будет рецепт прям от медленной загрузки. Но практически ничего полезного не увидела.
а серебряной пули не существует) по щелчку это не делается
Все это ерунда , важна скорость загрузки у пользователя в смарте где то ловит 3g а где то 4g у кого то смарт говно у кого то айфон последний а вы смотрите стату теста общего и пытаетесь подстроится под общее хотя проблема лежит в пользовательском опыте с вашим сайтом
Плюсану. Тут значение имеют пользовательские метрики.
Вообще, я как раз и писал, что на имитацию загрузки особо не нужно обращать внимание. А вот статистика, которую дает гугл - она как раз собрана с реальных смартов, в т.ч. и дерьмовых.
Комментарий недоступен
не наложение, а временная замена
Не ускоряет, а не позволяет контенту сдвинуться, это одна из метрик на которую гугл сейчас смотрит
Обсуждали же 20 раз и в разных плоскостях, что скорость загрузки мало влияет в реальности на позиции сайта.
Если только у вас сайт не загружается полминуты, ПФ в печали из-за этого, и соответственно позиции там же.
Статья могла выйти лучше, просто для чайников нужно разжевать, что и как оптимизировать, или отдать все на откуп программистам. А то получилось, что у вас первый комментарий вобрал всю суть о скорости загрузки.
топовая причина проблем — отдаёшь пятисотые ошибки роботу по любой причине -> страница вылетает из индекса
Я абсолютно согласен с автором, что скорость загрузки очень важна, особенно после Майского апдейта Google. Но я вам скажу, что сложно не согласиться с тем, что в 2021 году SEO агентства всё больше будут использовать ИИ в своей работе. Поэтому, кто этого делать не будет, тот через год через два безнадёжно отстанет от остальных.
Если посмотреть на работу большинства агентств, предлагающих услуги SEO, то внезапно выясниться, что там не то чтоб ИИ, там обычные инструменты для полноценного анализа данных не используются. Бесплатные версии Арсенкина и Кулакова - как правило, это всё. Просто используемые там практики продвижения большего и не требуют: просчитать плотность вхождений на типовой текст из топа для ТЗ, да купить дешевых ссылок на Сапе, вот и вся оптимизация.
Поговаривают, что ИИ - это сферический конь в вакууме, за которым либо слишком специфические кейсы, либо банальный if/else)
Проверяла свой сайт в developers, если для компьютеров нет проблем - 84, то для мобильных всего 32, пыталась разобраться с советами по устранению проблем, но что то не получается.
Это всегда так. По реальной статистике мобилы менее шустрые, чем десктопы. Да и для ни немного другой подход нужен как минимум в части подгрузки фото/видео контента
Кому интересно, как сделать мобилку так? Пишите в личку, объясню)
Заранее скажу, ответа нет ни в статье ни в комментах)
ну если выпилить скрипты и графику - будет так летать) или гуглу отдавать что-то другое, хотя этим ничего не добьешься
Многим интересно. Почему не здесь?
2,5 секунды ждать когда появится контент это считается плохо должно быть 0,9 сек а потом еще время до взаимодействия с сайтом тоесть когда можно уже жать на кнопки у вас 2, 5 сек отрисовка есть куда стремится
Хахахахаха а вот Google мобильный)
Так суть не в скорости а что бы пользовательский опыт был успешный гугл выбирают миллионы людей по всему миру
Разный результат еще может быть из-за разного времени обработки запроса сервером. Если вы используете виртуальный хостинг, то ресурсы системы распределяются на всех пользователей. Безусловно, есть лимиты, но небольшая корреляция в ответе сервера будет проявляться.
Спойлер: на момент публикации мой сайт соответствует требованиям WebVitals и для десктопной, и для мобильной версии.Я дичайше извиняюсь, но уже нет, получается.