Sorry, this entry is only available in RU.

??????????? ?????? “??????????? ? ????????? ???????? ???????? ?????? ????? codan.com.ua (Opencart)”.

??????????? ?????

?????????, ??? ???, ??? ?????? ??????????? ???????… ?

???? ????????, ??? ?????? ?? ????????? ???????? ????? ????? ???? ??? ??????????? ? ?????? 2018 ????.

?? VPS-?????? ???? ??? ?????????? ? ???????? ????????? ?????? ?? Google – mod_pagespeed. ?????, ?? ???? ????? ?? ????????? ????????, ?? ???????? ?????????? ????????? ???????? ???????? ??????? ???? ? 2, ? ?? ???? ???????????. ?????? ???? ??? ?? ????????, ?????????? ???????????? ???????? ???????? ??????? ?????? ?? ????????? ???????????, ? ??? ??????? ?????????? ?????? ?? ???????… ???????? ???????????? ???????, ?????? ????????, ???????? JavaScript-?????????, CSS ?????…

?????? ?????? ? ???????????? ?????-??????? Google Page Speed Insights.

????? ??????? – ??? ????????? ?????? ?? ???? ?????????? ??????? ??????????? ? ????????, ?? ????????????, ?? ???????? ??? ????????? ??????????.

?? ???????? ??????, ? ?????????? Chrome ?????????? ??????????? ?????? ??????????? ??? ?????? ???????? ??? ????????? ?????????? – 360 ??:

? ?????? ???? Opencart ??????????? ??????? ???????? ???????????? ? ?????????? ????:

?????? ? ?????????? ? ???? ? ????????-??????? ????? ? ?????? ???????? ??????????? ?????? = 400 ? 400

?????? ? ?????????? ? ???? ? ????????-??????? ????? ? ?????? ?????????????? ??????????? ?????? = 80 ? 80

?????? ? ?????????? ? ???? ? ????????-??????? ????? ? ?????? ??????????? ??????????? ???????= 130 ? 130

????????? ????????, ???? ?? ???????????? ??????? ???????? ??? ???????????, ????? ?????????? ??????? ? ???????????? ??????\??????????? ??????? mod_pagespeed ? .webp ?????? ? ??????????? ? ???????? ????????????.

??? ????, ????? ??? ????????? ????????????? ??????????? ????? ??????????? ?????? ???????? ?????????? Lazy Load – ? ???? ?????? ??????????? ?????? ??????? ?? ?????? ?????? ??????????? ?????.

? ?????? ??????? ??? ???? ????????? ??????? ????????????  ?????????? slick.js

??? ?????????? ?????????? Lazy Load ??? slick.js ?????????? ????????? ?????????:

$('.product-full').slick({   //???????? ??????? ??????????? ??????
    lazyLoad: 'ondemand',
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: '.product-full3'
  });

??????????? ????????? ??? ????????????? ???? ????????? ????????? ? ?????????.

??? ?????? ??????????? ?????? ? ?????? ???????? ?????? ?????????? ??????? data-lazy:

<img data-lazy="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" />

?????????? ??????? ??????????? ??????? ?? ???? ????????? ????????? ? ????????? «????? ????????????? ??????» ? «????????????? ??????».

?????????? ?????????? Lazy Load ????????? ?? ?????? ??????? ????? ??????? ??????, ? ? ????????? ?????????? ????????? ???????? ? ???????, ??? ? ???? ??????? ????????? TTFB ????????.

CSS

????????? ?????? ????? ??????????? ???????? ?????? CSS.

???????? ???????? ???? ?????? style.css ??????????? ????? ???????, ??????? ? ??????? ? ????????? ???? style_for_head.css  ?????? ?????, ??????????? ?? ?????? ?????? ????????? ????????. ??? ?????? ? 10 ??? ?????? ??????? ????????? style.css. ?????? ??? ? ? ????????? ? ?????? ???????.  ?????????????, ??? ????, ???-?? ?????? mod_pagespeed ?? ????????? ???? ???? ?????? ? ??????????, ? ??? ???????? ? ?????????? ??? mod_pagespeed. ?????????? ???????? ?? ?????? ????????????… ?

??? ????????? CSS ????? ????? ?????????? ??? ????? ?????, ????? ??????? ????????? ?????? ? ?????????? ???????????? ????? ??????? ?????????? ???????? ?? ????????? ????????.

??????????? ????? search_an.css, ? ?? ??????????? ? ??????,  ??????? ?? ?????? (????????????) search_an.ocmod.xml ? ?????? footer.tpl.

????????? ???????????? Google Page Speed Insights:

??? ?????????? ??????? ???? ???????? (?????? ????????? Dom), ???????? ???? ?????????? ????????? ???? ? ??????????? ??? ????? ???????? ???? ????????. ????????, ??? ?????? ????(????????? ???????) ? ?????????? 70 ???????, ? ???? ?? ?????? ????? ???????????? 3-4 Dom-???????? – ????????? ???????? 200-300 Dom-????????…
??????? ajax ??????? :

