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

#pagespeed_insights

Доброго времени суток!

Не получается исправить последнее правило от Google Page Speed Insights:


  Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы.
  Количество блокирующих ресурсов CSS на странице: 1. Они замедляют отображение контента.
  
  Примерно 3 % содержания верхней части страницы можно отобразить, не дожидаясь загрузки
указанных далее ресурсов. Попробуйте отложить ее или асинхронно загрузить блокирующие
ресурсы либо встроить их особо важные составляющие прямо в код HTML.
  
  Оптимизируйте работу CSS на следующих ресурсах:
  http://ecoexspert.kz/css/style.css


Попробовал разные способы:  


перенёс CSS вниз body,  
вынес стили в HTML документ


А Google Page Speed Insights всё равно ругается, как можно исправить проблему?

Ссылка на ресурс.
    

Ответы

Ответ 1

Установите ссылки на ваши файлы css и js внизу перед закрытым элементом /body. При
этом, для валидации примените для линка стилей property=stylesheet, примерно так: 








Поиграйте с установкой async - только для скриптов js: устанавливайте и смотрите
какой результат в браузере. Также я рекомендую вам для ускорения применять сжатие исходного
кода с этим инструментом и сжатие картинок с этим инструментом. Пример async: 


Ответ 2

На всех js файлах добавьте атрибут defer, а весь css уберите куда подальше вниз.
И то и другое надо минифицировать, можно еще и то, и другое вставлять в тело страницы.


Ответ 3

Оставьте css сверху, js вниз, defer не ставить если подключается больше 1 файла


Ответ 4

Сайт почему-то не доступен... 

Вообще данная рекомендация гугла (о 3%) напрямую связана с тем, что внешний css-файл
небольшой, поэтому лучше от него отказаться, а все стили перенести прямо в html-код
страницы (в секцию HEAD). С точки зрения гугла, лучше потратить чуть больше трафика,
чем создавать новое http-соединение. С учетом того, что используется gzip-сжатие для
html, то всё довольно логично.

Гугл дает вредные советы?

#html #css #оптимизация #google #pagespeed_insights

Читал статьи гугла по оптимизации страниц для ускорения загрузки и наткнулся на интересный
пример здесь: 
https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example


  
    
    
  
    

      Hello, world!
    
  




 назодится за тегом 

Что это? Опечатка или так делать нормально?
    

Ответы

Ответ 1

Это не вредный совет. Метатег link особенно с объемным css-файлом, размещенный там
где он должен быть (в секции head) откладывает рендер станицы до полной загрузки css.
В коде примера сделаны 2 вещи:
1. В head размещен inline-css. Это методика называется critical path css и позволяет
отобразить правильно или почти правильно первую 1000 пикселей страницы.
2. Откладывает загрузку полного файла стилей почти до конца рендера страницы.
Второй момент да, не соответствует спецификации, но это легко исправить заменив его
простым js-кодом, добавляющим в секцию head тег link c полным css.


Ответ 2

В английской версии этой статьи, видимо более новой, отображается весьма отличающийся
пример:


  
    
    
  
    

      Hello, world!
    
    
    
  

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

#javascript #оптимизация_сайтов #pagespeed_insights

PageSpeed Insights Рекомендует исправить обязательно:


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




Хотя все скрипты итак стоят внизу страницы:



Не понимаю что может быть причиной, как можно исправить? 

Если дело в количестве подключаемых библиотек, то проверяла другую подобную страницу
(с десятком подключаемых скриптов) и все в порядке. async не помогает, да и проблем
с ним много.

footer.tpl:



После скриптов контента нет.
    

Ответы

Ответ 1

Как разобраться с блокирующим CSS я давал ответ вот тут. Дополнительно можете воспользоваться
библиотекой loadCSS для загрузки неблокирующего CSS. 

Куда вы разместите в странице ваши скрипты — в начало или конец документа — не имеет
значения. В вашем случае совет следующий:

Во-первых, объединить все библиотеки-плагины и файл с их инициализацией в один файл,
назовем его, к примеру, main.js.

Во-вторых, загружать jQuery по событию load:

function dlOnload() {
  var jq = document.createElement("script");
  jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js";
  document.body.appendChild(jq);
}

window.addEventListener("load", dlOnload, false);


В-третьих, запускать загрузку зависимых от jQuery файлов после его загрузки:

function dlOnload() {
  var jq = document.createElement("script"), mainScript;
  jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js";
  document.body.appendChild(jq);

  jq.onload = function() {
    mainScript = document.createElement("script");
    mainScript.src = "scripts/main.js";
    document.body.appendChild(mainScript);
  }
}

window.addEventListener("load", dlOnload, false);


И в-четвертых, всем скриптам, которым не важен порядок загрузки, добавить атрибут async.



UPD: для динамической загрузки скриптов с возможностью кэширования в localStorage
рекомендую воспользоваться basket.js. В вашем случае код будет выглядеть примерно таким
образом:

basket
.require({ url: 'path-to/jquery.js' })
.then(function () {
    basket.require(
    { url: 'path-to/jquery-ui.js' },
    { url: 'path-to/jquery.fancybox.js' },
    { url: 'path-to/jquery.fancybox.pack.js' },
    { url: 'path-to/common.js' }
    );
}, function (error) {
    // Ошибка
    console.log(error);
});

Оптимальный формат изображений на сайте

#frontend #изображения #pagespeed_insights

