【ブログ運営】初心者ブロガーがワードプレス無料テーマ「Cocoon」のサイトスピードアップ(高速化)を試みてみた!2020年版

ブログ高速化Cocoonブログ運営報告
この記事は約6分で読めます。
あまがみ
あまがみ

こんにちは、あまがみです!

@bianchilupo0805

いつも、あまがみブログをご覧いただきありがとうございます!

ついにこのブログも開設して9カ月目に突入しました!

紆余曲折ありましたが、何とか継続できてます!

あまがみ
あまがみ

これも偏に皆様のお陰です!

新型コロナウイルスで自粛モードですが、あまがみブログは自粛せず、精力的に運営していきますよ!

今回は現在ワードプレスで無料テーマ「Cocoon」でブログを運営しているブロガーさん向けに、私が実際行っている手法をお伝えしたいと思います。

あまがみ
あまがみ

あくまで私が行っている手法なので、最善、最適ではないと思います。参考程度にご覧ください(汗)



Cocoon設定での高速化

Cocoonの機能である程度サイト高速化ができます。私が行っている設定をご紹介します。

Cocoon高速化設定

Cocoonでは高速化設定の項目があり簡単に高速化できます。

高速化設定

Cocoon設定→高速化を設定します。

サイト高速化画面

Lazy Load以外の項目にチェックを入れます。(Lazy Load機能はプラグインで補足します)

あまがみ
あまがみ

正直これだけでも相当の高速化になります。

SNSシェア・フォローボタンの設定

SNSシェアとフォローのボタン設定はサイトスピードが重たくなる要因になりますが、昨今ブログとSNSの運用は非常に重要なものになっています。

そのためボタン表示箇所を限定することで、サイトスピードの低下を最小限にしましょう。

SNSシェア

トップシェアボタン

トップシェアはフロントと投稿ページに設定。ブログ自体のおすすめと、記事のおすすめに対応。表示は6つ以内に絞ったほうが〇

ボトムシェアボタン

ボトムシェアボタンは投稿のみに設定。記事を読んで共感した人のみに対応でOK。こちらもボタンは6個以内に収めるように。

SNSフォロー

SNSフォローボタンはフロントページと投稿に表示設定。

フォローボタンは多くても3つくらいに絞ったほうが良いです。

キャッシュの有効化も忘れずに!

AMP化

グーグルとツイッターが共同で開発したシステムで、モバイルの高速化を可能が可能になりました。

Cocoonではボタン一つでAMP設定ができますが、ブログでの表現に制限がかかる点と、グーグルサーチコンソールに大量に来るAMPエラー表示にブログ初心者は対応できないので私は使用していません。

あまがみ
あまがみ

プログラミングの知識がほとんどないあまがみにはハードルが高い設定でした…

プラグインでの高速化

サイトスピードの高速化にプラグインのインストールは非常に有効的ですが、むやみに入れてしまうと逆にサイトスピードが落ちたり、プラグイン同士が干渉して不具合が出たりと様々な問題が発生します。

ここではプラグイン数の数やCocoonで相性がよいといわれている高速化のプラグインをご紹介します。

プラグインの数

プラグインのインストール数が遅すぎるとサイドスピードが落ちると言われています。

Cocoonは非常に多くの機能が備わっているのでプラグインの数はかなり節約できると思います。

私の考えとしては多くても20個以内、できれば15個以内に収めたほうが良いと思っています。

👇私が入れているプラグインを公開していますので参考程度にどうぞ♪

【2020年最新版】ブログ無料テーマCocoon(コクーン)でおすすめのプラグイン13選!
サイト運営4カ月目に突入し様々なプラグインを導入しましたが、ビアンキがおすすめするプラグインを紹介します。今回は当サイトでも使用している人気無料テーマ「Cocoon」の使用で特におすすめなプラグインを13個ご紹介いたします!

サイト高速化におすすめのプラグイン

Cocoonに相性のよいと私が考えている高速化プラグインは以下の個です♪

