Page Speed ​​- Устранение визуализации блокировки

Question

Я пытаюсь улучшить свой рейтинг скорости страницы Google. В настоящее время 51/100 для мобильных и 83/100 для рабочего стола.

Одна из проблем: «Исключить визуализацию, блокирующую JavaScript и CSS, в вышеописанном содержимом». Двумя пунктами, где это применимо, является мой файл с мини-CSS и внешний файл шрифта Google. Есть ли что-нибудь, что я могу сделать, чтобы исправить это?

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

Страница: https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.backpackerjobboard.com.au%2F&tab=mobile

Мой сайт: http://www.backpackerjobboard.com.au/

Спасибо!

Answer 1

Оптимизация «Рендер-блокированию» элементы больше о воспринимались время загрузки, в отличие от максимальной PageSpeed.

Для CSS, это связано с встраивание CSS для критического CSS. Это часто упоминается как контент «Сверху», хотя эта терминология неверна. Критический CSS включает базовые стили, макет (например, сетку) и т. Д.

Вот критический CSS-генератор, доступный онлайн (и на GitHub): http://jonassebastianohlsson.com/criticalpathcssgenerator/

причина, почему вы делаете это для того, чтобы наиболее важные стили вашей загрузки страницы с HTML, и добавленным размер файла в HTML должны быть несущественными с сжат GZIP веб-страниц.

Другая проблема с оформлением с использованием шрифтов Google, что очень распространено. Игнорируйте Совет Google на этом; он рекомендует размещать шрифты Google в нижнем колонтитуле.

Лучший способ это просто генерировать веб-шрифт самостоятельно, используя инструмент, как Font Squirrel Webfont Generator сохранить запрос HTTPS в Google (который вызывает затор при загрузке ваших активов.)

Однако, PageSpeed ​​Инструмент игнорируя основную причину вашей скорости веб-страницы: у вас есть 68 запросов HTTP. Примерно одна треть из них - JS fles, которая должна быть либо агрегирована в один .js файл или, используя библиотеку, такую ​​как Lab.js, чтобы отложить js * рендеринг, чтобы уменьшить HTTP-запросы для этих файлов.

* Если вы используете библиотеку блокировки/загрузки, такую ​​как Lab.js, вам нужно будет встроить критический Javascript в теги скриптов в свой HTML или исключить ключевые файлы js из отложенных.

Что касается Mobile Score, инструмент Google Pagespeed неправильно читает ваш сайт как недружественный мобильный. Тестируя это на другой внутренней странице, ваш рейтинг составляет ~ 74 для мобильных устройств.

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

Большинство ваших проблем с мобильностью будут исправлены путем вложения вашего css и переноса вашего Javascript.

P.S. Не становитесь слишком одержимыми, большинство вещей, которые делают отметки против вас, являются незначительными (то есть менее 5%) корректировками для изображений, css и т. Д.

Answer 2

Пожалуйста, уменьшите ваши html, js и css файлы. Также уменьшите размер изображения, сколько сможете. использовать это для Минимизировать CSS: http://cssminifier.com/