Появилась острая необходимость в оптимизации изображений на сайте. Как увеличить
скорость загрузки сайта путем уменьшение объема загружаемых изображений? Для тестирования
результата использую несколько разных способов: 


Тестирование инструментом PageSpeed Insights
Измерение общего объема сайта до и после оптимизации изображений. 


Знаю 4 основных формата изображений используемых в Web:


JPEG
GIF
PNG
SVG


В основном использую именно JPEG и PNG. Поэтому занимался оптимизацией именно их.
Этого вроде бы хватало. Но совсем недавно PageSpeed Insights изменился кардинально,
например данное обновление описано на Хабре. Ранее были рекомендации по сжатию изображений,
сейчас же Google рекомендует использовать современные форматы изображений JPEG 2000,
JPEG XR и WebP.


  Используйте современные форматы изображений
  
  Для изображений в форматах JPEG 2000, JPEG XR и WebP используется
  более эффективное сжатие, поэтому они загружаются быстрее и потребляют
  меньше трафика, чем изображения PNG и JPEG.



От предлагаемых форматов изображений я просто в шоке. 



Главные проблемы, которые меня беспокоят:


Поддержка браузерами
Размер изображений


Разберёмся со всеми пунктами по порядку. 

Пункт №1

Для анализа поддержки браузерами буду использовать сервис Can I use.

Результат формата изображений JPEG - не дал результатов

Результат формата изображений PNG


Результат формата изображений JPEG 2000

Результат формата изображений JPEG XR

Результат формата изображений WebP

Результат просто ошеломительный. В моём понимании, я теперь должен использовать эти
современные форматы изображений, загружая в зависимости от браузера разную по формате
картинку пользователю? Или на примере интернет магазина, это как вообще?

Пункт №2
В этом пункте использовав одно изображение в JPEG, я переконвертировал его в разные
форматы. 

Изображение в формате JPEG

Размер 1,26 МБ
Ссылка https://ibb.co/bxGFh0


Изображение в формате PNG

Размер 6,97 МБ

Ссылка https://ibb.co/etc7Uf

Изображение в формате JPEG 2000

Размер 2,71 МБ

Изображение в формате JPEG XR

Размер 10,4 МБ 

Изображение в формате WebP

Размер 704 КБ



Использовать JPEG, GIF, PNG, SVG или JPEG 2000, JPEG XR, WebP? Как?
    

Ответы

Ответ 1

Можно использовать в Adobe Photoshop встроенный оптимизатор "для Web", при сохранении
изображения.
Возможна гибкая настройка по соотношению качество-вес/скорость

pagespeed google [дубликат]

#jquery #css #google #pagespeed_insights

        
             
                
                    
                        
                            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.

Google PageSpeed кеширование сторонних JS скриптов

Здравствуйте. Google PageSpeed рекомендует кешировать скрипты
http://connect.facebook.net/az_AZ/sdk.js (20 минут) http://apis.google.com/js/client:plusone.js?onload=render (30 минут) https://apis.google.com/js/api.js (30 минут) http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js (60 минут) https://oauth.googleusercontent.com/…e:rpc:shindig.random:shindig.sha1.js?c=2 (60 минут) https://pagead2.googlesyndication.com/pagead/osd.js (60 минут) http://www.google-analytics.com/analytics.js (2 часа)
Они располагаются на сторонних серверах. Как это сделать?

Ответ

Ничего делать не надо. Сами сервера отдают эти файлы с указанием времени кэширования. Пример:

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

PageSpeed Insights Рекомендует исправить обязательно:
Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы

Хотя все скрипты итак стоят внизу страницы:

Не понимаю что может быть причиной, как можно исправить?
Если дело в количестве подключаемых библиотек, то проверяла другую подобную страницу (с десятком подключаемых скриптов) и все в порядке. async не помогает, да и проблем с ним много.
footer.tpl:

После скриптов контента нет.

Ответ

Как разобраться с блокирующим CSS я давал ответ вот тут. Дополнительно можете воспользоваться библиотекой loadCSS для загрузки неблокирующего CSS.
Куда вы разместите в странице ваши скрипты — в начало или конец документа — не имеет значения. В вашем случае совет следующий:
Во-первых, объединить все библиотеки-плагины и файл с их инициализацией в один файл, назовем его, к примеру, main.js
Во-вторых, загружать jQuery по событию load
function dlOnload() { var jq = document.createElement("script"); jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"; document.body.appendChild(jq); }
window.addEventListener("load", dlOnload, false);
В-третьих, запускать загрузку зависимых от jQuery файлов после его загрузки:
function dlOnload() { var jq = document.createElement("script"), mainScript; jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"; document.body.appendChild(jq);
jq.onload = function() { mainScript = document.createElement("script"); mainScript.src = "scripts/main.js"; document.body.appendChild(mainScript); } }
window.addEventListener("load", dlOnload, false);
И в-четвертых, всем скриптам, которым не важен порядок загрузки, добавить атрибут async

UPD: для динамической загрузки скриптов с возможностью кэширования в localStorage рекомендую воспользоваться basket.js. В вашем случае код будет выглядеть примерно таким образом:
basket .require({ url: 'path-to/jquery.js' }) .then(function () { basket.require( { url: 'path-to/jquery-ui.js' }, { url: 'path-to/jquery.fancybox.js' }, { url: 'path-to/jquery.fancybox.pack.js' }, { url: 'path-to/common.js' } ); }, function (error) { // Ошибка console.log(error); });