Оптимизация под Google PageSpeed Insights (Гугл скорость)
Итак пробую собрать все данные в кучу по оптимизации сайта под Google PageSpeed Insights (Гугл скорость). Поехали:
0. Если верстка суперкривая, тут горю не поможешь, надо переверстывать. Так же если css весит 100 мб., а используется 100 кб., тоже переверстывать. DOM 5000+ тоже спасать нет смысла, лучше переверстать, а вот всякие фишки (js, картинки, неиспользуемые блоки) можно и отложить. Тем более Гугл не против этого.
1. Оптимизируем бесячую Яндекс метрику, гугл всегда ругается на ее вебвизор. Вместо ХХХХХХХ вставляем свой номер метрики, и не забываем убрать пробелы при копировании скрипта. Кстати, это решение убивает роботов, что очень позитивно для сайта. Ставил эксперимент: на сайте "паслось" по 2000+ роботов и всего по 10-30 человек. После настройки скрипта метрики всех ботов просто "сбрило"! Правда у Яндекса оказались очень кривые показатели с ботами/и без, он даже вебвизоровских людей причислил к ботам, но это другая история.
< script>
var fired = false;
window.addEventListener('scroll', () => {
if (fired === false) {
fired = true;
setTimeout(() => {
(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();
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(XXXXXXXX, "init", {
clickmap: true,
trackLinks: true,
accurateTrackBounce: true,
webvisor: true
});
}, 1000)
}
});
< /script>
< noscript>< div>< img src="https://mc.yandex.ru/watch/XXXXXXXX" style="position:absolute; left:-9999px;" alt="" />< /div>< /noscript>
2. Делаем айфреймы, картинки ленивыми (со скриптом ленивой загрузки можно не выпендриваться, браузеры понимают что мы хотим от них)
< img src="logo.jpg" loading="lazy" alt="Logo" /> < iframe src="myframe.html" loading="lazy">< /iframe>
3.Кому-то сойдет вот такое решение (но далеко не каждый скрипт можно так жестко отложить)
< script>
var fired = false;
window.addEventListener('scroll', () => {
if (fired === false) {
fired = true;
setTimeout(() => {
var script = document.createElement('script');
script.src = "http://site.com/script.js";
document.getElementsByTagName('head')[0].appendChild(script);
}, 1000)
}
});
< /script>
3. Настраиваем .htacess на сервере. Обратите внимание на woff/woff2, у кого-то могут быть другие шрифты. Так же зачастую значения перебиваются из настроек сервера. 118 дней хороший срок, его Google PageSpeed Insights обожает
ExpiresActive On
ExpiresByType image/jpg "access 118 days"
ExpiresByType image/jpeg "access 118 days"
ExpiresByType image/gif "access 118 days"
ExpiresByType image/png "access 118 days"
ExpiresByType image/webp "access 118 days"
ExpiresByType image/svg "access 118 days"
ExpiresByType text/css "access 118 days"
ExpiresByType text/html "access 118 days"
ExpiresByType font/woff "access 118 days"
ExpiresByType font/woff2 "access 118 days"
ExpiresByType application/pdf "access 118 days"
ExpiresByType text/x-javascript "access 118 days"
ExpiresByType application/x-shockwave-flash "access 118 days"
ExpiresByType image/x-icon "access 118 days"
ExpiresDefault "access 118 days"
4. Плюнем в .htacess следующие строки если не включено сжатие:
php_flag zlib.output_compression On
php_value zlib.output_compression_level 5
5. Берем и перегоняем все картинки в webp, уже не боясь за сафари, т.к. объявлена официальная поддержка с ноября 2022 года.
6. Многие просто обожают сильно тормозящий jivosite. Решаем проблему с этим чудо-компонентом (нужно заменить #WidgetId# на идентификатор вашего виджета):
< !-- BEGIN JIVOSITE CODE {literal} -->
< script>
(function(){ document.jivositeloaded=0;var widget_id = '#WidgetId#';var d=document;var w=window;function l(){var s = d.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = '//code.jivosite.com/script/widget/'+widget_id; var ss = document.getElementsByTagName('script')[0]; ss.parentNode.insertBefore(s, ss);}//эта строка обычная для кода JivoSite
function zy(){
//удаляем EventListeners
if(w.detachEvent){//поддержка IE8
w.detachEvent('onscroll',zy);
w.detachEvent('onmousemove',zy);
w.detachEvent('ontouchmove',zy);
w.detachEvent('onresize',zy);
}else {
w.removeEventListener("scroll", zy, false);
w.removeEventListener("mousemove", zy, false);
w.removeEventListener("touchmove", zy, false);
w.removeEventListener("resize", zy, false);
}
//запускаем функцию загрузки JivoSite
if(d.readyState=='complete'){l();}else{if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}
//Устанавливаем куку по которой отличаем первый и второй хит
var cookie_date = new Date ( );
cookie_date.setTime ( cookie_date.getTime()+60*60*28*1000); //24 часа для Москвы
d.cookie = "JivoSiteLoaded=1;path=/;expires=" + cookie_date.toGMTString();
}
if (d.cookie.search ( 'JivoSiteLoaded' )<0){//проверяем, первый ли это визит на наш сайт, если да, то назначаем EventListeners на события прокрутки, изменения размера окна браузера и скроллинга на ПК и мобильных устройствах, для отложенной загрузке JivoSite.
if(w.attachEvent){// поддержка IE8
w.attachEvent('onscroll',zy);
w.attachEvent('onmousemove',zy);
w.attachEvent('ontouchmove',zy);
w.attachEvent('onresize',zy);
}else {
w.addEventListener("scroll", zy, {capture: false, passive: true});
w.addEventListener("mousemove", zy, {capture: false, passive: true});
w.addEventListener("touchmove", zy, {capture: false, passive: true});
w.addEventListener("resize", zy, {capture: false, passive: true});
}
}else {zy();}
})();< /script>
< !-- {/literal} END JIVOSITE CODE -->
На этом, надеюсь, не остановлюсь и буду писать всякие интересные решения для ускорения сайта. И самое главное: НЕ ВЕРСТАЙТЕ КРИВО! Ведь руки нужны для того, что бы делать правильные вещи, за которые не будет стыдно!
Комментарии (0)
