Webサイトの表示速度を改善するプラグイン【WEBページ高速化】

Webサイトの動きプラグイン導入やデザインを追加する際に、どうしてもサイトが重くなりパフォーマンスが悪くなってしまい、Googleの評価とユーザーの離脱率が上がってしまいます。

Webページが表示されるまでの流れは下記の順番で行われています。

1. URLを入力
2. URLを解決
3. HTML・CSS・JSをダウンロード
4. 情報を解析
5. ページを描写

Webサイトを見る環境にもよりますが、使用しているネット回線の速度が遅ければ、ダウンロードに時間がかかります。レンタルサーバーの契約している速度プランにも影響がある為、速度が遅い場合はどこに問題があるのかを特定しなければいけません。

Webサイトの表示処理を速くしたい、そういった時はページを読み込む時のコード圧縮や画像を圧縮して出来るだけページを読み込む負担を減らす必要があります。

今回は高速化プラグイン設定で速度改善した内容をまとめました。

速度確認サイト

まずは、今現在の自身のWebサイトの表示がどのくらいパフォーマンスを出せているのか確認できるサイトを3つ紹介します。

Webページの読み込みが遅いか速いかは、そのページにアクセスすれば体感できますが、ツールを使用して計測し根本的にどこを改善するべきかを明確にできます。

PageSpeed Insights

https://pagespeed.web.dev/?hl=ja

GTmetrix Website

https://gtmetrix.com/

mobile site speed

https://www.thinkwithgoogle.com/intl/ja-jp/feature/testmysite/

個人的にオススメの計測サイトはPageSpeed Insightsです。

PageSpeed InsightsはGoogleが提供しているサービスで、Webページの速度改善のアドバイスが表示されます。

パフォーマンス結果

自身のサイト速度を何もしてない状態でパフォーマンスを調べた結果「携帯電話」37「デスクトップ」63と悲惨な結果となっていました。

PageSpeed Insightsの結果

「携帯電話」62「デスクトップ」96とパフォーマンスが大分改善しました。

上記のパフォーマンスは3G回線で接続した場合の結果になる為、4Gや5G回線であればパフォーマンスはさらに上がります。

GTmetrix Websiteの結果

速度改善方法

1. プラグイン導入
2. Googleフォント
3. CSS・JSの圧縮

プラグイン導入

・EWWW Image Optimizer：画像を圧縮して表示速度を高速化

・Autoptimize：ソースコードを圧縮することで高速化

【画像・CSS＆JavaScript】「圧縮」することを目的としたプラグインです。

EWWW Image Optimizer

EWWW Image Optimizerは、アップロードした画像を自動で「圧縮」するためのプラグインで、画像を軽量化してくれます。

下の画像はチェックする項目です。

▪WenP変換
WebサイトでWebP画像を利用することによって、ファイルサイズを抑えることによりページの表示速度の高速化に繋がるのでチェックを入れて有効化しましょう。

ポイント

▪TinyPNG画像圧縮サイト　https://tinypng.com/

プラグインで画像を軽量化する方法もありますが、WordPressに画像をアップロードする前に事前に圧縮する出来るサイトがあるので、プラグインを導入しない人は下記のサイトで圧縮して画像をアップロードしましょう。

Autoptimize

Autoptimizeプラグインは、HTML・CSS・JavaScriptのコードを縮小してくれるプラグインです。

下の画像はチェックする項目です。

Autoptimize【JS・CSS・HTML】

Autoptimize設定【画像】

Autoptimize設定【追加】

Autoptimizeの設定はこれで完了です。

ポイント

・最適化をする事によって不具合が生じることがある為、適応しないjsなどは個別で指定するようにしましょう。

・Highlighting Code Blockプラグインのprism.jsを最適化してしまうと、中のコードに色がつかなくなってしまう為スクリプト除外にいれるなどです。

フォント（JINテーマのみ対応）

今回改善点が一番大きかったのが、読み込まれているフォントが重くここに重点をおきました。

グーグルフォント「NotoSansJapanese」がサイト表示の遅延になっていた為、ここの改善について自己流の改善方法を紹介します。

フォントをheader.phpかfooter.phpで読み込んでいるか確認します。

footer.phpの227行目にNotoSansJapaneseがいました。

早速コメントアウト。

「外観」→「カスタマイズ」→「サイト基本設定」フォント選択で3つの選択があります。

• デフォルト（端末の標準フォント） 
• 角ゴシックフォント（Noto Sans） 
• 角丸ゴシックフォント（Rounded M+ 1c）

あえてラジオボタンは「角ゴシックフォント（Noto sans）」を選択。

デフォルト（端末の標準フォント）を選択してしまうと英文表示が崩れてしまう為。

再度、速度確認サイトで確認してみると大幅にパフォーマンスが改善されているはずです。

グーグルフォント「NotoSansJapanese」は見た目が良く使いたいですが、パフォーマンスが下がってしまうのは避けたいところです。

Noto Sans Japaneseを軽くする方法に関して下記記事で詳しく解説していますのでWebフォントを軽くしたい方はご確認ください。

WordPressテーマ「JIN」｜Noto Sans Japaneseを軽くする方法【Webフォント】「Noto Sans Japanese」はあらゆる言語に対応したWebフォントですが、「読み込みがすごい重い」サイト表示に影響があり表示速度はSEOでとても重要です。...

テキストファイルの圧縮

テキストファイルを圧縮すると、ファイル容量を削減できます。画像の圧縮できるように、テキストファイルも容量が小さいほど速くダウンロードできるようになります。

Minify（ミニファイ）

HTML・CSS・JSファイル内にて、自身が読みやすいように改行をいれたり、コメントを残したりすることがあると思いますが、この段落など不要な記述を削除する事をMinifiy（ミニファイ）と言います。

不要な記述を削除することでファイル容量を減らすことができ、より速くダウンロードできるようになります。

Minify your CSS

■Minify CSS
https://www.toptal.com/developers/cssminifier/

シンプルな操作で圧縮を行うことができ、コードを張り付けてボタンをクリックで圧縮可能です。

・コード変換（圧縮前）

body#nts-style {
    font-family: 'Noto Sans JP', sans-serif;
}

・コード変換（圧縮後）

body#nts-style{font-family:'Noto Sans JP',sans-serif}

Download as Fileで圧縮したCSSをダウンロードできます。

CSSの文字数を減らしてサイト高速化するには他に、Sass（サス）の書き方をすることで高速化をすることも可能ですので、下記記事をご確認ください。

Sass（サス）とSCSS（エスシーエスエス）CSSをより便利に扱うことができる構文【基礎知識】-STEP1Sass（サス）はCSSを効率よく書くことができる言語記法です。 「Syntactically Awesome Style Sheet」の略で構文的に素晴らしいスタイルシート。 素晴らしいネーミングセンス。 SassにはSass記法とSCSS記法の2種類に分けられています。主に使われているのはSCSS記法。...

まとめ

Webページの表示速度が遅いとユーザーの離脱率が高くなり、改善するのはとても大切なことですが、高速化を意識しすぎて文字だけのコンテンツそのもの質が落ちてしまっては本末転倒です。

自身でできる高速化対応をしコンテンツ質向上しユーザーの満足度が高いサイト作り方が大切だと思います。