ウェブ

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

webサイトを速く表示する方法

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

WEBページの高速化は、ユーザーエクスペリエンスを向上させるために非常に重要な要素の1つです。以下は、WEBページ高速化に関するいくつかのポイントです。

画像の最適化画像はWEBページの表示速度に大きく影響します。画像は、ファイルサイズが大きくなる場合があるため、ファイルサイズを小さくするために最適化する必要があります。これには、適切な形式(JPEG、PNGなど)を選択する、ファイルサイズを削減するために圧縮する、画像のサイズを縮小するなどの方法があります。
CSSとJavaScriptの最適化CSSやJavaScriptなどの外部スクリプトは、ページ読み込み時間を大幅に遅くする可能性があります。それらを最適化するには、ファイルのサイズを削減するために圧縮する、不要なコードを削除するなどの方法があります。
CDNの利用CDN(コンテンツデリバリーネットワーク)を使用すると、ページの読み込み時間を大幅に短縮することができます。CDNは、ページの画像やスクリプトなどの静的なコンテンツを、世界中のサーバーにキャッシュすることで、ユーザーが近い場所のサーバーから素早く読み込むことができるようにします。
キャッシュの有効化キャッシュを有効にすると、ユーザーがWEBページを再度訪問する場合に、ブラウザがコンテンツを再度ダウンロードする必要がなくなります。これにより、ページの読み込み時間が大幅に短縮されます。
サーバーの最適化適切に構成されたサーバーは、ページの読み込み速度を大幅に向上させることができます。これには、キャッシュやコンテンツ圧縮などの設定が含まれます。
レスポンシブデザインの実装レスポンシブデザインは、WEBページをモバイルデバイスに適応させるために使用されます。レスポンシブデザインを実装することで、ユーザーはページをより速く読み込むことができます。
WEBページ高速化

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

  1. URLの入力またはリンククリック

    ユーザーがWebページにアクセスするために、ブラウザにURLを入力するか、あるいはリンクをクリックします。

  2. DNSの解決

    入力されたURLをもとに、ブラウザはWebサーバーのIPアドレスを取得するためにDNS(Domain Name System)に問い合わせます。

  3. HTTPリクエスト

    ブラウザはWebサーバーに対してHTTPリクエストを送信します。リクエストは、ページのHTMLファイルを含む他のすべてのリソース(CSS、JavaScript、画像など)を取得することを要求します。

  4. サーバー側処理

    Webサーバーは、リクエストに応じてHTMLファイルや他のリソースを返します。HTMLファイルは、ブラウザによって解釈されてページのレイアウトが生成されます。

  5. レンダリング

    ブラウザは、HTMLファイルを解析して、ページのレイアウトを決定します。CSSやJavaScriptを含む他のリソースも読み込まれ、ページが完全に表示されます。

  6. ページの完全な読み込み

    ページのレンダリングが完了する前に、すべてのリソースが読み込まれている必要があります。画像などの大きなファイルは、読み込みに時間がかかるため、完全に読み込まれるまでページが完全に表示されない場合があります。

  7. ブラウザ側処理

    ページが表示された後、ブラウザはJavaScriptやその他のクライアント側スクリプトを実行して、さらに機能を追加します。

以上が、Webページが表示されるまでの一般的な流れです。

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

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

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

速度確認サイト

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

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

PageSpeed Insights

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

PageSpeed Insights
PageSpeed Insights

PageSpeed Insightsは、Googleが提供する無料のウェブサイトパフォーマンス分析ツールで、このツールを使用すると、ウェブページの読み込み時間を短縮し、ユーザーエクスペリエンスを向上させるために改善すべき点を識別することができます。

PageSpeed Insightsは、Web Vitalsと呼ばれる重要なメトリックスを提供しており、読み込み時間、インタラクティブ性、ビジュアル安定性などが含まれます。これらの指標に基づいて、PageSpeed Insightsは、ウェブページのパフォーマンスを評価し、ユーザーエクスペリエンスを向上させるための改善提案を提供してくれます。

また、PageSpeed Insightsは、デスクトップ版とモバイル版の両方の評価を提供するため、モバイルフレンドリー性に焦点を当てたウェブサイトの最適化に。

PageSpeed Insightsは、開発者ウェブマスタービジネスオーナーなど、ウェブサイトのパフォーマンス改善に非常に有用なツールです。

GTmetrix Website

https://gtmetrix.com/

GTmetrix Website
GTmetrix Website

GTmetrix Websiteは、ウェブサイトのパフォーマンスを評価し、改善するためのオンラインツールです。このツールは、ウェブサイトの読み込み速度やページサイズ、リクエスト数、キャッシュの有効期限、画像の最適化JavaScriptの最適化などの詳細な分析を提供します。

GTmetrixは、Google PageSpeed Insightsと同様に、Web Vitalsと呼ばれる基準を使用してウェブサイトのパフォーマンスを評価。

GTmetrixは、ウェブサイトの速度を改善するための具体的な提案を提供します。これには、画像の最適化、JavaScriptの最適化、CSSの最適化、キャッシュの設定などが含まれます。さらに、GTmetrixは、ウェブサイトの改善に向けた進捗状況を追跡し、分析結果を比較して、改善の効果を測定するための機能を提供しています。

mobile site speed

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

mobile site speed
mobile site speed

