Битрикс-разработчик Вероника Малышева

PageSpeed Insights зеленая зона

PageSpeed Insights зеленая зона

Что можно сделать в битрикс сайтах, чтобы увеличить скорость загрузки до зеленой зоны.
Конечно проверить и исправить ошибки сайта (php, базы),  использование кеша, убрать неоптимальные запросы, композитный сайт настроить.

1. В настройках главного модуля проставить все галки Оптимизация CSS

2. Отложить загрузку скриптов (Google, Яндекс, Bitrix24 виджет)
<?if(!$USER->IsAdmin()):?>
      
         <!-- Yandex.Metrika counter --> 
         <script type="text/javascript" > 
            $(window).on('load',function(){
               setTimeout(function(){   
                  (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(КОД_СЧЕТЧИКА, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true });
               },2000);
            });
         </script> 
         <noscript><div><img src="https://mc.yandex.ru/watch/КОД_СЧЕТЧИКА" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter -->
         
      <!-- Global site tag (gtag.js) - Google Analytics -->
      
      <script>
           $(window).on('load',function(){
            setTimeout(function(){   
               var w = window;
               var d =  document;
               var u = 'https://www.googletagmanager.com/gtag/js?id=UA-КОД_СЧЕТЧИКА';
                 var s=d.createElement('script');s.async=true;s.src=u;
                 var h=d.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);                
            },1500);
         });
      </script>   
      <script>
                  window.dataLayer = window.dataLayer || [];
                  function gtag(){dataLayer.push(arguments);}
         $(window).on('load',function(){
            setTimeout(function(){   
             
              gtag('js', new Date());
              gtag('config', 'UA-КОД_СЧЕТЧИКА');

             },2000);
         });
      </script>
      <script>
           $(window).on('load',function(){
            setTimeout(function(){   
               var w = window;
               var d =  document;
               var u = 'https://cdn.bitrix24.ru/b12482366/crm/site_button/loader_1_i4gs5f.js';
                 var s=d.createElement('script');s.async=true;s.src=u+'?'+(Date.now()/60000|0);
                 var h=d.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);                
            },2000);
         });
      </script>       
   <? endif;?>


3. Отложить загрузку карты
<?if(CSite::InDir("/contacts/")):?>
   <div id="Ymap"></div>   
    <script>
           $(window).on('load',function(){
            setTimeout(function(){   
               var w = window;
               var d =  document;
               var u = "https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A24aa835b98524d94399753255888480ee2960262dc0407b67e15d2ec0fd87a9d&width=100%25&height=400&lang=ru_RU&scroll=true";
                 var s=d.createElement('script');
                 s.async=true;
                 s.src=u;
                 s.type="text/javascript";
                 s.charset="utf-8";
                 d.getElementById('Ymap').appendChild(s);
                                 
            },2000);
         });
      </script>   

 <?endif;?>


4. Отложить загрузку виджета флампа, для мобильных вообще не выводить его
<div class="widget-cell" id="flamp-widget-cell" style="display:none;">
       <a class="flamp-widget" href="//krasnoyarsk.flamp.ru/firm/ХХХХХХ" data-flamp-widget-type="responsive-new" data-flamp-widget-id="985690699624139" data-flamp-widget-width="100%" data-flamp-widget-count="2">Отзывы о нас на Флампе</a>
         <script>
            $(window).on('load',function(){               
               if(document.documentElement.clientWidth >1000){
                     setTimeout(function(){          
                        var d = document;
                        var s = "script";          
                         var js,fjs=d.getElementsByTagName(s)[0];
                         js=d.createElement(s);
                         js.async=1;js.src="//widget.flamp.ru/loader.js";
                         fjs.parentNode.insertBefore(js,fjs);
                         $('#flamp-widget-cell').show();
                     },200);            
                 }      
               
            });
              
          </script>
   </div>

5. картинки lazy (микроразметка берет данные из атрибута img content)
<img src="placeholder.png" content="realimg.png" class="lazyImg" alt="altImg" title="titleImg">
if($('.lazyImg').length>0){
   setTimeout(function(){   
      $('.lazyImg').each(function(i,el){
         var src = $(el).attr("content");
         if(typeof(src) != undefined){
            $(el).attr('src',src);
         }

      });
   },1500);
}



6. отложить загрузку скрипта с иницилизацией
$(window).on('load',function(){
   setTimeout(function(){
   var w = window;
        var d =  document;      
        // добавляем скрипт
        var s=d.createElement('script');
        s.src='<?=SITE_TEMPLATE_PATH?>/js/jquery-ui.js';
        s.onload =function(){ 
            //иницилизируем после загрузки скрипта        
         var arParamsAutocomplete = <?=CUtil::PhpToJSObject($arJsParamsAutocomplete)?>;      
         for (var i = 0; i < arParamsAutocomplete.length; i++) {
            arAutocompl = arParamsAutocomplete[i];
            $( "#"+arAutocompl.id ).autocomplete({
               source: arAutocompl.source,
               select:function(event, ui) {
                  if((ui.item != null) && (typeof ui.item != undefined)){
                     if(ui.item.id != ""){
                        $("input[name='"+arAutocompl.inputName+"']").attr("checked","");
                        $('#'+ui.item.id).attr("checked","checked");               
                        smartFilter.selectDropDownItem($("label[for='"+ui.item.id+"']")[0], ui.item.id);
                     }
                  }                                             
               },
               change: function(event, ui) {                           
                  
                  if((ui.item != null) && (typeof ui.item != undefined)){
                     
                  }
                  else{
                     $("input[name='"+arAutocompl.inputName+"']").attr("checked","");         
                     $("#"+arAutocompl.all_values_input).attr("checked","checked");
                     smartFilter.selectDropDownItem($("label[for='"+arAutocompl.all_values_input+"']")[0], arAutocompl.all_values_input);                                       
                  }
               }

            });

         }
      };

        // добавляем стили
      var h=d.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h); 
        var l=d.createElement('link');
        l.type="text/css"; l.rel="stylesheet";l.href='<?=SITE_TEMPLATE_PATH?>/css/jqueryui.custom.css';
        h=d.getElementsByTagName('head')[0];h.appendChild(l);
   },2000); 
});



Убрать лишние стили и скрипты  в шаблонах. Или хотя бы отложить их загрузку.