ウェブ

【2022年版】Webサイトの表示速度を改善するプラグイン【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

PageSpeed Insights
PageSpeed Insights

GTmetrix Website

https://gtmetrix.com/

GTmetrix Website
GTmetrix Website

mobile site speed

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

mobile site speed
mobile site speed

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

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

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

パフォーマンス結果

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

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

PageSpeed Insightsの結果

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

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

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

GTmetrix Websiteの結果

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

速度改善方法

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

プラグイン導入

・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プラグインは、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」は見た目が良く使いたいですが、パフォーマンスが下がってしまうのは避けたいところです。

↓下記本は自身が読んで為になったWEB高速化の基本が身についたお勧めの本です。

Webページ高速化入門
Webページ高速化入門

▪HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門
Webサイト高速化で意図せず組み込んでしまった画像ファイルや、SNSのリンク、CSSファイルの読み込み設定など、案外見おとしがちなWeb設計にあります。Webページの読み込み高速化ノウハウを体系化し、初心者レベルから丁寧に易しく解説されています。

book
created by Rinker
¥2,838 (2022/10/04 21:08:33時点 楽天市場調べ-詳細)

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

WordPressテーマ「JIN」|Noto Sans Japaneseを軽くする方法【Webフォント】
WordPressテーマ「JIN」|Noto Sans Japaneseを軽くする方法【Webフォント】WordPressテーマ「JIN」でのフォントはNoto Sans Japaneseを使用しており、とても見た目もよく綺麗な文字表現になっています。「Noto Sans Japanese」はGoogleがAdobeと共同開発されて、あらゆる言語に対応したWebフォントですが、欠点が一つあります。「読み込みがすごい重い」サイト表示に影響があり表示速度はSEOでとても重要です。たまに「JINテーマは重いから使っていません」と見かけますが、自分はデザイン・使いやすさ・テーマのアップデートがしっかりしてるので使い続けたいと思っています。...

テキストファイルの圧縮

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

Minify(ミニファイ)

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

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

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の設計をもっと深く学びたい方はこちらの本がお勧めです。

Web制作者のためのCSS設計の教科書
Web制作者のためのCSS設計の教科書

▪Web制作者のためのCSS設計の教科書
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 Web制作者のための教科書シリーズで、コンポーネントやCSSプリプロセッサを意識した設計・管理の実践など、「ちゃんとCSSを書く」ためのプロの考え方を徹底解説されています。

book
created by Rinker
¥2,420 (2022/10/04 14:36:34時点 楽天市場調べ-詳細)

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

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

まとめ

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

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

プル

サイト速度表示の改善は他にもまだまだあるので、いろいろ試して模索していきます。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA