Google PageSpeed Insights (продолжение...)
Хотел продолжить всё писать в одном посту про гуглспид (Google PageSpeed Insights), но из-за того, что в DLE 18.0 убрали стандартный bbcodes, которым я привык уже пользоваться, редактирование ранних новостей ломает всю структуру новости, а править все строки и приводить их в порядок — дольше, чем просто начать писать продолжение по данной теме…
В общем продолжу накидывать разные примеры, которые помогут увеличить показатель Google PageSpeed Insights и ускорить загрузку сайта перед пользователем.
На скрине представлен лучший показатель из трёх попыток проверки главной страницы блога на данный момент, при включенной метрике и 3-х блоков РСЯ! Иногда из-за разной рекламы в блоках показатель может значительно упасть, например, сейчас при проверке были показатели моб версии (ПК версии) главной страницы: 67/100 (100/100), 96/100 (100/100), (96/100 (100/100)
Ещё один способ для отложенной загрузки для Яндекс РСЯ и Метрики
<script>
( function () {
var loadedTLAnalytics = false,timerId;
if ( navigator.userAgent.indexOf( 'YandexMetrika' ) > -1) { //Это пропуск робота Метрики
loadTLAnalytics();
} else {
window.addEventListener( 'scroll', loadTLAnalytics, { passive: true } );
window.addEventListener( 'touchstart', loadTLAnalytics, { passive: true } );
document.addEventListener( 'mouseenter', loadTLAnalytics, { passive: true } );
document.addEventListener( 'click', loadTLAnalytics, { passive: true } );
document.addEventListener( 'DOMContentLoaded', loadFallback, { passive: true } );
}
function loadFallback() {
timerId = setTimeout( loadTLAnalytics, 5000 ); //Это глобальное время задержки 5000 - 5 сек.
}
function loadTLAnalytics( e ) {
if ( loadedTLAnalytics ) {
return;
}
setTimeout(function () { //Загрузка счетчика Метрики, где XXXXXXX - это номер вашего счётчика
(function(m,e,t,r,i,k,a) { m[i]=m[i]||function() { (m[i].a=m[i].a||[]).push(arguments) }; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) { if (document.scripts[j].src === r) { return; } } k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a) } ) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym( XXXXXXX, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true, ecommerce:"dataLayer", triggerEvent:true } );
},0); //Тут можно отложить загрузку для скритпа метрики дополнительно
setTimeout(function () {
addscript("https://yandex.ru/ads/system/context.js", function() {
if( document.getElementById("yandex_rtb_R-A-XXXXX-X") ) {
window.yaContextCb.push(() => {
Ya.Context.AdvManager.render( {
renderTo: 'yandex_rtb_R-A-XXXXX-X',
blockId: 'R-A-XXXXX-X'
} )
} );
}
/* Здесь можно добавить второй и более блоков */
});
},2000); //Тут можно отложить загрузку для скритпа context.js дополнительно
loadedTLAnalytics = true;
clearTimeout( timerId );
window.removeEventListener( 'scroll', loadTLAnalytics, { passive: true} );
window.removeEventListener( 'touchstart', loadTLAnalytics, {passive: true} );
document.removeEventListener( 'mouseenter', loadTLAnalytics, { passive: true } );
document.removeEventListener( 'click', loadTLAnalytics, { passive: true } );
document.removeEventListener( 'DOMContentLoaded', loadFallback, { passive: true } );
}
} )();
function addscript(a,callback,d) {
var eli = document.createElement("script");
eli.src = a;
eli.async = true;
m=document.getElementsByTagName("script")[0];
m.parentNode.insertBefore(eli,m);
eli.onload = () => {
if (callback) callback();
}
}
</script>XXXXXXX — это номер вашего счётчика в Метрике, а R-A-XXXXX–X — это ваши номера блоков в РСЯ.
При визите пользователя на страницу сайта, если пользователь не предпринял никаких действий в виде скрола, клика, или просто движения мышкой, то скрипт загрузится через 5 секунд, а блоки РСЯ через 7 секунд, в указанной конфигурации. Если же было какое-либо действие пользователя, то грузится скрипт Меррики, и через 2 секунды РСЯ.
Для вывода блока рекламы в контенте, нужно просто вывести
<div id="yandex_rtb_R-A-XXXXXX-X"></div>в нужном месте.
Новый вариант добавления CSS файлов шаблона
{*1-ое подключение стилей для гуглспид*}
<link rel="preload" href="{THEME}/style/style.css?v={cache-id}" as="style">
<link rel="preload" href="{THEME}/style/engine.css?v={cache-id}" as="style">
<link rel="preload" href="{THEME}/css/fontawesome.css?v={cache-id}" as="style">
<link rel="preload" href="{THEME}/style/update_style_dle.css?v={cache-id}" as="style">
{*2-ое подключение стилей для гуглспид*}
<link href="{THEME}/style/style.css?v={cache-id}" type="text/css" rel="stylesheet">
<link href="{THEME}/style/engine.css?v={cache-id}" type="text/css" rel="stylesheet">
<link href="{THEME}/css/fontawesome.css?v={cache-id}" type="text/css" rel="stylesheet">
<link href="{THEME}/style/update_style_dle.css?v={cache-id}" type="text/css" rel="stylesheet">Таким образом добавляем и остальные стили в head, если они важны при загрузке, всё остальное — в низ перед /body.
Продолжение следует…
Каким вариантом кода пользоваться, при РСЯ, метрики, или другой рекламе — дело ваше, главное чтоб JS код работал и выполнялся всегда, когда это нужно. В общем читайте, думайте, выбирайте, пробуйте — всё в ваших руках! … и нервах…