Clever Geek Handbook

Pembuangan Layout Shift yang kejam di netlify.com

Salam pembuka. Untuk perhatian Anda, saya persembahkan terjemahan dari artikel  "Ruthlessly Eliminating Layout Shift On Netlify.com" yang diterbitkan pada 25 November 2020 oleh penulis Zach Leatherman.





Di situs Netlify, kami memiliki spanduk kecil yang muncul di bagian atas untuk mengarahkan lalu lintas ke hal-hal baru dan menarik yang terjadi di dunia Netlify.





Spanduk ini memiliki dua bagian:





  1. HTML, : .





  2. ( )





, :





  1. . ⚠️⚠️⚠️ . JavaScript JavaScript .





  2. JavaScript localStorage



    , , . - URL- , , . - .





  3. , . , HTML ().





2 3 . 1 2 ~600 .





(, ) JavaScript 2 3 <body>



, :





? . . JavaScript , .





1, . JavaScript JavaScript .





JavaScript- : , , - .





Update: GitHub .





HTML  CSS

opacity



, , JavaScript.





.banner--hide announcement-banner,
announcement-banner[hidden] {
  display: none;
}
[data-banner-close] {
  opacity: 0;
  pointer-events: none;
}
.banner--show-close [data-banner-close] {
  opacity: 1;
  pointer-events: auto;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    
<announcement-banner>
  <a href="https://www.netlify.com/sustainability/">Read about our Sustainability</a>
  <button type="button" data-banner-close>Close</button>
</announcement-banner>

JavaScript

banner-helper.js



,  <head>



: 





//  CTA ,     JSON 
let ctaUrl = "https://www.netlify.com/sustainability/";
let savedCtaUrl = localStorage.getItem("banner--cta-url");

if(savedCtaUrl === ctaUrl) {
  document.documentElement.classList.add("banner--hide");
}

banner.js



, ( - ):





class Banner extends HTMLElement {
  connectedCallback() {
    //   ,   ,    , 
    //       -     
    //      .
    this.classList.add("banner--show-close");

    let button = this.getButton();
    if(button) {
      button.addEventListener("click", () => {
        this.savePreference();
        this.close();
      });
    }
  }

  getButton() {
    return this.querySelector("[data-banner-close]");
  }

  savePreference() {
    let cta = this.querySelector("a[href]");
    if(cta) {
      let ctaUrl = cta.getAttribute("href");
      localStorage.setItem("banner--cta-url", ctaUrl);
    }
  }

  close() {
    this.setAttribute("hidden", true);
  }
}

window.customElements.define("announcement-banner", Banner);

, -, .





, ! , JavaScript .





, Layout Shift .





Dan karena kami menyisipkan skrip tampilan ulang <head>



saat pengguna menyembunyikan spanduk dan menavigasi ke halaman baru, spanduk juga akan disembunyikan sebelum perenderan pertama.





Cukup bagus untuk perubahan kecil seperti itu!





Tujuan selanjutnya adalah meningkatkan tampilan font web.







More articles:


All Articles