Анализ Angular.js посредством PageSpeed Insight: решения

Anque · 21 Апр 2017

как бороться с:
1.

Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы

js-скрипты итак подгружаются ближе к концу <body>:

2.

Оптимизируйте загрузку видимого контента
Для отображения верхней части страницы необходимы дополнительные сетевые запросы. Сократите объем HTML-кода в верхней части страницы, чтобы она быстрее открывалась в браузере.

при том, что почти со всеми остальными вопросами всё хорошо - получаю оценку в 5/100+-.

Mifrandir · 21 Апр 2017

До идеального не доведёте. Если Wordpress - то там структура темы такая. Не перенести скрипт. В оптимизации нужно где-то остановиться. Главное - чтобы по времени загрузка легла в 2-3 сек.

grave_bird · 21 Апр 2017

Anque написал(а):
js-скрипты итак подгружаются ближе к концу <body>:

Добавь ко всем скриптам атрибут async. Если важна последовательность загрузки, то defer. Для просмотра ссылки Войди или Зарегистрируйся

По второму вопросу, минифицируй CSS который у тебя в шапке, удали оттуда ненужную байду. Также советую отделить те стили, которые используются в верхней части страницы и загружать из через <link> в <head>, а все остальные, например, моим скриптом:

JavaScript:

;(function(){
  var loadStyles = function() {
    var styles = [
      '/css/components.css?1.0.1',
      '/css/custom.css?1.0.1',
    ];
 
    for (var i = 0; i < styles.length; i++) {
      var style = document.createElement('link');
      style.rel = "stylesheet";
      style.href = styles[i];
      document.head.appendChild(style);
    }
  };
  document.addEventListener("DOMContentLoaded", loadStyles);
})();

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

Анализ Angular.js посредством PageSpeed Insight: решения

Anque

Постоялец

Mifrandir

Постоялец

grave_bird

Создатель