on:2019年12月17日sponsorsサイトのロード時間とパフォーマンスを改善するために再構築した結果、ロード時間が1.6秒に短縮され、Lighthouseのスコアで100を獲得した際に、実施した手順を紹介します。HTMLとCSSベースの改善が主で、ロード時の数ミリ秒間の表示、スマホ用CSSファイルの分割など、いろいろなサイトやブログの改善にも役立つと思います。当ブログにも改善すべき点があるのが分かったので、対応したいですね。Daware下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。OffScreenCanvasはじめに私の個人サイトは今までロード時間は4.2秒、パフォーマンスのスコアは43でした。このスコアを改善するため、私はサイトを再設計することにしました。その結果から報告します。ロード時間は1.6秒に短縮され、Lighthouse(Chromeの機能拡張)のスコアは100を獲得しました。サイトはバニラJavaScriptで構築し、外部スクリプトまたはスタイルシートは使用していません(Googleフォント用のものを除く)。この記事は、個人サイトのロード時間を短縮することを目的としています。※EコマースをバニラJavaScriptで構築することは素晴らしいアイデアではありません。要約サイトのパフォーマンスを改善するために、私がしたことは下記の通りです。rel="preload"を使用する。onload="this.onload=null;this.rel='stylesheet'">CSSファイルをindex.cssとmobile.cssに分割し、スマホのみmobile.cssをロードさせる。(max-width:768px)">画像の遅延読み込みCDNを使用する(私が使用したCloudinaryは、リクエスト時に画像の幅を変更できるため、レンダリングする画像と同じサイズの画像をロードできます)。OffscreenCanvasを使用する(現在はChromeでしか動作しないため、あまりお勧めはしません。OffscreenCanvasは無視して、通常のスクリプトとしてサポートされていないブラウザにロードする回避策をいくつか試しました)。リソースのプリロードブラウザはリンクをクリックすると、そのリンク先のHTMLファイルの解析を開始します。<style>タグが検出されると、ドキュメントのペイントが変更されるため解析は停止します。初期ペイントがブロックされます。リソースをプリロードすることにより、この初期ペイントをブロックすることなく、ファイルをロードできます。したがって、これらのファイルのロードは通常通りに開始されますが、ペイントはCSSやJavaScriptがロードされる前に作成されます。大きな力には大きな責任が伴います。サイトがロードされた時に、下記のようには表示されたくないでしょう。ロードされた数ミリ秒間の表示これはCSSをロードせずにペイントされているからです。最初の数ミリ秒間はこのように表示されます。これを改善する方法はあるでしょうか?私が実施した方法を紹介します。ビジターがサイトをロードした時、最初に表示したいのは背景だけで、CSSがロードされたらコンテンツをロードするようにします。--></body>こうすることで、メインコンテンツとヘッダの一部のテキストが非表示になります。index.cssには、下記を加えます。!important;}これで<style>のルールを上書きし、コンテンツを表示します。私が実際に使用したコードでは、テキストが表示される際にはアニメーションを伴うようにしました。CSSファイルの分割スマホ用のスタイルシートが多い場合は、そのコードをデスクトップ時にロードさせてもまったく意味がないので、スマホ用のCSSを分割するのは理にかなっています。スマホ用のCSSファイルを分割するのは、簡単です。<link>タグのmedia属性で、一致するデバイスでのみCSSファイルをロードするように定義します。(max-width:768px)">このコードで、mobile.cssファイルはスクリーンサイズが(max-width:768px)に一致するデバイスにのみロードされます。75でloading属性が追加され、loading="lazy"が使用できるようになりました。Chromeに実装される新機能『loading属性』について解説、ついにブラウザがネイティブで遅延ロードをサポートそれまでは、私は以下のようにしていました。Network)の略で、通常のサーバーよりも画像のレスポンスが速くなります。私が使用したCDN(Cloudinary)には便利なオプションがあり、最適化の高速化に役立ちました。画像を.webpで提供することは、画像最適化の優れた手段です。Cloudinaryでは、.webpを使用して画像URLの.pngや.jpgを変更するだけで、webp画像を自動生成してくれます。URLでパラメーターを渡すことで画像のサイズを変更することもできます。下記のような感じです。画像のURLにパラメーターを加えるhttps://res.cloudinary.com/saurabhdaware/image/upload/c_scale,w_500/v1552455020/saurabhdaware.in/projects/eotm-portfolio.webp1https://res.cloudinary.com/saurabhdaware/image/upload/c_scale,w_500/v1552455020/saurabhdaware.in/projects/eotm-portfolio.webp「w_500」は、画像の幅を500pxするということです。この値を変更するだけで、どんな幅の画像にも対応できます。JavaScriptでこの値を動的に変更して、レンダリングとまったく同じサイズの画像を読み込むこともできます。【訳者注】この記事では生成した画像をキャプチャして掲載しています。OffScreenCanvas上記とは別に、私はOffScreenCanvasを使用してWebワーカーのヘッダアニメーションをレンダリングしましたが、OffScreenCanvasは実験的な機能であるため、実動にはまだ適していないと思います。ライブラリを使用しないことで高速になったとは言いません。フレームワークを使用しないことで、どのファイルをプリロードし、いつどのファイルをロードし、どのようにバンドルするかを決めることができました。ライブラリを使用してもサイトを高速化することはできます。適切に処理する必要がありますが、ポートフォリオのような小さいサイトの場合は、サイト全体よりもファイルサイズが大きいライブラリを使用しない方が合理的だと思います。最後に、高速化した私のサイトを紹介します。https://saurabhdaware.in/要素をホバーまたはタップすると、面白い効果が得られると思います。