\ 最大12%ポイントアップ! /

【COCOON高速化設定】サイトスピードを94まで上げたSEOに強い最速設定6選について解説

【COCOON高速化設定】サイトスピードを94まで上げたSEOに強い最速設定6選について解説

今回はCOCOONのサイト高速化設定」について解説します。この記事は7分で読めます。

>>有料テーマ「SWELL」のサイト高速化設定はコチラ

カケル

ブログの無料テーマ「COCOON」のサイトスピードが上がらなくてお困りの方はいませんか?

サイトスピードってそもそも気にする必要あるんですか?

ページの表示速度」はGoogleが検索結果ランキングの要因の一つであると公表しており、放置しているとSEOに悪影響が出ので放置は厳禁です。

そこで今回は「サイトスピードを39→94まで上げたブログ管理人」が、「SEOに強いサイト高速化設定」について解説します。

COCOON高速化設定前
COCOON高速化設定前

この記事を読めば「COCOONのサイト高速化設定の手順」が分かりますので、ぜひ最後までご覧ください。

この記事はこんな人にオススメ
  1. COCOONを初期設定のまま使っている人
  2. COCOONのサイトスピードが上がらなくてお悩みの人
  3. SEO対策でサイトスピードを上げたい人
この記事で分かること
  • COCOONのサイト高速化設定の手順について
タップできる目次
スポンサーリンク

【前提】なぜサイトの表示速度を上げる必要があるのか?

【前提】なぜサイトの表示速度を上げる必要があるのか?

なぜサイトの表示速度を上げる必要があるのか?理由は以下の2つです。

ユーザーの利便性に直結するから

ユーザーの利便性に直結するから

Googleは「ユーザーファーストの精神」を掲げており、ユーザーにとって「利便性の高いサイトを上位表示させる方針」をとっています。

サイトの表示速度が遅いほど、ユーザーはページを閲覧できるまでに時間がかかり、ストレスを感じます。

クリックしてすぐにページが表示されないと、「戻る」ボタンを押したくなります。

カケル

2018年にGoogleが行った調査によると、ページが表示されるまでの時間1秒から3秒に落ちる直帰率が32%上昇するという結果が出ています

SEOでブログの上位表示を狙うなら必須だから

SEOでブログの上位表示を狙うなら必須だから

Googleは2018年7月に「Speed Update」というアルゴリズムの更新を行い、サイトスピードが検索順位に影響を与える可能性があることを示しました。

仮にまったく同じコンテンツを投稿したサイトがあった場合、ページの表示速度が速いサイトの方が上位表示されます

Googleは公式に以下の発表をしており、ページの表示速度の重要性を説いています。

【関連記事】Google ウェブマスター向け公式ブログ [JA]: ページの読み込み速度をモバイル検索のランキング要素に使用します

カケル

トップブロガー「きぐちさん」の本でも「ページの速度を上げる」ことをオススメしています。

\ ブログを基本から学ぶならこの本がおすすめ /

\最大12%ポイントアップ!/
Amazon
\抽選で最大全額ポイントバック!/
Yahooショッピング
スポンサーリンク

【現状把握】自分のサイトスピードは『Page Speed Insights』で調べることが可能

【現状把握】自分のサイトスピードは『Page Speed Insights』で調べることが可能

自分や他人のサイトのスピードを計測するにはGoogleが提供しているPage Speed Insights」というツール(ウェブサイト)を使います。

Page Speed Insights」とはWebサイトPC・スマホでの「表示速度を測定できるツール(ウェブサイト)」のことです。

【「Page Speed Insights」で分かること】

  • 最初のコンテンツ表示にかかるまでの時間
  • メインコンテンツの読み込み時間
  • サイトを遅くしている原因
  • サイトを高速化するために必要な対策
Page Speed Insights」でサイトスピードを計測する手順はコチラ
STEP
「Page Speed Insights」にアクセス→検索窓に調べたいURLを入力し、分析をクリック

計測サイトはこちら>>Page Speed Insightsページスピードインサイト)」

pagespeedinsights
STEP
出てきた結果を確認する
pagespeedinsights

Webサイトを見るときにユーザーが使う端末は30%がPC70%がスマホ(携帯電話)なので、スマホでの表示速度が特に重要です。

カケル

最終的なパフォーマンス「携帯電話」で「90以上(緑色)であればOK。「90未満」であれば早急に改善が必要です。

スポンサーリンク

【解決策①】『COCOON設定』で高速化する方法

【解決策①】『COCOON設定』で高速化する方法

COCOON」には「COCOON設定」の中に「高速化」という設定が最初から備わっていますが、テーマをインストールしただけでは「ONになっていない状態」です。

「COCOON設定」6つ
設定変更後の注意

設定変更後は「COCOON設定」→「キャッシュ削除」をクリック。(何回押しても問題ありません)

