【WordPress高速化】PageSpeed Insightsの点数を上げた3つの方法

【Wordpress高速化】PageSpeed Insightsの点数を上げた3つの方法ブログ

【Wordpress高速化】PageSpeed Insightsの点数を上げた3つの方法

Kizuki
Kizuki

こんにちは、フリーランスのKizukiです!一般企業を経てフリーランスとして2019年に独立し、Webデザイン・プログラミング・通訳・翻訳・通訳案内士の仕事に携わってきました(Kizukiについてはプロフィールをご覧ください)今回は以下の悩みにお答えいたします。

困っている人
困っている人

WordPressブログをやっているのですが、PageSpeed Insightsの点数が低いです。どうすればいいですか?

結論、私の場合は高速化できるWordpressテーマを選択し、必要なプラグインをインストールして画像データとキャッシュを最適化することでPageSpeed Insightsの点数が上がりました(パソコンは98点・モバイルは64点)

なぜWebサイトの高速化が重要なのかというと、スマホが世界中で普及してからはモバイルユーザーの割合が多くなってきているからです。

PageSpeed Insightsを使用すると、管理しているWebサイトの表示速度をパソコン・もバル別に点数で確認できます。

モバイルユーザーも良質なWebコンテンツを楽しめるように、Webサイト運営者にとってはサイトの高速化が重要なタスクになっているのが近年の傾向です。

本記事では、Wordpressブログを高速化して、PageSpeed Insightsの点数を上げた3つの方法をご紹介いたします。

記事の信頼性
Kizuki

Sharestyle Kizuki管理人のKizukiです。国内外のシェアハウスで2年3ヵ月生活してきました(ルームシェアの経験は5か月)。大規模な研修施設での共同生活も経験しています。仕事はITと語学のフリーランスです。英検1級と通訳案内士を取得。自身の経験や見解に基づき、シェアハウス・フリーランス・英語学習の生活に関する記事を公開しています。

Kizukiをフォローする

【Wordpress高速化】PageSpeed Insightsの点数を上げた3つの方法

【Wordpress高速化】PageSpeed Insightsの点数を上げた3つの方法

私が行った具体的な方法は以下の3つです。

  1. 高速化機能があるWordpressテーマを使う(Cocoon)
  2. 画像圧縮プラグインを使用する
  3. キャッシュを最適化できるプラグインを使用する

順番に解説していきます。

高速化機能があるWordpressテーマを使う(Cocoon)

Kizuki
Kizuki

私は高速化機能がついているCocoonを利用しています。無料テーマなのに、サイト高速化など有料級の機能がついているのが使い始めた理由です。

Cocoonには下図のようなサイト高速化機能が実装されており、ブラウザキャッシュの有効化やソースコードの縮小が可能です(ダッシュボードの「Cocoon設定>高速化」より設定)

Cocoonには下図のようなサイト高速化機能が実装されており、ブラウザキャッシュの有効化やソースコードの縮小が可能です(ダッシュボードの「Cocoon設定>高速化」より設定)

キャッシュとは訪問したWebサイトの情報を一時保存する仕組みで、ユーザーが2回目以降の訪問のデータリロードに割く時間を削減できます。

HTML・CSS・JavascriptはWebサイトのフロントエンドを構成するプログラミング言語で、プログラミングのソースコードを縮小する必要があります

とくにCSSやJavascriptの転送量が多いとPageSpeed Insightsの点数も低くなるので、「HTML・CSS・Javascriptを縮小化する」のチェックマークを入れておきましょう。

高速化機能が備わっているテーマ(Cocoon)をダウンロード・インストールする方法については、下記記事で解説しています。

WordPress無料テーマCocoonのダウンロード方法を解説!

画像圧縮プラグインを使用する

画像サイズもPageSpeed Insightsの点数を左右する要因です。

Kizuki
Kizuki

たとえば私は過去の記事で200KB~300KBの画像を使う時がありましたが、サイトの読み込みにかかる時間が長くなり、効率的ではありませんでした。PageSpeed Insightsのスコアも赤点状態だったので、ベクター画像に切り替えました。

