ページの読み込み速度を効果的に最適化する方法

15. 10. 2021

1 min čtení

旅行先でインターネット接続の悪い環境に遭遇することが多く、Webデザイナーとして、接続が悪い状態でもWebのスピードを解決するための設計原理を考えさせられます。

実践から得た便利なワザをいくつか紹介します。

重要なランディングページはシンプルであることが多く、カスタムCSSのスタイリングを使用することが得策

例えば、CMSへのログイン画面は非常にシンプルであることが多いです。シンプルなフォームで、BootstrapなどのCSS/JSフレームワークを全部ダウンロードする必要が本当にあるのでしょうか？重要なページは最適化し、ネイティブコードを書く価値があります。

ページが完全にレンダリングされると、ユーザーが情報を入力する数秒の間、バックグラウンドでブラウザに残りのスタイルをダウンロードし、キャッシュすることができます。ユーザーがログインする頃には、おそらくすでにBootstrapがダウンロードされていることでしょう（Edgeを使っている場合は、ダウンロードされていないでしょう...)。

アイコンの代わりに、絵文字を使うこともよくあります

本当に！？絵文字には、実用上のメリットがたくさんあります。

4バイトしか使わないので、どんな画像にも勝ります。
ダウンロードに失敗することはなく、ユーザーは常に空白のスペースではなく、少なくともアイコンを見ることができます。
ユーザーのビジュアルスタイルで表示する
現在、すでに幅広いデバイスをサポートしている
サーバーのリクエストを節約し、画像をどこから取得するか対処する必要がない（これはCDNを介して最適化することができますが、なぜ、右）。
おそらく扱いたくないアイコンがたくさんあります。例えば、管理画面に表示したいすべての国の国旗アイコンをどこで手に入れればいいのか。使用絵文字： https://github.com/bara.../country/blob/main/flag-emoji.json

サイト読み込み時にHTML内で直接重要なスタイルを使用する

ページレイアウトや基本レイアウトを定義する重要なCSSスタイルを直接HTMLに入れることもあります。 1KBという制限を設けて、なるべく多く入るようにしています。この方法の欠点は、スタイルが各リクエストで転送されなければならず、キャッシュできないことです。

私はロードスピードの専門家ではないので、Martin Michalekの方がよくわかると思います。

ajaxを使え!

重要でないコンテンツや遅いコンテンツは必ずajaxで取得するようにしています。アプリケーションの技術的要件が少し増えますが、その分余裕があります。

ajaxを使うのに適した場所の例として、管理画面のほぼ全てが挙げられます。検索したいデータがたくさんあっても、ユーザーがすべてに興味を持っているわけではないことが非常に多いのです。ユーザーがダウンロードした薄いjavascriptクライアントだけを持ち、すべてのデータをVueとjsonで取得する場合、最小限のデータしかダウンロードされることはなく、応答は瞬時に行われるのです。

Vueでこれを行う方法：https://vue.baraja.cz/api-a-ajax-ve-vue-js

バックエンドでは、ネットー用のライブラリ（https://github.com/baraja-core/structured-api）を使っています。

適切なCDNを使用する

静的コンテンツの配信には、あらゆるタイプのサイトでCDNを利用することをお勧めします。CDNの設定方法がわからない場合は、せめてプロキシモードでCloudflareを使用してください。HTTPヘッダーに基づき、静的コンテンツを自動的に自分自身にキャッシュする。すべてのホスティングプロバイダーがPopsをうまく設定しているわけではなく、長い経路の場合、これは各リクエストで数百ミリ秒を節約することができます。

適した画像フォーマット

最近、ある後輩がサイトのメインページに写真を含むPNG画像を載せて、3MBを消費していました。彼の回線ではページの読み込みが早かったので（自宅の光回線ではそうなんですよね...）、それに最近は動画などのデータ転送が多いから大丈夫だと言っていました。

この点については、私は古い考えで、できることは最適化するようにしています。

写真はJPGか、より良いWEBPに。しかし、画像をJPGに保存しても何の意味もありません。最適化サービスを通す必要があります。https://tinyjpg.com

Gitに画像がある場合、このツールは自動的に画像を圧縮し、プルリクエストを送信することができます。https://imgbot.net。新しい画像が追加されると、再度PRを送信する。

何千もの画像（サイト上の製品ギャラリー全体など）を圧縮する必要がある場合、私はMac用のデスクトップアプリケーションを使用しています： https://imageoptim.com/mac

画像を適切に圧縮することで、通常、最も多くのデータを保存することができます。時には50％も。