Compress JPEG & PNG images

サイトスピードが遅くなる主な要因は画像の読み込みです。

文字や文字装飾と違い画像や動画は非常に大きく重たいデータなんです。

このプラグインは無料で画像の圧縮が月に500枚まで出来ます

あまがみ
あまがみ

重たい画像データを圧縮して軽くすることで、素早く画像を表示でき、結果的にサイト高速化できます!

500枚以上は有料ですが、月10~15記事更新の当ブログでは全く問題ないキャパです♪

画像圧縮で有名なのはEWWW Image Optimizerというプラグインですが、

調べると、このプラグインは WordPress をインストールしたサーバー上で圧縮プログラムが処理されるため、サーバーの CPU 負荷が著しく高くなるデメリットがあります。

あまがみ
あまがみ

多くの人が一気にブログを見るとサイトスピードが落ちる可能性があるということです。

しかしこのCompress JPEG & PNG imagesはTinyPNG という別のサーバー上で圧縮処理をしているため、WordPress を利用しているサーバーに負荷が掛からない特徴があります。

また、一部のサーバでは使用制限がかかっているという側面を持っているようなので、設定はやや面倒(TinyPNGのサイト連携が必要)ですが、こちらのプラグインをおすすめします。

👇設定方法はこちらのサイトがお勧め

【画像圧縮】Compress JPEG & PNG images プラグインの設定と使い方 | みらいクリエイターズ
WordPressにアップロードした画像を圧縮してくれるオススメのプラグインをご紹介します。パンダ画像で有名な TinyPNG のWordPressプラグインです。画像によっては50%以上の容量を圧縮してくれて、しかも画質の劣化が見た目でほ

画像アップロードの際に自動的に画像が圧縮されます♪

圧縮時間が1画像につき約10秒ほどかかりますが、デフォルト設定でも平均的に4~5分の1くらい圧縮してくれます。

あまがみ
あまがみ

画像を圧縮されても画像が明らかに悪くなるということもありません♪

そして、プラグインする前の画像を一括して圧縮する機能があります。

ダッシュボードの「メディア」→「Bulk Optimization」から一括で圧縮できますが、ひと月の圧縮枚数の上限を一気に使ってしまう恐れがあるのと、時間がかかる点は注意してください。

あまがみ
あまがみ

過去の投稿の圧縮を行うので、画像の表示サイズが変わることがある点も注意です!

まだ画像圧縮のプラグインを入れていない方は、Compress JPEG & PNG imagesをいれて設定するだけで相当高速化できると思いますよ♪

WP Fastest Cache

Cocoonは高速化の設定でプラウザのキャッシュ機能はついていますが、ページキャッシュの機能はついていませんので、ページキャッシュをできるプラグインをインストールしました。

ページキャッシュのプラグインはいくつかありますが、簡単・使いやすいという観点では、WP Fastest Cacheでほぼ一択だと思っています。

設定は画像の通りで行っています。

あまがみ
あまがみ

ページキャッシュがあると、サーバーの応答がスムーズになるので、サイトの表示も早くなります!

BJ Lazy Load

CocoonにもLazy Loadの機能はついていますが、この機能は細かい設定ができないので、BJ Lazy Loadを導入、設定をしたことで、デフォルトの設定よりサイト表示のスピードが上がりました。

あまがみは以下のように設定してます。

あまがみ
あまがみ

画像読み込みのタイミングも調整できるので、ストレスなくブログを読むことができます♪

設定後の結果

上記の設定を行った結果PageSpeed Insightsでモバイルは約20%、パソコンで10%ほどサイトスピードが改善されました。

そして実際の体感ではかなり速くなりましたので、Cocoon使用のブロガーさんでサイトスピードでお悩みの方は参考にしてみてください。

コメント

スマホやゴルフクラブ自転車フレームの保護はガラスコーティング!
詳細はコチラ
スマホやゴルフクラブ、自転車フレームの保護はガラスコーティング!
詳細はコチラ
タイトルとURLをコピーしました