Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.08.2015, 14:22
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

Почему PageSpeed Insights считает что скрипты блокируют отображение?
Здравствуйте!

Немного поломал себе голову уже с оптимизацией. Может кто-то знает из-за чего PageSpeed Insights может считать, что скрипты подключенные непосредственно перед </body> могут блокировать отображение содержимого?
В частности вот:
https://developers.google.com/speed/...&tab=deskt op
В перечне "Удалите код" значатся скрипты, которые расположены внизу страницы. Почему? И почему на титульной странице сайта, которая собирается из того же шаблона, этой проблемы нет?
https://developers.google.com/speed/...2F&tab=desktop
Ответить с цитированием
  #2 (permalink)  
Старый 17.08.2015, 14:39
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,661

BETEPAH, а нормально что у тебя стиль подключен после </html>?
Ответить с цитированием
  #3 (permalink)  
Старый 17.08.2015, 15:09
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

Rise,
это их рекомендация https://developers.google.com/speed/...izeCSSDelivery
но вопрос не об этом
Ответить с цитированием
  #4 (permalink)  
Старый 17.08.2015, 15:18
Профессор
Отправить личное сообщение для alex.vv Посмотреть профиль Найти все сообщения от alex.vv
 
Регистрация: 15.04.2014
Сообщений: 176

BETEPAH, подключаемые js/css файлы, которые идут до контента, считаются render-blocking JavaScript and CSS. Т.е. пока они не загрузятся, пользователь не увидит контент. Решения такие:
1.) Повесить подключение скриптов в onReady event, т.е. подключать скрипты только после полной загрузки страницы. Альтернативно, можно попробовать засунуть все js/css файлы непосредственно перед закрывающим тегом body.
2.) Запихнуть js/css в качестве содержимого тегов <script> и <style> (если кеширование не важно)
3.) Конкатенировать/минифицировать весь js в один файл (и тоже самое с css) и подключать его + повесить cache хедеры при отдаче файлов. Заказчику объяснить, что грузится все только в первый раз, а потом ложится в клиентский кеш и не влияет на скорость отображения контента. Правда, гуглинсайтовское предупреждение это не уберет.

(также, если память не изменяет, содержимое <style> и <script> тегов, расположенного в head, тоже будет render-blocking)

Цитата:
BETEPAH, а нормально что у тебя стиль подключен после </html>?
Ну и это, конечно, невалидно и надо поменять.
Ответить с цитированием
  #5 (permalink)  
Старый 17.08.2015, 15:26
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,661

BETEPAH, забавно что они сами своим рекомендациям не следуют, рекомендаторы блин))
https://developers.google.com/speed/...&tab=de sktop
Из серии другим буду рекомендовать, а сам буду писать как попало)
Ответить с цитированием
  #6 (permalink)  
Старый 17.08.2015, 15:27
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

Сообщение от alex.vv
Альтернативно, можно попробовать засунуть все js/css файлы непосредственно перед закрывающим тегом body.
Вы внимательно читали топик?
Ответить с цитированием
  #7 (permalink)  
Старый 17.08.2015, 16:19
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

Попробуй поигратся с defer/async и в конце концов, можно использовать автозагрузчик вынесенный в файл к примеру
var loader = (function (src, callback) {
    var doc = window.document, cache = {};
    return function (src, callback) {
        if (cache.hasOwnProperty(src)) {
            callback && (callback());
        } else {
            var el = doc.createElement('script'), loaded = 0;
            el.src = src, doc.body.appendChild(el), cache[src] = 1;
            if (callback) {
                el.onload = el.onreadystatechange = function () {
                    if ((el.readyState && el.readyState !== 'complete' && el.readyState !== 'loaded') || loaded)
                        return false;
                    el.onload = el.onreadystatechange = null, loaded = 1, callback();
                };
            }
        }
    };
}());
loader('test1.js', me);
function me() {
    alert('This callback Me');
}

или http://jsfiddle.net/vlasenkofedor/5pDXf/
Динамически вставленные скрипты загружаются асинхронно, при этом они будут кешироватся браузером

Последний раз редактировалось Vlasenko Fedor, 17.08.2015 в 16:21.
Ответить с цитированием
  #8 (permalink)  
Старый 17.08.2015, 16:40
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

Poznakomlus,
К сожалению, не все скрипты из используемых, можно загружать асинхронно. К примеру, api гугл-карт используется во множестве мест сайта и переписывать функционал под использование в callback займет много времени. Да и хотелось бы докопаться до истины.
Почему одинаковое подключение на двух показанных страницах, может по-разному восприниматься анализатором google?
Могут ли на это влиять абсолютно позиционированные элементы? Или код анализируется построчно, согласно расположению в html?
Ответить с цитированием
  #9 (permalink)  
Старый 17.08.2015, 17:20
Профессор
Отправить личное сообщение для alex.vv Посмотреть профиль Найти все сообщения от alex.vv
 
Регистрация: 15.04.2014
Сообщений: 176

BETEPAH, предположу, что у вас на страничке http://traveltipz.ru/review есть jQuery onReady события ("$(function() {..."), (строчки 1950-2800) которые ждут, пока все вышеперечисленные js файлы (из pagespeed insights) загрузятся. Попробуйте переместить скрипты со строчек 1950-2800 в самый низ, перед закрывающим тегом body.
Ответить с цитированием
  #10 (permalink)  
Старый 17.08.2015, 17:31
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

alex.vv,
а вот это очень похоже. Спасибо!
Буду пробовать, хотя это и не легко будет, страница же собирается из модулей и скрипты, которые нужно вынести вниз принадлежат только этой странице, а не всему шаблону.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Почему калькулятор не считает? Filja Общие вопросы Javascript 10 25.03.2015 10:40
Мой собственный башорг в скайпе))) devote Оффтопик 81 03.10.2012 00:56
Психологическая деформация программистов DreamTheater Оффтопик 59 24.03.2012 05:03
фрактальный сыр x-yuri Оффтопик 76 23.11.2011 21:59
О фрилансе (Личный опыт) free Оффтопик 105 18.08.2011 17:02