Mobile Site Speedは、Googleが提供するモバイルウェブサイトのパフォーマンス分析ツールです。このツールを使用すると、モバイルデバイスでのウェブページの読み込み時間を短縮し、ユーザーエクスペリエンスを向上させるために改善すべき点を識別することができます。

Mobile Site Speedは、Web Vitalsと呼ばれる重要なメトリックスを提供します。これには、読み込み時間、インタラクティブ性、ビジュアル安定性などが含まれ、これらの指標に基づいて、Mobile Site Speedは、ウェブページのパフォーマンスを評価し、ユーザーエクスペリエンスを向上させるための改善提案を提供。

特に、モバイルデバイスを使用しているユーザーにとって、ウェブページの読み込み時間が重要な要素となっている現代において、このツールはますます重要性を増しています。

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

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

パフォーマンス数値
パフォーマンス数値
改善できる項目
改善できる項目

パフォーマンス結果

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

携帯電話
携帯電話
デスクトップ
デスクトップ

PageSpeed Insightsの結果

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

携帯電話
携帯電話
デスクトップ
デスクトップ

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

GTmetrix Websiteの結果

GTmetrix Website計測結果
GTmetrix Website計測結果

速度改善方法

プラグイン導入

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

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

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

EWWW Image Optimizer

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

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

EWWW Image Optimizer設定
EWWW Image Optimizer設定
EWWW Image Optimizer設定

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

Autoptimize

Autoptimizeは、WordPressのプラグインで、ウェブサイトのパフォーマンスを改善するために使用されます。このプラグインは、CSS、JavaScript、HTMLの最適化や結合、ファイルの圧縮、ブラウザキャッシュの最適化などの機能があります。

具体的には、Autoptimizeは、CSS、JavaScript、HTMLを圧縮し、ウェブページの読み込み速度を向上。また、このプラグインは、CSS、JavaScriptファイルを結合することができ、これにより、ファイルの数が減少しウェブページの読み込み速度が向上します。

Autoptimizeは、ブラウザキャッシュの設定を最適化する可能で、ウェブページの読み込み速度が向上し、サーバーの負荷を軽減することができます。

Autoptimize
Autoptimize

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

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

Autoptimize【JS・CSS・HTML】

Autoptimize【JS・CSS・HTML】
Autoptimize【JS・CSS・HTML】
Autoptimize【JS・CSS・HTML】
Autoptimize【JS・CSS・HTML】
Autoptimize【JS・CSS・HTML】

Autoptimize設定【画像】

Autoptimize設定【画像】
Autoptimize設定【画像】

Autoptimize設定【追加】

Autoptimize設定【追加】
Autoptimize設定【追加】

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

フォント(JINテーマのみ対応)

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

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

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

NotoSansJapanese
NotoSansJapanese

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

NotoSansJapaneseコメントアウト
NotoSansJapaneseコメントアウト

早速コメントアウト。

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

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

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

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

デフォルト
デフォルト
角ゴシックフォント(Noto Sans)
角ゴシックフォント(Noto Sans)

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

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

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

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

テキストファイルの圧縮

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

Minify(ミニファイ)

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

ファイルを圧縮し、ファイルサイズを小さくします。これにより、ウェブページの読み込み速度が向上し、ユーザーエクスペリエンスが改善されます。

具体的には、CSS、JavaScript、HTMLなどのファイルから、不要なスペースやコメント、改行などを削除して、ファイルサイズを小さくしまた、CSS、JavaScriptファイルを結合することで、ウェブページの読み込み速度を向上させます。

ただし、Minifyを適用する場合には、ファイルの圧縮や結合によって、ウェブページの表示に必要なCSS、JavaScriptなどのファイルが正常に読み込めなくなる場合があるため、注意が必要です。適用する際には、事前にテストを行うことが重要です。

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

Minify your CSS

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

Minify CSS
Minify CSS

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

・コード変換(圧縮前)

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ファイルをダウンロード
たCSSファイルをダウンロード

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

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

まとめ

Webサイトの速度が速いと以下のような利点があります。

ユーザーエクスペリエンスの向上Webサイトの速度が速いと、ユーザーが待たされる時間が短くなります。ユーザーはよりスムーズなページ遷移や、素早いコンテンツの読み込みを期待するため、Webサイトの速度が速ければユーザーエクスペリエンスが向上します。
SEOの向上GoogleはWebサイトの速度を検索順位に反映するアルゴリズムを採用しています。Webサイトが速ければ、検索エンジンのランキングが上昇し、SEOに大きな影響を与えます。
コンバージョン率の向上Webサイトが速い場合、ユーザーはページの読み込みを待つことなく、すばやく目的のページにアクセスできます。このため、ページ滞在時間が短くなり、コンバージョン率が向上する可能性があります。
モバイルフレンドリー性の向上モバイルデバイスでのWeb閲覧が増えている現在、Webサイトの速度は特に重要です。モバイルデバイスの速度はデスクトップコンピュータに比べて遅いため、Webサイトの速度が速ければ、モバイルフレンドリー性が向上します。
ユーザー参加度の向上Webサイトの速度が速ければ、ユーザーはより多くのページを訪問し、より多くのコンテンツを閲覧することができます。ユーザーがWebサイトに参加し続けるためには、Webサイトの速度が重要です。
速度の利点

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

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


上にスクロール 下にスクロール