function LoadMobilMenu(){
  console.log('mobil-menu');
  var div = $(this);
  $.ajax({
    method: "POST",
    url: "/index.php?route=common/header/get_mobmenu",
    data: {},
    cache: false,
    dataType: 'json',
    success: function(json) {
        if (json['success']) {
            $('.mob-categories li:first').before(json['content']);
        }
      }
    })
  }

Php-?????????? common/header/get_mobmenu ????????? ?? ????, ????? ??? ????????????…
? ?????????? ?????????? «????????? ?????? ????????? Dom» ???????…

? ????? “?????????? ??????? ????????? Dom” ???????? ? ???????? ???????:

?? ???? ????, ??????? ?? ????? ??????? ????????, ??????? ????????? ????????? Dom ?? 1099 – 729 = 370 ?????????. ?????????????, ?? ????????? ???????? ?????????? ? ?????? html ????????, ? ??? ??? ?????…  ?

? ???, ???? ?? ???????? ? ?????????? ???? ????????:

? ?????? ???????? ?????? ??? ?????????? ?????????, ?? ???? ? 8-?? ??????? (? ????????? ??????????? ??????? ?), ?? ?? ? ????. ? ?????? ?? ??????? ?? ????????????????, ??? ?? ??????????????????, ? ?????? ????? ??? ????????? JavaScript ???, ??????? ?? ??????, ??????? ????? ????????, ????? ????? ????? ?????.

??????????? JavaScript

?? ?????? ??????? ??????, ? ????? ??????, ???????? ????????? ??? Google ???????? ??????? ??????????? ??????:

???? ??????? ????????? ????????? ??????. ??????? ??? ????? ????????? ? ??????????????????? ???? ??????? ??? ????? ??????.

??? ????? ? ???????? ??????????????? ???????? ???????? ??? ?????? rel=”preload”:

<link rel="preload" href="catalog/view/js/slick.min.js" as="script">
<link rel="preload" href="catalog/view/js/slick-init.js" as="script">

??????? ?? common.js ??? ????? ????, ?????????? ?? ????????????? – slick-init.js ??? ?????? ????????????? ???????? ??????.

? ?????? ??????????? ??????? ???? ????????? JavaScript-??? ? ?????, ???, ??? ??? ?????, ? ?????????? ????????. ? ??? ?????? JavaScript ????? ? <head> ????? ?????, ??? ????? ????? ?????????? ? Google PageSpeed.
???? ??????? ????? ??????? ? ???????? ?????? ????? ???????.
??????, ??? ????????? ??????? ??????????? JavaScript ?????? ????? ????????? ???????? ????????????????? ??????-?? ??????????? ?????, ?????? ?? ????, ?????????????? ???????? ??? ????? ????????, ? ???????? ?? ???????? ?????????? ?????? ????? ?? ???????? ??? ???????? ?? ???, ??? ????????-?? ?.

???????… ????? «??????» JavaScript-????? ???????? ? ????? ?????? ? ???????????? ?? ???? ????:

?????? ??? ?????? ? 

??????? ? ????? ??????, ??????? ??????????? ?????? ???? ? ????????????, ???? ??? ????????, ???????? ??? ? ?????? ?????. ????? ????????? ???????? ??? ???? ????? ???? ???? ? ? ???? ???????? ??? ???????????? ? ?????? ?????…
????? ??????? ????????? ???? ?????????? ????????? ?? ????????? ?? ?????? ? ??????? JavaScript ? ?? ?????????? ???????????????? ???? ??????? ?????…
??? ?????????? ???????? ??????????? ????? ???:

$(window).load(function () { //???????????? ????????? ??? ???????? ? ????????? ??? ???????? ? ?????? ?????????????? ????????.
 setTimeout(function() { 
   loadJScript("./catalog/view/js/ion.js");
   loadJScript("./catalog/view/javascript/cookiespolicy.js");
   loadJScript("./catalog/view/javascript/inputmask.min.js"); 
.........
   }, an_javascript_aside );

function loadJScript(src) {
  let script = document.createElement('script');
  script.src = src;
  document.body.append(script);
  }
});

?????????? an_javascript_aside ???????? ? ???????????????? ????? ? ?????????? ???????????? ?????? ??????_An ? ?????????? – ???????? ???????? ????????? JavaScript ?? (????).
? ?????????? ???????? ???? ???????? ????????? JavaScript:
– cookiespolicy.js
– inputmask.min.js
– magnific-popup.min.js
– ion.js
– classie.js

?????? ?? ?????? ????????? ????? ????? ????? ?? ?????? common.js ? ??????? ?? ???????? Checkout.
?????? notice_an.js ??????? ?? ?????? ? ?????, ??? ????? ???????? ?????????? ?????? Notice_An.

? ???????? ??????? ?????? ??? ????????? ????????? ?? ?????? ?? ???????? ?????? ???? JavaScript – ajax-product-page-loader.js. ???????? ?????????? ??????????? ?????? An Category Product Ajax Loader by Andrey_An (2018) ? ????? ???????? ?????? ???????? ?????? ?? ???????? ?????????.

