pagespeed google

Суть этой ошибки в следующем - когда страница открывается, необходимо как можно раньше увидеть верх со всеми стилями, картинками и прочим. Принцип работы следующий - начинает грузиться html, после того как он видит стиль или скрипт - пока его не загрузит, дальше не пойдет. В итоге приходится сперва дождаться когда загрузятся стили.

Как самый простой и очевидный способ решения данной проблемы - это добавление прелоадера. Т.е. сразу после открывающегося body добавить тег с классом preloader или как вы его еще назовете, который будет отображаться поверх страницы и скрываться сразу же как только выполнится событие $(window).load() Стили для этого блока прописываете в head, а все остальные стили\скрипты и прочее - поместите в footer.

Для более подробной информации о скорости загрузки тестируйте ваши веб-страницы с инструментом (Гугл также рекомендует) WebPagetest = результат теста вашей главной веб-страницы. Если вы щелкните на изображение в колонке Waterfall, то вы увидите подробную информацию о загружаемых ресурсах/файлах тестируемой веб-страницы, с указанием времени загрузки для каждого ресурса. В данном анализе, в колонке Waterfall View, вы можете видеть, что наибольшие тормоза веб-страницы - это шрифты ttf (щелкните прямо на красной полосе/баре и откроется окно с подробность загрузки данного ресурса): fonts/Ubuntu/Ubuntu-Regular.ttf = Content Download: 2393 ms + fonts/Ubuntu/Ubuntu-Bold.ttf = Content Download: 2277 ms и так далее.

Рекомендации оптимизации скорости загрузки веб-страниц:

• Примените асинхронную загрузку скриптов для максимально возможного количества скриптов веб-страницы - подробнее статья Гугл "Используйте асинхронные скрипты".
• Задайте вашему лого размер, соответствующий размеру показа на веб-странице. Оптимизируйте ваши svg файлы с этим инструментом SVG Editor.
• Задайте всем изображениям ваших веб-страниц размеры, соответствующие размеру показа. Для изменения размера вы можете использовать этот инструмент Online Photo Editor.
• Сожмите изображения на ваших веб-страницах с этим инструментом ImageOptim online.
• Для устройств с экранами высокого разрешения: добавьте к элементу img атрибут srcset. Этот атрибут расширяет функциональные возможности элемента img. Благодаря ему вам будет проще назначать изображения с учетом параметров устройства. атрибут srcset позволяет браузеру выбирать наиболее подходящее изображение в зависимости от характеристик устройства. Например, использовать изображения 2x на экране 2x и, потенциально, изображения 1x на устройстве 2x при ограниченной пропускной способности сети. Пример:

<img src="photo.png" srcset="photo@2x.png 2x" ...>

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

• Для изменения изображений в зависимости от характеристик устройства (эффект art direction), воспользуйтесь элементом picture. Элемент picture задает декларативное решение для обеспечения нескольких версий одного изображения в зависимости от различных характеристик устройства: размера, разрешения, назначения и т. д. Пример:

<picture> 
  <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x"> 
  <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x"> 
  <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood"> 
</picture>

• Также вы можете определять размер обрабатываемого изображения, добавив дескриптор width. Это позволит браузеру автоматически вычислить оптимальную плотность пикселей и выбрать корректное изображение для загрузки. Пример:

<img src="lighthouse-200.jpg" sizes="50vw" 
     srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w, 
             lighthouse-400.jpg 400w, lighthouse-800.jpg 800w, 
             lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w, 
             lighthouse-1800.jpg 1800w" alt="a lighthouse">

В этом примере приведено изображение, которое занимает половину ширины области просмотра (sizes="50vw") и зависит от ширины браузера и его соотношения логических и физических пикселей. В результате браузер может выбрать изображение, которое будет корректно отображаться в окне любого размера.

Источник: статья Гугл Изображения для отзывчивого дизайна.

• Сожмите исходный код ваших веб-страниц с этим инструментом HTMLcompressor.
• Для предварительной загрузки ресурсов, требуемых для открываемой веб-страницы, примените мета тэг preload - документация W3.
• Для связанных ресурсов (могут быть затребованы пользователем, но не обязательно), примените мета тэги dns-prefetch + preconnect + prefetch + prerender. Эти тэги указаны в порядке повышения мощности требуемых ресурсов браузера для применения этих тэгов. Например, тэг prerender потребляет наибольшее количество мощности браузера, поэтому этот тэг может тормозить загрузку текущей веб-страницы, но связанная веб-страница с этим тэгом откроется, практически мгновенно. Определяйте важность связанных веб-страниц и потенциальную возможность их вызова пользователем. Документация W3 о этих тэгах.

Лучшее решение для полной мобильно оптимизации - это применение технологии Гугл AMP Accelerated Mobile Pages. Готовьте ваш веб-сайт к новому индексу Гугл Mobile-first Indexing - вероятно это начнётся в феврале 2018.