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.
↑ Отрисовка самого крупного контента - атрибут fetchpriority="high"
Что делает fetchpriority="high"?
Он указывает браузеру загружать ресурс с высоким приоритетом, ускоряя его получение. Подходит для:
- Критически важных изображений (например, LCP-элемент — крупное изображение в верхней части страницы).
- Ключевых элементов (логотип, главный баннер).
Как правильно использовать fetchpriority?
✅ Только для LCP-изображения (самое крупное в viewport при загрузке):
<img src="hero-banner.jpg" fetchpriority="high" alt="..." loading="eager">✅ Для важных предзагружаемых ресурсов (если используете <link rel="preload">):
<link rel="preload" href="critical-image.jpg" as="image" fetchpriority="high">Альтернативные методы оптимизации
loading="lazy" – для отложенной загрузки изображений вне viewport.
<picture> + srcset – адаптивные изображения под разные разрешения.
CDN + сжатие – оптимизация размера и доставки.
↑ Ещё один код для отложенной загрузки скриптов
let isScriptLoaded = false;
function loadExternalScript() {
if (!isScriptLoaded) {
isScriptLoaded = true;
const script = document.createElement("script");
script.src = "https://example.com/ads.js"; // URL стороннего скрипта
script.async = true;
script.defer = true;
document.body.appendChild(script);
}
}
// Загрузка через 2 секунды или при клике
document.addEventListener("DOMContentLoaded", function() {
setTimeout(loadExternalScript, 2000);
document.addEventListener("click", loadExternalScript);
});🔹 Плюсы такого подхода для рекламы
✔ Ускорение загрузки страницы – реклама не блокирует основной контент.
✔ Ленивая загрузка (Lazy Load) – скрипт загрузится только после клика или через 2 секунды.
✔ Снижение "штрафов" за блокировку рекламы – некоторые браузеры/аддоны блокируют рекламу, если она грузится сразу.
🔹 Минусы и ограничения
❌ Рекламные сети могут запрещать отложенную загрузку (например, Google AdSense требует загрузки в <head>).
❌ Снижается видимость рекламы – если скрипт загрузится слишком поздно, рекламная система может не успеть показать баннеры.
❌ Возможны потери доходов – если пользователь уйдёт со страницы до загрузки рекламы.
🔹 Рекомендации
Для AdSense/Яндекс.Рекламы – лучше использовать официальные асинхронные коды, которые уже оптимизированы.
Для аналитики (Google Analytics, Yandex.Metrika) – можно использовать отложенную загрузку, но это может искажать статистику.
Для тяжелых виджетов (например, чаты, карты) – метод хорошо подходит.
🔹 Вывод
Да, код можно применять для сторонних скриптов, но не для всех рекламных систем. Лучше проверить документацию рекламной сети или протестировать, не снижается ли доход. Для других скриптов (аналитика, виджеты) – отличное решение. 🚀
Исходный код был в таком виде:
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Продолжение следует…
Каким вариантом кода пользоваться, при РСЯ, метрики, или другой рекламе — дело ваше, главное чтоб JS код работал и выполнялся всегда, когда это нужно. В общем читайте, думайте, выбирайте, пробуйте — всё в ваших руках! … и нервах…