どうやって私たちの着陸ページの灯台スコア

我々は最近、私たちの灯台スコアの地獄を最適化し、我々の着陸ページのいずれかのクールな96と上記のスコアに低い70年代のスコアから行った.以下は、Googleの検索コンソールに迅速なランチブレークピークとして始まったものを説明-多分いくつかのそれはあなた自身のページを最適化に役立つ!

ページのパフォーマンス

あなたのページのパフォーマンスを測定する最も一般的なツールの一つはGoogle Lighthouse . 灯台の利点は、基本的にすべての公共のサイトに対してそれを実行することができます.簡単に他人がやっている方法を測定することができますし、自分自身を比較します.
飛び込みましょう

ヒューストン、我々は問題がある!いくつかの問題が非常に明白になった.

いくつかのキー要求は、少なくとも550 msのページレンダリングをブロックしています.

ネットワークのペイロードはかなり大きく、ほとんどの画像、CSS、およびJSの2.5 MB以上である.

私たちはPNGSとしてイメージを届けていて、次のgen形式を使用することから利益を得るかもしれません.

プリロードフォントとスワップスワップを許可する

我々は着陸ページに4つのフォントを使用して、ロードをロードするので、フォント処理を改善しなければならないとわかりました.
まず、HTMLの先頭にpreload文を追加することで、フォントをプリロードするようにしました.

<link rel="preload" href="/fonts/fakt/FaktSoftPro-Normal.woff" as="font" as="font" type="font/woff2" crossorigin/>
<link rel="preload" href="/fonts/fakt/FaktSoftPro-Blond.woff" as="font" as="font" type="font/woff2" crossorigin/>
<link rel="preload" href="/fonts/fakt/FaktSoftPro-Medium.woff" as="font" as="font" type="font/woff2" crossorigin/>
<link rel="preload" href="/fonts/ionicons.ttf?v=2.0.1" as="font" as="font" type="font/ttf" crossorigin/>

フォントをpreloadする場合は' crossorigin 'を含める必要があることに注意してください.

Note: the crossorigin attribute indicates whether the resource should be fetched with a CORS request as the font may come from a different domain. Without this attribute, the preloaded font is ignored by the browser.

詳しく見るhttps://web.dev/codelab-preload-web-fonts/
第二に、我々はfont-display: swap; 我々のSCSSファイルのフォント顔定義に.これにより、ブラウザがフォールバックフォントを使用し、カスタムフォントが読み込まれる前にテキストを表示できます.その後、フォントがスワップされる.本質的に、これは速いレンダリングを可能にし、フォントのダウンロードによってブロックされない.