Google Tag Manager

??? ????????? ????????? JavaScript ??????. ???? ??? ? ??????????? ??????????, ?? ??? ??? ?????, ?? ?????? ?????? Google PageSpeed, ??????-?? ?????? ???????? ????????. ?????? ?????? ???? ?? ????????? ? ?????????? ???????? ??????????? ??? ????-?? setTimeout(function() {…
??? ????? ???? ???????? ? ??????? ???? ???? ????????.

Web ??????

? ?????? ??????? ???????????? ?????? Open Sans ? Roboto, ??????? ????????? ? ???????? ??????? fonts.googleapis.com, ? ??? ?????????????? ????? ?? ??????????, ??????????… ??? ?????? ???? ??????? ? ??????????? ?? ??????. ?????, ??? ????????? ????????? ????????, ?? ???? ??????? ??? ???????? ???????? swap, ? ??????? ????????, ?? ????????? ???????? ????????? ? ???????? ???????? ??????, ?????????? ????? ? ???????? ?????, ????????? ?????????? ? ???? ?? ??????? ????? (???????? sans-serif). ??? ????? ?? ??????? ???? ?? ?????? ? Google Page Speed.

CLS (Cumulative Layout Shift)

??????? ?????????? ???????? ??????(CLS) ???????? ? ???????? ????????? ???????? ? ???????? ????????. ?? ???? ????? ??????? ??????????? ?????? ??????, ?????? ????????????? ????????? ?????? ??????? ????????? ???? ?????????? ? 0,921 ?? 0,068, ?.?. ? 13.5 ???.

??????????? ?????? JavaScript ? CSS

????? ????, ??? ??? ?????????? ????????? ???-?? ?????? ? ??????, ???????? \ ???????????? ????? ????????, JavaScript , CSS… , ?? ???????? ????? ????? ?? ??????????????, ? ??? ??????? ??????????? ? ????? ????????? ?? ?????? mod_pagespeed. ?????? ??? ????? ??? ??????? ?????? ??? ?????????? mod_pagespeed ??????????? ???????????? ????????? ????? .htaccess. ???? ?????? ??? ??????? ?????, ??? ??? ????????? ?????? mod_pagespeed, ?? ????? ??? ???? ??????? ????????:

?????? ?? ? ????? ???????? ???? ??? ????????? ?????????????? ?????????:

???????????????? ?????? ????????? ????????? ????????? ??????? mod_pagespeed ?? ?????-?????? ?????:
– ????????\????????? ?????? mod_pagespeed;
– ???????? cash ?????? mod_pagespeed;
– ????? ?????????? GTM ????? ????????? ??? ???????? ??? ??????????? ?? ???????;
– ????????\????????? cash ????????;
– ?????????? JavaScript-?????;
– min???????????(???????) JavaScript-?????;
– ???????? ??????????? ?? ??????? ????????? JavaScript-??????;
– ?????????? CSS;
– min-???????????(???????) CSS;
– ?????????????? jpeg, png ? webp;
– ????????\????????? ??????? ???????? ??????????? (lazyload_images);
– ?? ???????????? ?????(?????? ?????? ????? ; )

??????

??? ??????? ?????? ???????, ???? ?????????? ????????? ????? ????:
– ? ????? .htaccess ???? Header set Cache-Control “max-age=2592003” – 30 ????
?????? 33696039 30 ???? * 13 = 1 ??? + ? ??? ??????? ???? woff2. ????? ???? ????????;

– ? ????? .htaccess ???? ?????????? ????? 200 ????? 301-??????????, ??? ??????? ??? ? ???????, ??????????????? ??? ????? ?? ????????. ????? ? ???????, ??? ????????? ??? ??? ???? ???????? ????? 2 ???? ????? – 17.10.18., ? ?????? ?????? ? ???????,? ?? ????? ????? ?? ?????? ???????? (????? ???????? ??? ????) ????????? ??? ??? ???????… ???????? ??? ????? ?? ???????? ???? ??????????. ??? ?? ?????????? ??? ??????? ???????;
– ??? ??????????? ?????????? ???????? ???????? ????????? ???????? HTTP/2, ??????? ??? ???????????? ??? ???????? ? ??????? ????????? ?????? ???????? ????? ??????? ????? ????????? ? ????????. ??? ?????? ??? ?????? ????? 4 ???? ????? ? ?????: Ubuntu 16 ? ???????? ??????? , Apache 2.4.18 ? ???????? ??????????, PHP Version 7.0… ??????? ??? ?????? ?????????? ?? ??????????? ???? ????????. ??? ????????? ????????? HTTP/2 ????????? ????????? Apache ? ?????? 2.4.24. ??????? ? ?????????? ?? ????????? ?? ????? ?????? ? Ubuntu 20 ? ????? ?????? ?????????? ??????????. ?? ??? ??? ?????? ???????…
?????? ???? ?????? 25.07.2020 ? ????????? 17.08.2020.