ベクター画像は100KB以下の画像容量がほとんどなのでスコアは少しずつ改善されましたが、それでも十分とは言えなかったのが実情です。

次にjpgやpng画像を50%前後でオンライン圧縮できる「tinypng.com」も利用し、画像によっては10KB前後まで容量を小さくできました。

tinypng.com」では画像を圧縮できますが、サイズ自体は小さくならないのがポイントです。

さらにWordpressへアップロードする画像を自動圧縮してくれる「EWWW Image Optimizer」というプラグインを導入し、可能な限り画像を圧縮できる工夫をしました(プラグインの詳細は下記記事で解説しています)

Web用適正画像サイズは?圧縮プラグインは?【ブログ初心者向け】

画像を徹底的に圧縮するまではPageSpeed Insightsでアラートが出ていたのですが、画像の容量を削ることで消えていきました。

キャッシュを最適化できるプラグインを使用する

キャッシュを最適化できるプラグインの「W3 Total Cache」も使用しました。

キャッシュの最適化により以下の2点が可能となり、Wordpressサイトの高速化が可能です。

  • ページを訪れたユーザーの情報が一時保存される
  • 追加のデータベース処理などが不要になる

W3 Total Cache」をインストールした後には、以下の項目別に設定を行いましょう。

  • ページ・キャッシュ
  • データベース・キャッシュ
  • オブジェクト・キャッシュ
  • ブラウザ・キャッシュ

具体的な設定方法については、バズ部の記事で詳しく解説されていますのでご参考ください。

なぜWebサイトの高速化が必要なのか?

なぜWebサイトの高速化が必要なのか?

結論、Googleが公表しているCore Web Vitalsの評価指標の中で、「Webサイトの表示速度」が重要だからです。

Google Developersの記事によれば、ユーザーエクスペリエンスの核となるニーズである「Core Web Vitals」は読み込み時間、インタラクティブ性、ページ コンテンツの視覚的な安定性などが含まれ、これらを組み合わせたものが 2020 Core Web Vitals の土台になると述べられています。

Core Web Vitalsの評価指標として記事で挙げられているのは以下の3点です。

  • Largest Contentful Paint(LCP):コンテンツの読み込み速度
  • First Input Delay(FID):最初の入力までの遅延
  • Cumulative Layout Shift(CLS):ページの安定性

Core Web Vitalsの考え方と評価指標のポイントを踏まえると、「表示速度が速くて安定していること」が良質なユーザーエクスペリエンスを提供できるサイトの条件になります。

Kizuki
Kizuki

過去にはイケてる画像を記事に掲載することが多かったですが、仮に同様の行為を行うとしても「画像の圧縮」が前提になると考えてもいいでしょう。

表示速度を高速化するためにはエンジニアの知識が必要な場合がありますが、本記事でご紹介したWordpressのテーマやプラグインを使用することで、Wordpressサイトの高速化が可能です。

まとめ:Wordpressサイトの高速化は機械に任せよう

まとめ:Wordpressサイトの高速化は機械に任せよう

本記事では「Wordpressブログを高速化して、PageSpeed Insightsの点数を上げた3つの方法」をご紹介しました。

結論、サイトの表示速度を改善するためには、プラグインなどのツールを実装すると作業を効率化できます。

Kizuki
Kizuki

人力でJavacriptやCSSを編集したり、画像サイズを一つずつ調整するのは気が遠くなる作業なので、ツールで対応できる部分は機械に任せてコンテンツ作りに時間を費やしましょう。

サーバーサイドでの高速化に関しては、エックスサーバーが「キャッシュの最適化」に加えて「PHPプログラムの高速化」にも対応しています。

エックスサーバー

サイト制作を検討されている方は下記記事もご参考ください。

エックスサーバーの評判・メリット・デメリットを徹底解説
ブログ
Sharestyle Kizuki|フリーランス・英検・通訳案内士の情報を配信するブログ
タイトルとURLをコピーしました