cocoonを高速化！モバイル表示の速度を高速化するためにやるべきことを紹介します！

ワードプレスでcocoonのテーマを使用している方向けに、モバイル表示の高速化に関するアドバイスをできればと思い記事を書きました。

弊社ブログサイトのPageSpeed Insightsによるモバイル表示スコアは94点です。

まだ改善点はありますが、90点以上を獲得するまでに行った内容を皆さんに紹介します。

swellのテーマを使用している方は、swellの高速化に関する記事を読んでください。

cocoonの設定

cocoonはSEO対策内容が充実しており、無料で使用できるテーマの中でもかなり優れております。

もちろん高速化に関する対策もcocoonなら無料で行うことが出来ます。

cocoon高速化設定

cocoonの高速化設定方法は、「cocoon設定」の中にある「高速化」から設定することが出来ます。

こちらではブラウザのキャッシュ作成、コードファイルの縮小化、画像読み込みの遅延の設定が出来ます。

結論、全て有効化することでサイトが高速化されます。

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

キャッシュとは、ユーザーがサイトに訪れた際の履歴のことです。

初めて訪れるwebサイトを表示する際、コードファイルや画像など全て読み込んで表示します。そのため表示されるまで少し時間を必要とします。

訪れたサイトの履歴を残している場合、２回目以降の訪問時は履歴を元にサイトを表示するため、コードファイルや画像を一から読み込む必要がありません。そのためサイトの表示速度が速くなるのです。

ユーザーに自社サイトの履歴を残してもらう場合、サイト側でキャッシュを有効化する必要があります。

cocoonではキャッシュの有効化をボタンひとつで行うことができるのです。

「ブラウザキャッシュの有効化」にチェックを入れてください。

コードファイルの縮小化

コードファイルの容量が多いほどサーバーへの転送に時間がかかり、表示速度に影響を及ぼします。

無駄な改行や必要のないコードがあると、コードファイルの容量が増えてしまいます。

それらの無駄なコードを自動で縮小化してくれるのが、「cocoon高速化」内にある「縮小化」です。

HTML CSS JavaScriptの3つのファイルを縮小化してくれます。それぞれの言語にチェックを入れてください。

画像読み込みの遅延

webサイトを表示する際、そのサイトページの上から下まで読み込み終わったら表示されるようになっております。

しかしサイト下部の読み込みは、サイトが表示された後でも問題ないはずです。なぜならファーストビューには関係の無い要素だからです。

読者がスクロールしている間にサイト下部部分を読み込みすれば問題ありません。

これを「読み込みの遅延」と呼びます。cocoonでは画像に関して読み込みの遅延を設定することが出来ます。

この設定により、サイト下部の画像は最初の読み込みに影響されないようになります。

「Lazy Loadを有効にする」という項目にチェックを入れることで、画像の読み込み遅延設定をすることが出来ます。

アクセス集計の無効化

cocoonはアクセス集計を自動で行ってくれます。

1日、1週間、全ての期間で各記事がどれだけ見られているのかがわかるような設定です。

非常に有難い機能ですが、サーバー負荷が高いというデメリットがあります。サーバーに負荷がかかってしまうと表示速度に影響が及びます。

そのためアクセス集計は無効にすることをオススメします。

サイトのアクセス集計は、Googleアナリティクスを用いて行うと良いでしょう。

「cocoon設定」→「アクセス集計」のチェックを外すことで、アクセス集計を無効化することが出来ます。

プラグインの精査

プラグインとはワードプレスにおける拡張機能のことで、様々な機能を追加してくれます。

例えば問い合わせフォームを一から作る場合、PHPなどのプログラミング言語を必要としますが、プラグインを使えばプログラミング言語を使わなくても問い合わせフォームを作ることが出来ます。

プラグインは非常に便利ですが、導入する度にサイトが重くなり表示速度の低下につながります。

そのためプラグインは必要最低限のものだけにしましょう。

弊社のブログサイトに使用しているプラグインは6つです。

All in One SEO PackやJetpackなど有名なプラグインがありますが、cocoonとGoogleアナリティクスはあればこれらのプラグインは必要ありません。

特にJetpackは非常に重いプラグインで、導入した途端表示速度が低下して例もあります。

プラグインは上記の6つで十分かと思います。

画像の軽量化

画像はサイトの容量を埋める大きな要素です。画像の容量を減らすことでサイトの容量を大きく減少させることが出来ます。

弊社が行っている画像の軽量化は2つの手法をとっております。

画像の圧縮

WordPressにアップロードする前に、画像を圧縮します。

画像の圧縮にはiloveimgというwebツールを使用しています。こちらで圧縮してからWordPressにアップロードしております。

詳しくはこちらの記事に記載しておりますので、ご確認ください。

拡張子をWebPに変更する

画像の拡張子をWebPに変更します。

WebPとはGoogleが開発した画像の拡張子で、高画質低容量の拡張子になります。

既にアップロードしてある画像はもちろん、これからアップロードする画像の拡張子をWebPに変更することが出来ます。

サーバーの軽量化

使用しているサーバーの軽量化もサイト表示速度に関わってきます。

サーバーの管理画面より容量を確認することが出来ます。

エックスサーバーはサーバーパネルから、さくらのレンタルサーバーはサーバーコントロールパネルからそれぞれトップ画面で確認することが出来ます。

サーバー上に無駄なファイルが存在していると容量が増えてしまうので、定期的にファイルチェックを行ってください。

エックスサーバーでWordPressを始めようとしている方は、「エックスサーバーでWordPressを始める方法を簡単に紹介！」の記事を読んでください。

最後に

以上が弊社ブログサイトで行っている対策でした。

さほど難しい内容ではないかと思います。cocoonを使用している方でしたら誰でも90点以上のスコアを獲得することができると思います。

もしモバイル表示速度は低い場合は、上記の内容を試してみてください。