Поглядывая краем глаза на Мудрого
PageSpeed
a, задался целью разобраться вот с этой его частью...
Но посмотрев внимательно на те несчастные цЫфЫрки, решил: да на фиг надо морочить серое... Разницы никто не почувствует и не ощутит... Нехай грузятся все оптом... Решил, закрыл и забросил...
Но я немного неправильно подумал об этом гниде -
PageSpeed
e. Этот урод с тех пор постоянно делал вот так -
Сны становились все кошмарней и кошмарней. Нервы не выдержали и произошел срыв... Нажрался как свинья. Потом стало стыдно за державу... Дело дошло до этого -
Врубил плагин и полез..... Все было на месте. Все маты
PageSpeed
присутствовали в тех-же местах.
Ну что ж. Придется опять лезть в ХТМЛ вики и иже подобные места... Полез, начитался, наиспробовался, наэкспериментировался и наконец - то "оно пришло неожиданно" и было очень похоже на предмет, который Алка называла пипецом... -
А теперь, собственно к решению проблемы, которую подкинул этот чертов PageSpeed
.
Из великих трудов:
Как отложить синтаксический анализ JavaScript
Рано или поздно большинство веб-мастеров озадачивается вопросом оптимизации сайта для его быстрейшей загрузки.
Все утилиты, анализирующие скорость загрузки сайта, выдают ряд рекомендаций о том, что нужно сделать для быстрейшей загрузки. Более подробно работа с этими утилитами будет рассмотрена в отдельной статье, сейчас же хотелось бы коснуться лишь одного пункта, - откладывание синтаксического анализа JavaScript.
Получив от плагина сообщение "При начальной загрузке страницы выполняется синтаксический анализ JavaScript в объеме ????Кб. Чтобы ускорить отображение страницы, отложите синтаксический анализ JavaScript", начинающие веб-мастера впадают в ступор: "как его отложить-то?!?"
Видим перед собой список
JavaScript
В каком файле и как расположен тот или иной
JavaScript
нам поможет как всегда БЛОКНОТ++ с его великолепным
Гошой поиском.
А мы рассмотрим решение на основе сразу нескольких
JavaScript
, расположенных в файле "ГОЛОВЫ" -
overall_header.html
И что у нас там? А там вот такая картинка:
Код: Выделить всё
<script src="{T_SUPER_TEMPLATE_PATH}/jquery-1.7.2.min.js"></script>
<script src="{T_SUPER_TEMPLATE_PATH}/jquery.fancybox.js"></script>
<script src="{T_SUPER_TEMPLATE_PATH}/tooltip.js"></script>
<script src="{T_SUPER_TEMPLATE_PATH}/swfobject.js"></script>
<script src="{T_SUPER_TEMPLATE_PATH}/forum_fn.js"></script>
<script src="{T_SUPER_TEMPLATE_PATH}/scripts.js"></script>
<script src="{T_SUPER_TEMPLATE_PATH}/ccat.js"></script>
<!-- IF S_IN_PWD_GEN -->
<script src="{T_SUPER_TEMPLATE_PATH}/jqueryui.js"></script>
<script src="{T_SUPER_TEMPLATE_PATH}/jrumble.js"></script>
<!-- ENDIF -->
<!-- IF ENABLE_COMMENTS and F_SENDCOM -->
<script src="{T_SUPER_TEMPLATE_PATH}/js/jquery-ui.js"></script>
<script src="{T_SUPER_TEMPLATE_PATH}/js/comments.js"></script>
<!-- ENDIF -->
<!-- IF 0 -->
<script src="{T_SUPER_TEMPLATE_PATH}/slidermenu/slider.js"></script>
<!-- ENDIF -->
<!-- IF SCRIPT_NAME == "image_page" or SCRIPT_NAME == "comment" or (S_QUICK_REPLY and S_SHOW_ATTACH_BOX) -->
<script src="{T_SUPER_TEMPLATE_PATH}/jquery.form.js"></script>
<!-- ENDIF -->
<!-- IF S_VIEWFORUM or S_INDEX -->
<script src="{T_SUPER_TEMPLATE_PATH}/crawl.js"></script>
<!-- ENDIF -->
<!-- IF S_VIEWTOPIC -->
<script src="{T_SUPER_TEMPLATE_PATH}/jquery.timers.js"></script>
<!-- ENDIF -->
Сразу скажу - не копируйте это себе!!! Это только лишь пример.... Понятно что человек произошел от обезьяны, но к phpBB это не имеет никакого отношения. Тут другие законы.
И вот этому всему попробуем устроить рассинхрон при загрузке этого всего с кеша сервака браузерами....
Ну, прежде всего, посмотрим внимательно на
Js
обложенные условиями... По большому счету они нам не интересны. Так как, зная коды условий, можно понять что это -
вызывается только при смене пароля, это
при написании комментов, а это
только тогда, когда где-то включено...
Ну что, делаем вывод что все
JavaScript
под условиями нам не интересны, так как они страницей(ами) вместе со всем ее ХТМЛ и КСС не вызываются... Ну, хоть что-то успокаивает.
Стоп!!!!! А это что -
??? Это означает: "при просмотре списка тем и главной... Значит это тоже наш клиент...
В итоге получаем такой список:
Код: Выделить всё
<script src="{T_SUPER_TEMPLATE_PATH}/jquery-1.7.2.min.js"></script>
<script src="{T_SUPER_TEMPLATE_PATH}/jquery.fancybox.js"></script>
<script src="{T_SUPER_TEMPLATE_PATH}/tooltip.js"></script>
<script src="{T_SUPER_TEMPLATE_PATH}/swfobject.js"></script>
<script src="{T_SUPER_TEMPLATE_PATH}/forum_fn.js"></script>
<script src="{T_SUPER_TEMPLATE_PATH}/scripts.js"></script>
<script src="{T_SUPER_TEMPLATE_PATH}/ccat.js"></script>
<!-- IF S_VIEWFORUM or S_INDEX -->
<script src="{T_SUPER_TEMPLATE_PATH}/crawl.js"></script>
<!-- ENDIF -->
<!-- IF S_VIEWTOPIC -->
<script src="{T_SUPER_TEMPLATE_PATH}/jquery.timers.js"></script>
<!-- ENDIF -->
Вот вызов и подгрузку именно этих
JavaScript
и будем рассинхронизировать для примера, а вы в это время будете ТАКОЕ ЖЕ ДЕЛАТЬ С подобными
JavaScript
из того идиотского списка идиотского
PageSpeeda
...
Нам советуют вот это для использования:
Код: Выделить всё
<script type="text/javascript">
function onLoadScript () {
var scri = document.createElement('script');
scri.src = '<путь к файлу>';
document.body.appendChild(scri);
}
window.onload = function () {setTimeout(onLoadScript, <количество миллисекунд после загрузки документа>)}
</script>
Именно это рассинхронизатор и используем. Что делаем в первую очередь? В первую очередь надо определить реальное время загрузки страницы, на которой используются все эти
JavaScript
, то есть - той, на которой вы запустили великолепный
PageSpeed
. Раскоментив дебаггер и рефрешнувшись мы видим время (например) - 1.250 сек.
Теперь надо определить время загрузки этой же страницы , НО БЕЗ ВСЕХ УКАЗАННЫХ В СПИСКЕ того
PageSpeeda
скриптов
JavaScript
. Это сделать легко - трем все выбранные для рассинхрона строки с
JavaScript
, чистим пять кешей и перезагружаем страницу. Что мы видим? А мы видим время (например) - 0.485 сек.
Во те на!!!! Выбранные нами скрипты отнимают у сервака и браузера почти целую секунду (все как пример)!!!! Но зато теперь мы знаем, что таймеры рассинхрона надо распределить между 0.5 сек и 1.2 сек. Другими цифрами между 500 и ... А вот тут мы впали в ступор, а что же со следующей цифрой? А ничего!!!! Про нее просто надо забыть... Так как мы организуем рассинхрон!!! И распределим его по нарастанию всего 5 милисекунд.
И так. Поехали дальше и подробненько...
Возвращаем удаленное в файл и начинаем над ним колдовать...
Первое, что нам попалось на глаза -
Код: Выделить всё
<script src="{T_SUPER_TEMPLATE_PATH}/jquery-1.7.2.min.js"></script>
Кланяться в ножки этому "святому" квери мы не будем и отправляем его в первый аут. В итоге, вместо строки
Код: Выделить всё
<script src="{T_SUPER_TEMPLATE_PATH}/jquery-1.7.2.min.js"></script>
Получаем -
Код: Выделить всё
<script>
function onLoadScript () {
var scri = document.createElement('script');
scri.src = '{T_SUPER_TEMPLATE_PATH}/jquery-1.7.2.min.js';
document.body.appendChild(scri);
}
window.onload = function () {setTimeout(onLoadScript, 505)}
</script>
Для гарантии выполнения "правил phpo" замените предложенные одиночные скобы на двойные, что в итоге дает нам это:
Код: Выделить всё
<script>
function onLoadScript () {
var scri = document.createElement("script");
scri.src = "{T_SUPER_TEMPLATE_PATH}/jquery-1.7.2.min.js";
document.body.appendChild(scri);
}
window.onload = function () {setTimeout(onLoadScript, 505)}
</script>
Циферку 505 видели? Мы добавили 5 милисеков к основному времени загрузки страницы.
Продолжаем издеваться над выбранными
JavaScript
далее и в итоге получаем вместо прежнего куста файла:
Код: Выделить всё
<script src="{T_SUPER_TEMPLATE_PATH}/jquery-1.7.2.min.js"></script>
<script src="{T_SUPER_TEMPLATE_PATH}/jquery.fancybox.js"></script>
<script src="{T_SUPER_TEMPLATE_PATH}/tooltip.js"></script>
<script src="{T_SUPER_TEMPLATE_PATH}/swfobject.js"></script>
<script src="{T_SUPER_TEMPLATE_PATH}/forum_fn.js"></script>
<script src="{T_SUPER_TEMPLATE_PATH}/scripts.js"></script>
<script src="{T_SUPER_TEMPLATE_PATH}/ccat.js"></script>
<!-- IF S_VIEWFORUM or S_INDEX -->
<script src="{T_SUPER_TEMPLATE_PATH}/crawl.js"></script>
<!-- ENDIF -->
<!-- IF S_VIEWTOPIC -->
<script src="{T_SUPER_TEMPLATE_PATH}/jquery.timers.js"></script>
<!-- ENDIF -->
Такую красоту:
Код: Выделить всё
<script>
function onLoadScript () {
var scri = document.createElement('script');
scri.src = "{T_SUPER_TEMPLATE_PATH}/jquery-1.7.2.min.js";
document.body.appendChild(scri);
}
window.onload = function () {setTimeout(onLoadScript, 505)}
</script>
<script>
function onLoadScript () {
var scri = document.createElement('script');
scri.src = "{T_SUPER_TEMPLATE_PATH}/jquery.fancybox.js";
document.body.appendChild(scri);
}
window.onload = function () {setTimeout(onLoadScript, 510)}
</script>
<script>
function onLoadScript () {
var scri = document.createElement('script');
scri.src = "{T_SUPER_TEMPLATE_PATH}/tooltip.js";
document.body.appendChild(scri);
}
window.onload = function () {setTimeout(onLoadScript, 515)}
</script>
<script>
function onLoadScript () {
var scri = document.createElement('script');
scri.src = "{T_SUPER_TEMPLATE_PATH}/swfobject.js";
document.body.appendChild(scri);
}
window.onload = function () {setTimeout(onLoadScript, 520)}
</script>
<script>
function onLoadScript () {
var scri = document.createElement('script');
scri.src = "{T_SUPER_TEMPLATE_PATH}/forum_fn.js";
document.body.appendChild(scri);
}
window.onload = function () {setTimeout(onLoadScript, 525)}
</script>
<script>
function onLoadScript () {
var scri = document.createElement('script');
scri.src = "{T_SUPER_TEMPLATE_PATH}/scripts.js";
document.body.appendChild(scri);
}
window.onload = function () {setTimeout(onLoadScript, 530)}
</script>
<script>
function onLoadScript () {
var scri = document.createElement('script');
scri.src = "{T_SUPER_TEMPLATE_PATH}/ccat.js";
document.body.appendChild(scri);
}
window.onload = function () {setTimeout(onLoadScript, 535)}
</script>
<!-- IF S_VIEWFORUM or S_INDEX -->
<script>
function onLoadScript () {
var scri = document.createElement('script');
scri.src = "{T_SUPER_TEMPLATE_PATH}/crawl.js";
document.body.appendChild(scri);
}
window.onload = function () {setTimeout(onLoadScript, 540)}
</script>
<!-- ENDIF -->
<!-- IF S_VIEWTOPIC -->
<script>
function onLoadScript () {
var scri = document.createElement('script');
scri.src = "{T_SUPER_TEMPLATE_PATH}/jquery.timers.js";
document.body.appendChild(scri);
}
window.onload = function () {setTimeout(onLoadScript, 545)}
</script>
<!-- ENDIF -->
Заливаем файл на сервак, чистим пять кешей и перезагружаем страницу....
Мать твою!!! Дебаг все равно показываем 0.5 сек, а скрипты все подгрузились и все работает. Вот это фокус!!!!! И где те чертовы 1.250? А они ушли на дальний кордон... Но самое главное - нас похвалил
PageSpeeda