This question already has answers here:
Удалите из верхней части страницы код CSS, блокирующий
отображение. Как лучше сделать?
(4 ответа)
Closed 2 года назад.
Получаю такое сообщение на pagespeed гугла:
Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы
Количество блокирующих скриптов на странице: 2.
Количество блокирующих ресурсов CSS на странице: 1.
Они замедляют отображение контента.
Все содержание верхней части страницы отображается только после загрузки указанных
далее ресурсов. Попробуйте отложить загрузку этих ресурсов, загружать их асинхронно
или встроить их самые важные компоненты непосредственно в код HTML.
Удалите код JavaScript, препятствующий отображению:
http://uberhouse.ru/js/jquery-3.2.1.min.js
http://www.googleadservices.com/pagead/conversion_async.js
Оптимизируйте работу CSS на следующих ресурсах:
http://uberhouse.ru/css/style.min.css
Если ставить под html - то не работает аджакс форма. Как это дело правильно оптимизировать,
сколько не перечитывал гугл, ничего не пойму.
Ответы
Ответ 1
Суть этой ошибки в следующем - когда страница открывается, необходимо как можно раньше
увидеть верх со всеми стилями, картинками и прочим. Принцип работы следующий - начинает
грузиться html, после того как он видит стиль или скрипт - пока его не загрузит, дальше
не пойдет. В итоге приходится сперва дождаться когда загрузятся стили.
Как самый простой и очевидный способ решения данной проблемы - это добавление прелоадера.
Т.е. сразу после открывающегося body добавить тег с классом preloader или как вы его
еще назовете, который будет отображаться поверх страницы и скрываться сразу же как
только выполнится событие $(window).load() Стили для этого блока прописываете в head,
а все остальные стили\скрипты и прочее - поместите в footer.
Ответ 2
Для более подробной информации о скорости загрузки тестируйте ваши веб-страницы с
инструментом (Гугл также рекомендует) 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 при ограниченной пропускной способности сети. Пример:
Если браузер не поддерживает атрибут srcset, по умолчанию файл с изображением импортируется
с помощью атрибута src. Вот почему так важно включать изображение 1x, которое может
отображаться на любых устройствах, независимо от их свойств. Если браузер поддерживает
атрибут srcset, вы можете определять список источников изображений и условий (через
запятую) до поступления запроса. В результате загружаются и выводятся на экран только
те изображения, которые соответствуют параметрам устройства. Вы можете задать любые
условия, от плотности пикселей до ширины и высоты изображения, однако в настоящий момент
хорошо поддерживается только параметр плотности пикселей. Чтобы текущие функциональные
возможности не вошли в противоречие с будущими разработками, продолжайте назначать
этому атрибуту изображение 2x.
Для изменения изображений в зависимости от характеристик устройства (эффект art direction),
воспользуйтесь элементом picture. Элемент picture задает декларативное решение для
обеспечения нескольких версий одного изображения в зависимости от различных характеристик
устройства: размера, разрешения, назначения и т. д. Пример:
Также вы можете определять размер обрабатываемого изображения, добавив дескриптор
width. Это позволит браузеру автоматически вычислить оптимальную плотность пикселей
и выбрать корректное изображение для загрузки. Пример:
В этом примере приведено изображение, которое занимает половину ширины области просмотра
(sizes="50vw") и зависит от ширины браузера и его соотношения логических и физических
пикселей. В результате браузер может выбрать изображение, которое будет корректно отображаться
в окне любого размера.
Источник: статья Гугл Изображения для отзывчивого дизайна.
Сожмите исходный код ваших веб-страниц с этим инструментом HTMLcompressor.
Для предварительной загрузки ресурсов, требуемых для открываемой веб-страницы, примените
мета тэг preload - документация W3.
Для связанных ресурсов (могут быть затребованы пользователем, но не обязательно),
примените мета тэги dns-prefetch + preconnect + prefetch + prerender. Эти тэги указаны
в порядке повышения мощности требуемых ресурсов браузера для применения этих тэгов.
Например, тэг prerender потребляет наибольшее количество мощности браузера, поэтому
этот тэг может тормозить загрузку текущей веб-страницы, но связанная веб-страница с
этим тэгом откроется, практически мгновенно. Определяйте важность связанных веб-страниц
и потенциальную возможность их вызова пользователем. Документация W3 о этих тэгах.
Лучшее решение для полной мобильно оптимизации - это применение технологии Гугл AMP
Accelerated Mobile Pages. Готовьте ваш веб-сайт к новому индексу Гугл Mobile-first
Indexing - вероятно это начнётся в феврале 2018.
Если браузер не поддерживает атрибут srcset, по умолчанию файл с изображением импортируется с помощью атрибута src. Вот почему так важно включать изображение 1x, которое может отображаться на любых устройствах, независимо от их свойств. Если браузер поддерживает атрибут srcset, вы можете определять список источников изображений и условий (через запятую) до поступления запроса. В результате загружаются и выводятся на экран только те изображения, которые соответствуют параметрам устройства. Вы можете задать любые условия, от плотности пикселей до ширины и высоты изображения, однако в настоящий момент хорошо поддерживается только параметр плотности пикселей. Чтобы текущие функциональные возможности не вошли в противоречие с будущими разработками, продолжайте назначать этому атрибуту изображение 2x. Для изменения изображений в зависимости от характеристик устройства (эффект art direction), воспользуйтесь элементом picture. Элемент picture задает декларативное решение для обеспечения нескольких версий одного изображения в зависимости от различных характеристик устройства: размера, разрешения, назначения и т. д. Пример:
В этом примере приведено изображение, которое занимает половину ширины области просмотра (sizes="50vw") и зависит от ширины браузера и его соотношения логических и физических пикселей. В результате браузер может выбрать изображение, которое будет корректно отображаться в окне любого размера. Источник: статья Гугл Изображения для отзывчивого дизайна. Сожмите исходный код ваших веб-страниц с этим инструментом HTMLcompressor. Для предварительной загрузки ресурсов, требуемых для открываемой веб-страницы, примените мета тэг preload - документация W3. Для связанных ресурсов (могут быть затребованы пользователем, но не обязательно), примените мета тэги dns-prefetch + preconnect + prefetch + prerender. Эти тэги указаны в порядке повышения мощности требуемых ресурсов браузера для применения этих тэгов. Например, тэг prerender потребляет наибольшее количество мощности браузера, поэтому этот тэг может тормозить загрузку текущей веб-страницы, но связанная веб-страница с этим тэгом откроется, практически мгновенно. Определяйте важность связанных веб-страниц и потенциальную возможность их вызова пользователем. Документация W3 о этих тэгах. Лучшее решение для полной мобильно оптимизации - это применение технологии Гугл AMP Accelerated Mobile Pages. Готовьте ваш веб-сайт к новому индексу Гугл Mobile-first Indexing - вероятно это начнётся в феврале 2018.
Комментариев нет:
Отправить комментарий