WordPressテーマ「Cocoon」でブログを高速化する方法

新幹線 ブログ作成

この記事は・・・
ワードプレス(WordPress)テーマ「Cocoon」を使用してブログを高速化したい人向け

ブログ初心者に絶対おすすめのワードプレス(WordPress)テーマ「Cocoon」でブログを高速化するために必要な設定をまとめました。

ブログの高速化とは?

ブログの高速化とは、ブログのウェブページの読み込み速度を速くすることです。ウェブページの読み込み速度が遅い場合には、ページの表示に時間がかかりやすく、読者の離脱につながりやすくなります。また、最近ではGoogleもページの表示速度を重視しており、ページ読み込み速度を検索順位の評価に加えているとの情報もあります。

ページ速度の評価

はじめに、当ブログのデフォルト設定での読み込み速度を測定してみます。Pagespeed Insightsのサイトで、ブログサイトのURLを入力することで、読み込み速度を評価することができます。

PageSpeed Insights mobile(変更前) PageSpeed Insights PC (変更前)

デフォルト設定では、モバイル48点、パソコン76点という結果に。パソコンはまずまずの数字ですが、モバイルではLowという評価になっています。ここから高速化の設定を行い、読み込み速度を速くしていきます。

読み込み速度を速くするためには、Webページの容量を抑える必要があります。そのためには、Webページの基本構造を知る必要があります。

Webページの基本構造

Webページは、HTML、CSS、JavaScript、および画像等のメディアファイルによって作られています。それぞれ順に説明します。

HTMLは、HyperText Markup Languageの略で、Webページ内の各要素の意味や情報構造を定義しています。WordPressでは動的HTMLという仕組みをとっており、HTMLファイルそのものがサーバー上に保存されているわけではありません。サイトにアクセスがあった場合に、データベースとサーバーFTPから必要な情報を読みだしてHTMLファイルを構築しクライアントPCに送信しています。

CSSはCascading Style Sheetsの略で、Webページをどのように装飾するのかを指定します。 例えば、ウェブページの色・サイズ・レイアウトなどの表示スタイル等を指定します。WordPressでは、テーマフォルダ内にstyle.css等のcssファイルが保存されています。

JavaScript はサイトの動的な動きを扱っています。例えば、ページの再読み込みなしで新しいコンテンツを読み込んだり、データをサーバーに送信せずにフォーム入力値の検証を行うことができます。WordPressでは、テーマフォルダ内にjavascript.js等のファイルが保存されています。

画像等のメディアファイルについては、特に説明不要と思います。WordPressでは、アップロードしたメディアファイルがuploadフォルダ内に保存されています。

Webページの容量を抑えるには?

Webページの容量を抑えるには、上記で説明したそれぞれのファイルを圧縮してしまえばよいということになります。

WordPressテーマCocoonでは、Cocoon設定から簡単に、HTML, CSS, javascriptそれぞれのファイルを圧縮することができます。WordPress左側のメニューのCocoon設定→高速化をクリックします。縮小化の欄で、HTML, CSS, javascriptそれぞれの縮小化のチェックボックスにチェックを入れて、変更を保存します。

画像ファイルの圧縮については、WordPressテーマ「Cocoon」のプラグインまとめで紹介したEWWW Image Optimizerを使用してください。

Webページを高速化するもう一つの方法

ファイルの圧縮以外にも、Webページを高速化する方法があります。それがキャッシュを利用する方法です。

キャッシュとは、サーバーやパソコンに一時的にウェブページのデータを保存する仕組みのことです。キャッシュがあると次に同じページを開いたときに素早く表示させることができます。キャッシュには、ページキャッシュとブラウザキャッシュの二種類があります。さらにモバイル端末で使用できるAMPという仕組みも紹介します。

ページキャッシュとは

ページキャッシュは、リクエストされたページのブラウザへの出力を、ワードプレス上でキャッシュとして保存する仕組みのことです。次に同じページヘのリクエストがあった場合は保存してあるキャッシュデータを出力するだけなので、WordPressの起動から応答処理を行うまでの処理時間が短縮されます。

ページキャッシュの設定方法

ページキャッシュの設定には、プラグインを用います。「WP Fastest Cache」がオススメです。
WordPressを起動し、ページ左側のメニューから「プラグイン」「新規追加」を選択します。画面右上に表示される「プラグインの検索」窓に「WP Fastest Cache」を入力して検索します。
プラグインがみつかったら「今すぐインストール」ボタンをクリックします。インストールが完了すると「今すぐインストール」のボタンが「有効化」のボタンに変化するので、クリックして有効化します。

WP Fastest Cacheの設定画面で下記のように設定し、変更を保存します。

WP Fastest Cache 設定画面

ブラウザキャッシュとは

ブラウザキャッシュとは、アクセスしたサイトのデータ(画像やHTMLなど)をブラウザで一時的に保管しておく仕組みのことです。ページキャッシュと異なり、キャッシュはユーザー端末(PCやスマホ等)に保存されます。ただしキャッシュの設定は基本的に、Webサーバー側で行う必要があります。

ブラウザキャッシュの設定方法

ブラウザキャッシュの設定は、Cocoon設定から簡単に行うことができます。WordPress左側のメニューのCocoon設定→高速化をクリックします。ブラウザキャッシュの欄で、ブラウザキャッシュの有効化のチェックボックスにチェックを入れて、変更を保存します。

AMPとは

AMPは、Accelerated Mobile Pagesの略称で、モバイル端末でウェブページを高速表示するための仕組みのことです。モバイルユーザーのユーザー体験向上を目的として、GoogleとTwitterが協同で立ち上げたオープンソースプロジェクトです。AMPは、ウェブページのHTMLをあらかじめGoogleあるいはTwitter側でキャッシュすることで、読み込む分の時間を大幅に削減することができます。

AMPの設定方法

WordPress左側メニューのCocoon設定をクリックします。AMPタブを選択します。AMP機能を有効化するのチェックボックスにチェックを入れて、変更をまとめて保存をクリックします。

ページ速度の評価(高速化設定後)

上記設定を行った後の読み込み速度を測定してみます。再びPagespeed Insightsのサイトにアクセスし、ブログサイトのURLを入力します。

PageSpeed Insights mobile (変更後)PageSpeed Insights PC (変更後)

高速化設定後は、モバイル95点、パソコン89点という高得点。満足いく結果になりました。

まとめ

ワードプレス(WordPress)テーマ「Cocoon」でブログを高速化するために必要な設定をまとめました。ファイルの圧縮とキャッシュの設定を行うことで、モバイル、PCともにページ速度の高速化を行うことができました。

コメント