COCOON高速化設定

ブラウザキャッシュ

設定項目このブログの設定項目
ブラウザキャッシュの有効化
COCOON高速化設定

縮小化

設定項目このブログの設定項目
HTMLを縮小化する
CSSを縮小化する
JavaScriptを縮小化する
COCOON高速化設定

Lazy Load設定

設定項目このブログの設定項目
Lazy Loadを有効にする
Googleフォントの非同期読み込みを有効にする
COCOON高速化設定

事前読み込み設定

設定項目このブログの設定項目
事前読み込み初期設定のままでOK
COCOON高速化設定

サムネイルの画像解像度を下げる

サイトトップに並んでいる記事一覧などのアイキャッチ画像(サムネイル画像)は縮小されて表示されています。

「COCOON」には縮小画像が荒くなるのを防ぐために「Retinaディスプレイ対応」という機能があり、これが「ON」になっているとサイトスピードが遅くなります。

カケル

Retinaディスプレイ対応」の設定は「OFF」にすることをおすすめします。(OFFにしても過去運営していたサイトでは、違いは分かりませんでした

「COCOON」で「Retinaディスプレイ対応をOFFにする方法」はコチラ
STEP
「COCOON設定」→「画像」をクリック
COCOON高速化設定
STEP
「Rentiaディスプレイ」のチェックを外す→「変更を保存」をクリック
COCOON高速化設定

フォント設定を見直す

Web上で使用される文字」には多くの種類がありますが、種類によってサイトの表示速度に影響を与えることは知っていますか?

游(ゆう)ゴシック」は「macOS」や「Windows 8以降のWindows」に標準搭載されているフォントで、ページの読み込み速度が一番早いと言われています。

カケル

「游(ゆう)ゴシック以外」を使用している人はできる限り「游(ゆうゴシック」に変更しましょう。

「COCOON」で「文字フォント」を変更する方法はコチラ

COCOON設定」→「全体」→「フォント」→「游ゴシック」を選択→「変更を保存」をクリック

COCOON高速化設定
COCOON高速化設定
設定変更後の注意

設定変更後は「COCOON設定」→「キャッシュ削除」をクリック。(何回押しても問題ありません)

COCOON高速化設定

【解決策②】『COCOON設定以外』で高速化する設定方法8選

【解決策②】『COCOON設定以外』で高速化する設定方法8選

COCOON設定以外』でサイトを高速化する設定方法以下の8つです。

不要なプラグインを削除する

不要なプラグインを削除する

プラグイン」はとても便利ですが、スマホのアプリのように入れれば入れるだけサイトの動作は重くなり、ページの表示速度は遅くなります

カケル

解決策①の通り「COCOON」には最初から高速化設定が備わっているため、基本的に「高速化系プラグイン」とは相性が悪いです。

「COCOON」で非推奨のプラグイン
  • All in One SEO Pack」・・・COCOON標準搭載の機能と一部被っている
  • Autoptimize」・・・過去の報告から、不具合が発生する可能性が高い
  • WP super cache」や「W3 Total Cache」や「WP Fastest Cache」などのキャッシュ系プラグイン
  • Table of Contents Plus」や「RTOC」などの目次生成系のプラグイン
  • Lazy Load」などの画像遅延読み込みプラグイン
  • Speech bubble」などのふきだし用プラグイン
  • 「WooCommerce」などのEC系プラグイン
  • Jetpack」などのかなり重いプラグイン

>>その他「COCOON」で非推奨のプラグイン一覧はコチラ

カケル

参考までに私が過去に運営していた「COCOON」のサイトのプラグインを紹介します。サイトスピードは常に「90~100」です。

運営していたサイトプラグイン一覧(サイトスピードは90~100
スクロールできます
プラグイン名プラグインの用途
「Advanced Adsアドセンス広告の位置調整
BackWPup」ワードプレスのバックアップ
EWWW Image Optimizer画像圧縮
Pochipp物販紹介
PS Auto SitemapHTMLサイトマップ作成
Redirection301リダイレクト管理
(301リダイレクトとはURL変更時にURL変更をする処理のこと)
SiteGuard WP PluginワードプレスのログインURL変更
Useful Blocks便利なブロック作成
WebSub投稿・更新したページのURLの自動通知
Wordfence Security」セキュリティ対策
WP Multibyte Patch文字化け対策
WP Revisions Controlリベジョン数制御
(リビジョンとは執筆・編集した記事の復元機能のこと)
XML Sitemap & Google NewsGoogleサイトマップ作成用
カケル

お問い合わせ」はプラグインを使用せずに作成可能です。作成方法はコチラ

>>【関連記事】【初心者におすすめ】Pochipp(ポチップ)の初期設定手順と使い方を解説
>>【関連記事】ワードプレスの管理画面にログイン出来ないときの対処方法10選

『お問い合わせ』はGoogleフォームを使う

『お問い合わせ』はGoogleフォームを使う

ブログの「お問い合わせ」を設置する方法としてプラグインの「Contact Form7」を使っている人は多いと思います。

少しでもサイトスピードを速くしたいのであれば「お問い合わせ」は「Googleフォーム」で作成し、「Contact Form7」は削除しましょう。

「お問い合わせ」を「Contact Form7」を使わずに作成する方法はコチラ

完成形のサンプルはコチラ

STEP
「Googleフォーム」にアクセス→「フォームに移動」をクリック
STEP
右下の「+」マークをクリック
Googleフォーム
STEP
「お問い合わせ」と入力→「記述式」に変更→「質問事項」を入力→「必須」にチェック→必要な質問項目を「+」マークで同じように作成→完成したら右上の「送信」をクリック
STEP
下記のように選択→「コピー」をクリック
Googleフォーム
STEP
ワードプレスの「固定ページ」→「新規追加」→タイトルに「お問い合わせ」を入力→ブロックで「カスタムHTML」を選択
固定ページ
STEP
「Googleフォームでコピーしたコード」を貼付け→「プレビュー」で綺麗に反映されていたらOK→パーマリンクを決めて、右上の「公開」を押せば完成
固定ページ
固定ページ

画像をWebP化する

画像をWebP化する

サイトに「画像」をアップすればするほどサイトは重くなり、表示速度は遅くなります。

旧形式の「JPEG」や「PNG」だと表示が遅くなるので、現在はWebP(ウェッピー)」などの新形式の画像ファイルに変更するのがオススメです。

カケル

ブログにアップしている画像等を「WebP化」する方法はいくつかありますが、このサイトで行っているプラグインを用いた「WebP化」について紹介します。

EWWW Image Optimizer」を用いて画像を「WebP化」する方法はコチラ
STEP
「プラグイン」→「新規追加」→「EWWW Image Optimizer」をインストール→「有効化」
読み飛ばしガイド

プラグインはインストール済みで、「WebP化だけ未設定の人」→ここをタップorクリック

EWWW Image Optimizer
STEP
「設定」→「EWWW Image Optimizer」をクリック
EWWW Image Optimizer
STEP
「サイト高速化」と「今は無料モードのままにする」にチェック→「次」をクリック
EWWW Image Optimizer
STEP
「幅と高さの上限を0」に設定→「設定を保存」をクリック
EWWW Image Optimizer
STEP
「完了」をクリック。
EWWW Image Optimizer
STEP
「設定」 → 「EWWW Image Optimizer」→「Enable Ludicrous Mode」をクリック
EWWW Image Optimizer
STEP
「変換」→「変換リンクを非表示」にチェック→「変更を保存」をクリック
EWWW Image Optimizer
STEP
「基本」→「WebP変換」にチェック→出てきた枠内のコードを全部コピー
EWWW Image Optimizer
EWWW Image Optimizer
カケル

「コード」は誰でも共通なので、以下に同じコードを張り付けておきます。以下コードをコピーして使ってもOKです。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1,L]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp
STEP
「変更を保存」をクリック
EWWW Image Optimizer
STEP
「サーバー」→「サイト管理」→「サイト設定」→「応用設定」→「.htaccess設定」
STEP
「鉛筆マーク」→「.htaccessファイル」の「先頭」にコピーしたコードを貼付け

コードの貼り付け位置は「.htaccessファイル」の「先頭」であることに注意してください。元々書かれているコードなどは絶対に消さないこと。万が一張り付ける位置を間違えると、ブログ全体が壊れる可能性があります。

conohaserver
STEP
「設定」 → 「EWWW Image Optimizer」→「PNG」から「WEBP」になっていればOK
EWWW Image Optimizer
STEP
「メディア」→「一括最適化」→「再最適化を強制」にチェック→「最適化されていない画像をスキャンする」をクリック
EWWW Image Optimizer
STEP
「〇〇点の画像を最適化」をクリック→終了するまで待てばOK
EWWW Image Optimizer
カケル

すでにアップロード済みの画像がすべて「WebP化
されます。

STEP
「自分のブログ記事内の画像」を右クリック→「名前を付けて保存」をクリック

ファイルの種類」が「WebP」になっていればOK。「旧ファイル形式のまま」の場合、同じ画像を再度アップすればOK。

画像保存
カケル

今後アップする画像等はすべて自動で「WebP化」されます。

設定完了後、「サイト内の画像が表示されなくなった」という方は、以下の手順を実行すればOK。

STEP
「EWWW Image Optimizer」→「設定」→「遅延読み込み」のチェックを外す→「変更を保存」
EWWW Image Optimizer

PHPのバージョンを最新のものにする

PHPのバージョンを最新のものにする

PHP」とは「Hypertext Preprocessor」の略語で、サーバー側で動くプログラミング言語です。

PHP」が最新バージョンになっていないと、サイト全体の表示速度が遅くなります。

しかし「デメリット」として、たまに「サイトが正しく表示されない」、「一部のプラグインが動作しない」ことがあります。

カケル

不具合が起きた場合はPHPを「元のバージョン」か「最新のひとつ前のバージョン」にしましょう。

ConoHaサーバー」での「PHPバージョン」確認・設定方法はコチラ

「サイト管理」→「サイト設定」→「応用設定」→「PHP設定」→「鉛筆マーク」→「最新バージョンを選択」→「保存」をクリック。

conohaserver

>>Xserverでの「PHPバージョン」確認・設定方法はコチラ
>>ロリポップ!での「PHPバージョン」確認・設定方法はコチラ

ファーストビューに多くの要素を表示しない

ファーストビューに多くの要素を表示しない

表示される情報(読み込む情報)」が多くなればなるほど、サイトの表示速度は遅くなります。

サイトや記事内に「容量の大きい画像」や「動画」を置くのはなるべく避けるべきです。

カケル

外部から情報を取る「Twitter、instagram」、「アドセンス広告」もサイトトップに置くのはなるべく避けるべきです。

サーバーを高速なものにする

サーバーを高速なものにする

サイトの根幹である「サーバー」が貧弱だと、サイト高速化の設定をしても速度は上がりにくいです。

国内最速の「ConoHa WING」か、「エックスサーバー」を使用していれば特に問題ありません。

\ 国内最速のレンタルサーバー (月額687円から)/

公式サイトはコチラ

有料テーマにする

有料テーマにする

このブログのテーマである「SWELL」を含め、「有料テーマ」は無料テーマの「COCOON」よりサイトスピードは速いです。

私自身の経験ですが、「COCOON」のときはサイトスピードは「80~90ぐらい」でしたが、「SWELL」に変えてからのサイトスピードの平均は「95~100」です。

\ サイトスピードが速くなります /

>>【関連記事】【ブロガー必見】ブログを書くときにおすすめのアイテム・ツール25選を紹介

外部サイトをブログカードで表示しない

外部サイトをブログカードで表示しない

外部サイトを表示するとき、「ブログカード」と「テキストリンク」の2種類の方法があります。

リンク先の「アイキャッチ(サムネイル)画像」や「サイト名」、「メタディスクリプション(記事下の説明文)など」を取得しにいくため、表示速度が遅くなります。

カケル

外部サイトのリンクは基本的にすべて「テキストリンク」を使いましょう。

【ブログカードの例】(例ではこのサイト内のリンクを使用)

【テキストリンクの例】(例ではこのサイト内のリンクを使用)

『COCOONのサイト高速化設定』によくある質問まとめ

よくある質問まとめ

サイト高速化設定」に関する「よくある質問」をまとめました。

サイトの高速化はやるべきですか?

高速化設定はやるべきです。Googleが示すSEO指標にも「モバイルフレンドリーにする」という表示の最適化に関するものが入っています。

「携帯電話」だけ速度が遅いのですが、放置でもいいですか?

放置は厳禁です。現在はスマホの普及により、Webページの70%は「スマホ(携帯電話)」で見られています。「携帯電話」のサイトスピードを優先的に意識すべきです。

無料テーマ「COCOON」でもサイトスピード「90」を超えることはできますか?

サイトスピード「90」を超えることはできます。ただし、有料テーマSWELL」の方がサイトスピードは速いことは多いので、どうしても気になる方は有料テーマSWELL」の購入をぜひご検討ください。

>>【関連記事】【SWELL高速化設定】サイトスピードを100まで上げたSEOに強い最速設定について解説

\ サイトスピードが速くなります /

『COCOON高速化設定』についてのまとめ

SEOで上位表示を狙うなら「サイトの高速化設定」は必須です。

今回紹介した高速化設定を実践すれば、誰でもサイトスピードは「90台」になりますのですぐにお試しください。さらなるサイトスピードを望むなら、有料テーマSWELL」の購入をおすすめします。
>>【関連記事】【SWELL高速化設定】サイトスピードを100まで上げたSEOに強い最速設定について解説

\ サイトスピードが速くなります /

下記記事にはSEO上位表示に必須の内容が書かれているので、ぜひ合わせてご覧ください。

>>【関連記事】【SEO対策】ドメインパワーを上げる被リンク獲得サイト13選を紹介!メリットも解説!

カケル

ブログ初心者さん向けの記事下記にまとめましたので、参考にどうぞ!

\ ブログを基本から学ぶならこの本がおすすめ /

\最大12%ポイントアップ!/
Amazon
\抽選で最大全額ポイントバック!/
Yahooショッピング

コメント

コメントする

CAPTCHA


タップできる目次