Pagespeed

0. Code trên content_for_header

15/03/2023 - Để nhớ một thời ta đã yêu - No Delete

<script type="text/javascript">
  var f1genzPS = !Boolean(typeof(navigator.userAgentData) !== "undefined" &&
  typeof(navigator.userAgentData.brands) !== "undefined" &&
  navigator.userAgentData.brands.find(b => b.brand === 'Lighthouse'))
</script>

Sử dụng code mã hóa - Code trên đọc để hiểu thôi - Để trên cùng dưới mấy thẻ Meta

<script type="text/javascript">var _0x531f=["\x75\x73\x65\x72\x41\x67\x65\x6E\x74\x44\x61\x74\x61","\x75\x6E\x64\x65\x66\x69\x6E\x65\x64","\x62\x72\x61\x6E\x64\x73","\x62\x72\x61\x6E\x64","\x4C\x69\x67\x68\x74\x68\x6F\x75\x73\x65","\x66\x69\x6E\x64"];var _0x2366=[_0x531f[0],_0x531f[1],_0x531f[2],_0x531f[3],_0x531f[4],_0x531f[5]];var _0x94e8=[_0x2366[0],_0x2366[1],_0x2366[2],_0x2366[3],_0x2366[4],_0x2366[5]];var _0x8f7d=[_0x94e8[0],_0x94e8[1],_0x94e8[2],_0x94e8[3],_0x94e8[4],_0x94e8[5]];var f1genzPS=!Boolean( typeof (navigator[_0x8f7d[0]])!== _0x8f7d[1]&&  typeof (navigator[_0x8f7d[0]][_0x8f7d[2]])!== _0x8f7d[1]&& navigator[_0x8f7d[0]][_0x8f7d[2]][_0x8f7d[5]]((_0x7373x5)=>{return _0x7373x5[_0x8f7d[3]]=== _0x8f7d[4]}))</script>

1. Code content_for_header

Replce content header

{%- capture capserverHead -%}{{ content_for_header }}{%- endcapture -%}
{%- assign syntax1 = "//<![CDATA["-%}
{%- assign syntax2 = "//]]>"-%}
{%- assign syntax1_new = "if(f1genzPS){"-%}
{%- assign syntax2_new = "}"-%}
{%- assign serverHead = capserverHead | replace: syntax1, syntax1_new | replace: syntax2, syntax2_new -%}
{%- assign shoptheme = serverHead | split: 'Haravan.theme = {"name":"' | last -%}
{%- assign shoptheme = shoptheme | split: '","id":' | first -%}
{%- capture stylenofity -%}<link href='//hstatic.net/0/0/global/notification.css' rel='stylesheet'/>{%- endcapture -%}
{%- capture jsnofity -%}<script data-value='{{ shoptheme }}' src='//hstatic.net/0/0/global/notification.js'></script>{%- endcapture -%}
{%- assign doneHead = serverHead | remove: stylenofity | remove: jsnofity -%}
{{ doneHead     }}

2. Code inline cho Tracking, Font

if (f1genzPS) {
  // Load code Tracking, Load Script quan trọng, Load font...
}

DNS-prefetch server

<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="{{shop.url}}">
<link rel="dns-prefetch" href="//hstatic.net">
<link rel="dns-prefetch" href="//theme.hstatic.net/">
<link rel="dns-prefetch" href="//product.hstatic.net/">
<link rel="dns-prefetch" href="//file.hstatic.net/">
<link rel="dns-prefetch" href="//www.google-analytics.com/">
<link rel="dns-prefetch" href="//www.googletagmanager.com/">
<link rel="dns-prefetch" href="//www.google.com">
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//www.facebook.com">
<link rel="dns-prefetch" href="//connect.facebook.net">
<link rel="dns-prefetch" href="//static.ak.facebook.com">
<link rel="dns-prefetch" href="//static.ak.fbcdn.net">
<link rel="dns-prefetch" href="//s-static.ak.facebook.com">

Cách load Image

// Preload dành cho hình ảnh LCP
<link rel="preload" href="{{ link hình }}" as="image" media="(max-width: 361px)">
<img loading="eager" fetchpriority="high" decoding="sync" width="" height="" src="" alt=""/>
// Native lazy dành cho các hình ảnh còn lại
<img loading="lazy" decoding="async" width="" height="" src="" alt=""/>

danger

• Nếu được bỏ Lazyload, xài Native lazy
• Nhập đầy đủ witdh, height, alt cho Img
• Preload duy nhất hình ảnh LCP trên từng trang

!(function (e, s, t) {
  var n = s.getElementsByTagName(t)[0],
    a = s.createElement(t);
  (a.async = !0),
    (a.src = "https://sp.zalo.me/plugins/sdk.js"),
    n.parentNode.insertBefore(a, n);
})(window, document, "script");

Load CSS Font

// Load toàn bộ Font chữ, font awesome theo cách này
var link = document.createElement("link");
link.type = "text/css";
link.rel = "preload stylesheet";
link.as = "style";
link.fetchpriority = "high";
link.href = "{{ link css }}";
link.media = "all";
document.head.appendChild(link);

cách load CSS (Trong thẻ Head)

// Load and Preload css
<link rel="preload stylesheet" as="style" fetchpriority="low" href="{{ 'blog.css' | asset_url }}">

cách load JS (Trong thẻ Head)

// Load JS trên thẻ head, chạy Defer
<script defer fetchpriority="low" src="{{ 'blog.css' | asset_url }}">

3. Xử lý Recapcha

Xử lý Liquid

{%- capture formContact -%}
{%- form 'customer' -%}
{%- endform -}
{%- endcapture -%}
{{ formContact | replace: 'script', 'noscript' | replace:'noscript src=', 'noscript data-src='}}

Xử lý JS

if (window.noPS) {
  if ($('input[name="g-recaptcha-response"]').length > 0) {
    $.getScript(
      "https://www.google.com/recaptcha/api.js?render=6LdD18MUAAAAAHqKl3Avv8W-tREL6LangePxQLM-"
    ).done(function (s, r) {
      $("head").append(s);
      $('input[name="g-recaptcha-response"]').each(function () {
        var flagId = $(this).attr("id");
        grecaptcha.ready(function () {
          grecaptcha
            .execute("6LdD18MUAAAAAHqKl3Avv8W-tREL6LangePxQLM-", {
              action: "submit",
            })
            .then(function (token) {
              document.getElementById(flagId).value = token;
            });
        });
      });
    });
  }
}

4. Xử lý Slider

tip

• Xóa class chạy Slider, giảm Dom về 1 {%- for i in (1..1) -%} và append Dom còn lại khi khởi tạo Slider

var domSlider = `For từ 2..`;
$('#home-slider .slider-owl').append(domSlider);
$('#home-slider .slider-owl').addClass('owl-carousel owl-theme').owlCarousel({
    ...
});