@font-face {
  font-family: 'fakt-soft';
  src: url("../fonts/fakt/FaktSoftPro-Normal.eot") format('embedded-opentype'),
  url("../fonts/fakt/FaktSoftPro-Normal.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

イメージ圧縮

もう一つの重要なボトルネックは、我々が我々のページで使っているイメージの全くのサイズです.
幸運にも、我々は品質を失うことなく我々のイメージを最適化すると約束したきちんとした小さいツールを見つけました:Imgbot . あまりにも良いことは本当ですか?いいえ、それは働いた!Imgbotは、ロスレス符号化を適用することによって、わずかに50 %以上によって、28 %といくつかの最も中古の写真によって我々のファイルサイズを減らしました.下記参照

Webpと画像タグへのイメージ

次のステップは、次世代画像フォーマットの一つとしてWebPを実装することでした.あなたは簡単にMac端末を介してWebP画像を生成することができます.私はHomebrew経由でwebpをインストールしました.

brew install webp

その後、すべての既存のPNGイメージをWebpに変えるために、このコマンドをforループで使用しました.あなたは、以下のコマンドで' PNG 'と' jpg 'を置き換えることによって、JPGイメージで同じことをすることができます.

for i in *.png; do cwebp -q 90 $i -o "${i%.*}.webp"; done

Webpはsupported クロムや他の主要なブラウザではなく、残念ながらサファリではなく、HTMLタグは、この回避策に幸運に役立ちます:

<picture>
   <source type="image/webp" srcset="/alternative/[email protected]">
   <source type="image/png" srcset="/alternative/[email protected]">
   <img  class="alternativeto-hero-image img-fluid" src="/alternative/[email protected]" alt="checkly pingdom monitoring dashboard alternative"  />
</picture>

画像タグを知っているブラウザーは彼らのために最高のイメージを選びます、そして、他のすべてのブラウザーはタグを無視して、IMGタグで働きます.
Webpに画像を変換する別の素晴らしい37 %で我々のすでに最適化された画像サイズを減少!

画像の遅延負荷

怠惰なロードは、ユーザーが実際に彼らのブラウザーでそれを見ることができるとき、イメージがフェッチされるだけであることを意味します.これはさらに初期の読み込みをスピードアップします.
ブラウザーはよりスマートになります、そして、それで、ブラウザーレベル怠惰な荷は今年上陸しました.クロムPowerBrowserとFirefoxはそれをサポートします.WebKit(Safari)の実装は進行中です.詳しくはこちらを参照ください.Browser-level image lazy-loading for the web .
クロムPowered Browserは、すべてのデスクトップコンピュータの少なくとも77 %を走らせます.それは私たちを使用する決定に導いた<img loading=lazy> 画像の大部分.これはこのタグをサポートするブラウザによって解釈されます;他のすべてはそれを無視して、前に行動します.

<img loading="lazy" class="rounded" src="/alternative/[email protected]" alt="Alternative to Pingdom" />

CSSを最適化する

CSSファイル?はい、それは私たちがブートストラップ、SSSの多く、およびいくつかの他のフレームワークに感謝していたものです.ウェブサイト、ドキュメント、およびAPIドキュメントを持つすべての同じCSSファイルに依存してほとんど不可能に何が必要かを理解することができませんでした.
未使用のcssを削除するためのツールであるpurgecssを使用しました.展開ワークフローで実行できます.我々はGLPを構築し、当社のウェブサイトのコードを展開します.Gulp Purgecssは単にGulpfileに以下のコマンドを加えることによってあなたのパイプラインでビルドステップとしてPurgecssを統合するNPMモジュールです.

import purgecss from 'gulp-purgecss'

....

//purgecss
gulp.task('purgecss', () => {
    return gulp.src('./public/css/**/*.css')
        .pipe(purgecss({
            content: ['./public/**/*.html']
        }))
        .pipe(gulp.dest('./public/css'))
})

Purgecssは80 %以上のCSSファイルを減らすことができました.
次の論理ステップは、別の一般的な最適化を、私たちのパイプラインに別のステップを追加することによって、“minification”を適用することでした.きれいなCSSは整形式のCSSコードを取り、間隔、インデント、改行、コメントを削除します.これらの要素は、ブラウザによって必要とされず、転送する必要がある余分なストレージを使用します.

import cleanCSS from 'gulp-clean-css';

//minifycss
gulp.task('minify-css', () => {
  return gulp.src('./public/css/*.css')
    .pipe(cleanCSS({debug: true}, (details) => {
      console.log(`${details.name}: ${details.stats.originalSize}`);
      console.log(`${details.name}: ${details.stats.minifiedSize}`);
    }))
  .pipe(gulp.dest('./public/css'));
});

インターラクコム

インターコムウィジェットは別のレンダリングブロックリソースです.それは非常に軽量ではない.私たちは顧客のサポートの99 %のためのインターコムを使用し、そうし続けたい.
それは、連続的にインターホンをロードする方法があることがわかります.スクロールイベントがあるまで、インターコムウィジェットの負荷を遅らせることによって、我々はそうすることができます.JSスニペットを修正してこうやった.

var intercomLoader = function(){
        (function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',w.intercomSettings);}else{var d=document;var i=function(){i.c(arguments);};i.q=[];i.c=function(args){i.q.push(args);};w.Intercom=i;var l=function(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='your_widget_url';var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s, x);};if(document.readyState==='complete'){l();}else if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();
          window.Intercom('boot', {
            app_id: 'app_id',
            custom_launcher_selector: '.open-intercom-link'
          })

            window.removeEventListener('scroll', intercomLoader)
      }
window.addEventListener('scroll', intercomLoader)

その他の最適化

我々のサイトの力学に飛び込んだあと、我々が含むすべてのサードパーティのスニペットが我々のページパフォーマンスに否定的に影響を及ぼすかもしれないことは明らかになりました.これは、すべてのサードパーティ製のツールの評価につながった-と驚き-私たちはヒープやhotjarのようなツールを無効にすることができた、さらにパフォーマンスを向上させる.
結果

96!我々は着陸ページのパフォーマンスを改善するために8時間を投資しており、副作用としてhttps://www.checklyhq.com/ ずっと速い.より多くの改善があることは、我々に明らかです.
次の週は、上記の空スカイロケットGoogleの検索ランキングを教えてくれます.

https://web.dev/browser-level-image-lazy-loading/

https://www.npmjs.com/package/gulp-purgecss

バナーイメージ:「ルイブグ灯台」からの詳細.カナダ(2008)からのデニスJarvis.CC
この記事はもともと登場したblog.checklyhq.com