🤶🏼 🛌🏼 🛩️ netlify.comでのレイアウトシフトの冷酷な処分 👩🏿‍🤝‍👩🏼 🔨 👨🏽‍🎓

こんにちは。これは、2020年11月25日に著者ZachLeathermanによって公開された記事「Netlify.comでの無慈悲なレイアウトシフトの排除」の翻訳です 。

NetlifyのWebサイトには、Netlifyの世界で起こっている新しくて興味深い出来事へのトラフィックを促進するために、上部に表示される小さなバナーがあります。

このバナーには2つの部分があります。

HTML, : .
( )

, :

. ⚠️⚠️⚠️ . JavaScript JavaScript .
JavaScript localStorage

, , . - URL- , , . - .
, . , 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 .

また、に再表示スクリプトを挿入したため<head>

、ユーザーがバナーを非表示にして新しいページに移動すると、最初のレンダリングの前にバナーも非表示になります。

このような小さな変更にはかなり適しています！

次の目標は、Webフォントの表示を改善することです。

netlify.comでのレイアウトシフトの冷酷な処分

HTML CSS

JavaScript

More articles: