Ex-Gramエクスグラムプログラミング教室サイトのユーザーエクスペリエンスを向上しました

お知らせ

プログラミング教室サイトのコアウェブバイタル (Core Web Vitals)の改善

コアウェブバイタルとはウェブページのユーザーエクスペリエンス(UX)につながるウェブに関する重要な指標のことです。今回、当プログラミング教室のサイトの改善を行い、例えば、ページ読み込みの速度が速くなりました。

Googleによれば、3つの指標とは
LCP(Largest Contentful Paint)、FID(First Input Delay)、CLS(Cumulative Layout Shift )のことです。
それぞれ以下のような意味を持ちます。

LCP:メインコンテンツの読み込み時間
FID:Webページの応答性
CLS:視覚的な安定性

その他、以前から対応済みですが、モバイル対応とHTTPS対応も重要です。

なぜコアウェブバイタル (Core Web Vitals)の改善が必要か?改善方法は?

ウェブサイトを見ようとしたとき、数秒も待たされては見る気もなくなってしまいます。ページ読み込みの速度が速く、さくさく閲覧できれば快適でユーザー体験は向上します。
また、ある場所をクリックしようとしたとき、その瞬間にボタンの位置がずれてしまっては、意図しない間違ったボタンを押してしまう危険性もあります。視覚的な安定性が必要な理由です。

さて、LCPやFIDの改善にはウェブサーバー自体の速度が速いことが前提となります。
今回、ApacheのWebサーバーからLiteSpeedのWebサーバーに変更することにより速度向上を図りました。
さらにLiteSpeedのWebサーバーで利用できるキャッシュ機能である、「LiteSpeed Cache」WordPressプラグインを導入し、ページの読み込み時間を大幅に短縮しました。
このプラグインの導入には「wp-config.php」の属性(パーミッション)を一時的に600にする必要があります。「LiteSpeed Cache」の有効化ができたら「wp-config.php」の属性(パーミッション)を600から400に戻します。
なお、画像を変更した際には、「LiteSpeed Cache」の「ツールボックス」で「すべてをパージする-LSCache」を実行しないと、以前のキャッシュされた画像が表示されたままになるので注意が必要です。

高速化には画像のファイルサイズ低減も有効です。Webページでは非可逆圧縮のJPEGや可逆圧縮のPNGがよく用いられてきましたが、今回、Googleが開発しているオープンな静止画像フォーマットであるWebP(ウェッピー)に全て変換しました。WebPは画質をあまり落とさずにデータ容量を少なくできる次世代の画像フォーマットです。今ではほとんどのブラウザがこの画像フォーマットに対応していますので、問題なく表示することができます。
今回は、WordPressプラグインの「EWWW Image Optimizer」を導入しました。設定には「.htaccess」の一番上に所定のタグを貼り付ける必要があります。

CLS(視覚的な安定性)の向上にはhtml内の画像要素で幅と高さを明示的に設定することが重要です。こうすることで、レイアウトの移動を減らして、CLS を改善できます。

以前はコアウェブバイタルを評価できるツールであるPageSpeed Insightsでチェックすると「CLSに関する問題:0.1秒超(パソコン)」というのが出ていたのですが、改善後は出なくなりました。

また、ヘッダー画像もダーク調の背景に白い文字にして視認性を向上しました。

上記は変更前のヘッダー画像

 

上記は変更後のヘッダー画像

 

前述のPageSpeed Insightsで改善後のパフォーマンスをチェックしてみました。

以下はPageSpeed Insightsでの評価結果ですが、ほぼ満点になっていることがわかります。

 

今後について

今回、プログラミング教室サイトのLCP(メインコンテンツの読み込み時間)、FID(Webページの応答性)、CLS(視覚的な安定性)の向上を図りました。

今後も継続して、コアウェブバイタルをチェックして、ユーザーにとって快適なWebサイトを目指すとともに最も重要であるコンテンツの充実を図っていきます。