Оптимизация под 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)



Разрешённые теги: <b><i><br>Добавить новый комментарий:


Создание сайтов в студии go-up.info