Использование Google PageSpeed Insights 

Google PageSpeed Insights — бесплатный онлайн-инструмент, предоставляемый Google для анализа производительности веб-страниц. Он оценивает показатели загрузки страницы на ПК и  мобильных устройствах и предоставляет рекомендации по их оптимизации.

При запуске теста на серверах Google создается браузер, который открывает вашу страницу в симуляции очень медленного Интернета на слабом устройстве, воспроизводя худший возможный сценарий. Чаще всего Google производит измерения с серверов США или Европы. Воспроизводится ситуация, будто клиент из США/Европы с очень плохим интернетом и медленным устройством открывает сайт на сервере в России. 

1. Посещаемость сайта
Если ваш сайт активно посещают, то его ресурсы попадают  в кеш на сервере. Мы храним сайты на разных серверах для отказоустойчивости и автоматически решаем, какой сервер подходит лучше в данный момент. Например, клиент из Казани может обратиться к одному серверу в России, а клиент из Тюмени к другому. На каждом сервере есть собственный кеш, который создается отдельно под каждый сайт. 

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

2. Общий размер страницы
Если на странице добавлено очень много секций и элементов, даже скрытых во вкладках, либо это окна (даже неиспользуемых)— всё это влияет на параметр Avoid an excessive DOM size. Наши разработчики стараются использовать как можно меньше DOM-элементов, но практически любая незначительная деталь на странице создает несколько DOM-элементов.

Например:
У вас на странице добавлен простой текстовый элемент. Он состоит из нескольких DOM- элементов, таких как контейнер для позиционирования и размера элемента; контейнер для анимации элемента; элемент, задающий SEO-тег и т.д. Если внутри этого текста выделить одно слово другим цветом , то это слово будет обернуто в дополнительный DOM-элемент, к которому применяется цвет. Нужна ссылка в тексте – ссылка тоже является дополнительным элементом. Таким образом, даже на небольшом на первый взгляд сайте может оказываться несколько тысяч элементов. 

Google PageSpeed Insights постоянно уменьшает допустимый максимум и на данный момент бьет тревогу, если страница содержит более 800 элементов.

Метрики, которые использует https://help.flexbe.ru/pagespeed/#156200528, бывают двух видов: те, на которые можно повлиять, и те, на которые повлиять не получится. 

Largest Contentful Paint — одна из важнейших метрик, сильно влияющих на результат. В идеале при загрузке страницы первый экран должен быть отрисован сразу и не меняться. И здесь может возникнуть противоречие. 

Google требует, чтобы контент первого экрана загружался быстрее, чем любой другой контент на странице. Но если первый экран содержит какую-либо графику (изображения, видео, логотипы и т.д.) или сложную логику (например, слайдер изображений), то всё необходимое должно быть загружено до отображения и как можно быстрее. 

Однако блокирующая загрузка ресурсов плохо отражается на другом, еще более важном показателе — Total Blocking Time. Например, если на первом экране загружено фоновое изображение и включена ленивая загрузка изображений, то вероятнее всего,  Google PageSpeed посчитает проблемой, что изображение загружается с задержкой. Если же грузить такие изображения в первую очередь, то может возникнуть ситуация, когда пользователь  быстро увидит первый экран, но при дальнейшем пролистывании обнаружит полностью разломанную страницу. Оценка Google PageSpeed окажется высокой, а реальный пользовательский опыт негативным.

Для улучшения показателя Largest Contentful Paint не используйте никакую графику на первом экране, избегайте видео на первом экране, избегайте любых слайдеров вначале страницы, а так же максимально подготавливайте и сжимайте любую графику (частая проблема, например, в использовании формата gif для логотипа).

На показатели Reduce unused JavaScript, Reduce JavaScript execution time и
Minimize main-thread work могут повлиять только разработчики Flexbe.

Для удобства соберем все рекомендации, которые вы можете выполнить, в отдельный список:

• Не нагружайте первый экран графикой и контентом. Не используйте на первом экране слайдеры или видео в качестве фона страницы.
  

• Для улучшения показателя Avoid an excessive DOM size делайте простые и визуально легкие страницы, неперегруженные контентом.
  

• Используйте оптимальные форматы изображений. Не используйте форматы PNG и GIF для изображений. Отключайте сжатие изображений только в том случае, если уверены, что самостоятельно оптимизировали изображения перед загрузкой.
  

• В разделе Настройки—Оптимизация скорости не отключайте Lazy Loading. Хотя это может улучшить показатели Google PageSpeed Insights, реальный опыт клиентов, скорее всего, ухудшится. Включите отложенную загрузку счетчиков и виджетов. Но помните, что часть виджетов могут сломаться, так как их разработчики ожидают, что их код будет загружаться сразу.
  

• Не добавляйте никакой сторонний код перед закрывающим тегом head в коде страницы.
  

• В целом будьте внимательны к любому стороннему коду, так как он часто может подгружать на страницу большое количество сторонних ресурсов и замедлять ее.
  

• Для видео используйте опцию Включить Обложку с кнопкой Play. В этом случае видео будет загружаться только после клика по превью.
  

• Загружайте собственное видео напрямую с ПК. Избегайте видео на YouTube, так как в этом случае на страницу будут грузиться фреймы стороннего сервиса.
  

•  Оптимизируйте собственные видео для веб; оптимальный размер видео не более 1 МБ. Не используйте слайдеры с видео.
  

• Удаляйте неиспользуемые окна в разделе Окна.
  

1. Не нагружайте первый экран графикой и контентом. Не используйте на первом экране слайдеры, или видео в качестве фона страницы. 
2. Для улучшения показателя Avoid an excessive DOM size делайте простые и легкие визуально страницы, не перегруженные контентом.
   
3. Использовать оптимальные форматы изображений. Не используйте форматы PNG и GIF для изображений. Отключайте сжатие изображений только в том случае, если уверены, что самостоятельно оптимизировали изображения перед загрузкой
   
4. Раздел Настройки- Оптимизация скорости. Не отключайте Lazy Loading. Хотя это может улучшить показатели Google Page Speed Insights, реальный опыт клиента, скорее всего, ухудшится. Включите отложенную загрузку счетчиков и виджетов (но помните, что часть виджетов могут сломаться, так как их разработчики ожидают что их код загрузится сразу). 
5. Не добавляйте никакой сторонний код перед закрывающим тегом head в коде страницы.. 
6. В целом будьте внимательны к любому стороннему коду, так как множество их них могут подгружать на страницу большое количество сторонних ресурсов и замедлять ее.
7. На видео используйте опцию Включить Обложку с кнопкой Play. В этом случае, до клика по превью, видео не будет загружаться. 
8. Загружайте собственное видео напрямую с ПК, избегайте видео на YouTube (так как в этом случае на страницу будут грузиться фреймы стороннего сервиса). Оптимизируйте собственное видео под веб, оптимальный вес видео не более 1 МБ. Не делайте слайдеры с видео.
9. Удаляйте неиспользуемые Окна в разделе Окна. 
10. Плохой практикой является дублирование секции и настройка разной видимости на мобильных и ПК, т.к это удваивает количество элементов. По возможности старайтесь адаптировать контент одной секции под все устройства.
    

Даже при выполнении всех рекомендаций выше, не стоит ожидать от Google PageSpeed Insights 100-балльного показателя. Наши тесты показали, что 100-балльный показатель не получают даже совсем пустые сайты, где добавлено буквально 2–3 текстовых элемента.