解決策は山ほどあります。

今回は、方法としてはそれほど重要度は高くないので読む必要はありませんが、（おいおい）「もう少しGoogleの評価をあげたい」というひと押しになるような記事になります。

1分でわかるスクリプト最適化でサイトの読み取りを早くする方法

ブログ高速化の駄目押しの一手として、レンダリングブロックしているCSSやJavascriptをフッターに押し込む方法を試します。

ファーストビューまで時間がかかる原因

ヘッダーで読み込むものが多すぎると、処理がそこで止まってしまい、コンテンツを表示するのが遅くなってしまいます。

一番いい解決方法としては、

これですね。

この記事は、「Scripts to Footer」というプラグインを使って、headerをスリム化することで処理を軽減させる方法を中心に解決を図ることを目的としています。

①見える範囲をとりあえず表示させるために

これは、本来的にいえばCSSやJavascriptをHTMLの適切なところに入れ込むことで解決します。でも、これはWordPressでいえばテーマの中までいじることになるので面倒です。非常に面倒です。

わたしはもう二度とテーマの中身はいじらないと心に決めているので、今回はここはみなかったことにしましょう。

ユーザーはファーストビューさえあれば離脱しない

一応、理論的なところは説明します。

考え方としては、例えばメインの記事とサイドバーがあって、サイドバーがさきに表示されているようならメイン記事を表示できるようにしましょう、ということです。あるいは、記事の中でもCSSやJavascriptは全部最初から必要な指示ばかりではありません。

例えば目次を先に表示させるのか、記事途中にちょっとだけでてくるフォントやアイコンを先に読み込むべきなのか、フォントやアイコンならその場その場で指示があったほうが、最初にまとめて指示を受けるよりいい、ということです。

「CSSの配信を最適化する」

このメッセージが出ている場合には、この課題をクリアする必要があります。
私はやりませんが、先に説明したように、例えば途中でデザインとして別のウェブフォントをとりいれるためにCSSの記述をしている、などのときに、そのデザインがでてくるところに直接書き込む→インライン化する、ということをやってのける必要があります。

とはいえ、私のようにただCSSをテーマのスタイルシートに書き込んでいるだけのくまには難易度が高すぎます。

小さいCSSとか大きいURIとかがよくわからない

途中にCSSというスクリプトを入れ込むと、そこで読み込みが始まります。
注意したいのは、大きなデータ処理を後回しにすると結局痛い目にあう、ということです。

夏休みの少年を想像すれば理解できる

夏休みの宿題を想像していただければ理解は早いと思う。

HeadにCSSスクリプトを詰め込む、というのはいわば夏休み初日に宿題を全部終わらせるという指令と一緒です。

これを「宿題」という大きな括りにして最終日に追いやると、２つ不都合が出ます。

この２つですね。まさに。

夏休みがほしい

余談ですが、私はわりと宿題をやるほうでした。

でも、計画性がないので最初の１週間である程度終わらせるけど、前々日くらいに友達に自分の知らない課題があることを伝えられて最終的には泣きをみるタイプでした。

ぶちくま

楽しい立つ休みにするためには計画性が大事です。

適切な課題解決には予定を小分けに分類して優先順位をつける

「宿題」をいちど小分けにして、「自由研究」「読書感想文」「絵日記」など小さな課題にします。
これを夏休みの予定に挟み込んで行くことに、スムーズな夏休みを過ごすことができるわけです。

初日に絵日記をやるやつはいないですもんね。絵日記は最終日に帳尻合わせにやるべき課題です。読書感想文は読書の後に、自由研究は親を巻き込むのでお盆休みに。
適切なタイミングにやる気スイッチを押すことで、効率よく課題を終わらせることができるのです。

と、説明はしましたが、夏休みのない大人たちには無縁の話で、プログラムを組めない私にこの課題を解決するのは少しばかり難しい話です。
私の中では、どちらかといえばテーマ作成の課題になると思うので、ここは手をつけずにおきます。

②スクリプトをフッターに持っていく

今回は、ここの解決のためにプラグインを用意します。

人気どころは高機能の「Head Cleaner」ですね。

Head Cleanerとは

高機能なヘッドお掃除プラグインですね。
今回はCSSやJavascriptの処理をフッターに回す、という目的で紹介していますが、いろいろできます。

「Scripts to Footer」を利用する

参考にしていた記事が消えてしまったようで、当サイトがオリジナルみたいなフリをして書きますが、ネタ元はある。

「Scripts to Footer」と似たようなプラグイン

これはシンプルに、CSSとJavaScriptを下界送り（フッターへ移動）してくれます。

いいところは、jQueryという指示に関しては移動しないという設定ができるところ。いま、jQueryはライブラリ型のJavascriptで人気があるので、たくさんのテーマで利用されています。

場合によっては、スクリプトをフッターに送られると困ることもあります。jQueryを除外しておくことでエラー回避ができる場合もあるので、シンプルながら使いやすいと思います。

導入後の結果

こちらも導入するとPageSpeed Insightsの結果はよくなりました。「medium」から「good」になるような感じですね。点数で言えば5点くらい。
この辺りは、正直サイトの表示スピードというよりは、あまり実感のわかない部分ではありますが。

処理量を減らすのが一番

そもそも、邪魔をしているスクリプトを減らすのが一番です。

広告やプラグインがヘッダーを重くしている１番の原因です。あまり使っていないプラグインや機能が被っているものなど、軽量化できる部分は減らしてしまうのが一番です。

物販のリンク作成ツールが結構邪魔する

ただ、運用を続けていくとまた点数が下がりました。

というよりも、レンダリングブロックをかましているのは「プラグイン」と「広告」そして「CDN」のようなのです。アイコンの取得や、広告や物販の画像の取得のためにヘッダーで色々やっているような感じでした。

しろくまさん

RinkerやWPAPは相性が悪いのかもしれませんね。

ぶちくま

GoogleAdsenseをやめるわけにはいかんしなぁ。

というわけで、いろいろプラグインを入れてみて点数は上がったけども、今度は「プラグインを外す」作業が待っているようです。面倒だなぁ。

ではでは。

それは「mod_pagespeed」というGoogleさんが開発した秘伝の巻物があるんですが、我々エックスサーバー一門はクリックひとつでこの奥義を繰り出すことができるのです。

ぶちくま

ただのチート

簡単ではありますが、その方法を２つご紹介します。

1分でできるエックスサーバー高速化設定

「mod_pagespeed設定」について

ここでは解説するほどでもない設定方法を丹念に画像付きで説明していきます。
あまりにも簡単すぎてボリュームが足りないので基礎知識も盛り込みました。

そもそもmod_pagespeedってなんだ

Google社により開発された拡張モジュール「mod_pagespeed」を使用して、Webサイトの表示速度を向上させる機能です。
「mod_pagespeed設定」を有効にすると、ファイルを圧縮してデータ転送量を削減する、同種のファイルを一まとめにして無駄な通信を削減するなどの最適化処理を実施します。
この最適化処理により、Webサイトにアクセスしたブラウザはデータ転送量が減少し、また、ページのロード時間を短縮できるため、Webサイトの表示速度改善を期待することができます。

mod_pagespeed設定について

ちなみに、どのような効果があるかというと、

* CSSファイル、JavaScriptファイルなどの圧縮
* 最適な画像タイプへの変換、軽量化
* 同種のファイル(画像、CSS、JavaScriptファイルなど)を一つにまとめ、サーバーとクライアント間の無駄な通信(リクエスト)を削減
* CSSファイル、JavaScriptファイル、画像ファイルのキャッシュ有効期間の延長
* 小さなファイルサイズのCSSやJavaScriptをHTML内に埋め込む

mod_pagespeed設定について|Xserver

ということで、だいたいPageSpeed Insightsで求められる作業をすべてサーバー側で処理してくれます。

ぶちくま

これはすごい！

高速化に求められている大部分の問題が解決しますね。

結果としてどれくらいサイトスピードが上がるのか

サイト高速化を強化して、まずはこの機能を試しました。

こんな感想でした。

具体的に言えば、PageSpeed Insightでは３〜５点くらい上がったくらいですね。
やはり、画像圧縮が一番サイト高速化には効力を発揮しますし、PageSpeedに関しては、ファーストビューの評価が高いので、レンダリングブロックが解決されると一気にポイントがよくなる、と感じました。

ファイルの圧縮は、いうても文字の圧縮なのでもともとbyte数がくわないわけで。
省エネ効果も薄いんですな。

効果が現れるのが遅い可能性も

ただ、正直、「いつ効果を発揮したのか」がはっきりしなかったのもまた事実なり。
一応、毎回キャッシュはクリアしたりしていたのですが、CDNとか利用するといったいどこでどうなっているのかがわからん。

一応.htaccessファイルとかを眺めると、圧縮効果はなんだかダブって記述されています。これはプラグイン導入後に確認したことなのでどこが効いているのかがなんとも。。。

効果測定はひとつずつ、が基本的戦略

やはり、変更は一個ずつ、数日にわけて行うのがポイントですね。もしかしたら、まだ反映されていなかった可能性もあります。
数日経ったらまたプラグインを消したりしていじってみますね。

mod_pagespeedが必要かというとなんとも

今回はあまり数値に反映されなかったので必須とは言えなさそうです。一方で、特にバグが起きたりした感じもないので、デメリットもありませんでした。

私はCocoonというワードプレスの高速テーマを使用しています。Cocoonを利用していればスクリプト関係は圧縮機能があります。

また、プラグインにはスクリプトを圧縮できるものが腐る程あります。高機能なプラグインであれば、圧縮以外にも、配信する位置を適切な場所に整えたり、あるいはプラグイン内でキャッシュを自動作成して配信してくれるツワモノもあります。

ぶちくま

テーマの機能やプラグインでごり押しするなら不要。

不具合には注意

今のところ、不具合も出ていないので、mod_pagespeedについてはそのまま導入しています。

場合によっては、処理の都合でブログテーマなどと干渉して表示の不具合が起こる可能性、また画質劣化の可能性もあるので、ブログの方向性との相談となりそうです。

エックスサーバーの「mod_pagespeed」の設定方法

エックスサーバーのサーバーパネルにログインすると、「mod_pagespeed」を設定できる項目があります。

ぶちくま

２回クリックするだけなので簡単です。

１サーバーパネルへログインする

こちらは各自のログインID、パスワードを使ってお入りくださいまし。
ちなみに、インフォパネルとID、パスワードは別なのでご注意を。

２「高速化」の「mod_pagespeed設定」をクリック

これはそのまま。
ちゃんと個別の項目が用意してあります。エックスサーバー便利。

場所はここ

３ドメイン選択

ご利用になるドメインを選択してください。

ドメインを選択する

４「mod_pagespeed」をONにする

これも簡単。「ON」にするボタンをクリックするだけ。

mod-pagespeedをONにする

はい、実に簡単でした。
簡単すぎて、説明不要でしたね。
鋭い人は「３クリックじゃね」とかそういう感想はお持ちでしょう。

PHPのバージョン更新をする

ほぼ余談です。2016年くらいまでにサイトオープンした人は不要かなと。

PHPver.5は更新をお勧めします

ちゃんとPHPの更新はしていますか？
2017年開設した私のブログはあまり影響はありませんでした。
「ブログ開設してPHPの更新なんてしたことないぜ」っていう方は、一度PHPの更新についても確認してみてください。

PHPver.5の人は、更新をお勧めします。
ちなみに、PHPのver.7は2015年12月なので、2016年以前の方は要チェックですね。

バージョンアップによる不具合の可能性

最近のテーマを使用されている方は干渉することはないと思いますけど、
不具合が出る可能性があるので、バックアップはとっておいてください。

現在、PHPはver.7なんですけど、劇的に性能が上がっているようです。
更新はサーバーでやるのかと思ったら、自分でやらないといけないようなので各自ご確認を。

PHPバージョンアップによる高速化への効果

これはあくまでも口コミレベルの情報だったのであまりあてにはしていなかったのですが、案の定、PHP ver.7.0からの変更はあまりスピードアップには繋がらなかったようです。

ただし、古いバージョンを使用して、新しいテーマを利用している、なんて方は効果があるのかもしれません。

PHPのバージョン更新方法

エックスサーバーの場合です。

PHPバージョン変更

これだけです。

実に簡単でした。
ついでに、Webフォントも試してみたくなったのでこのサイトで導入しています。たぶん、これをやるとまたフォントをローディングすることでサイトスピードが遅くなるんでしょうけどね。

しろくまさん

結局、サイトデザインとのいたちごっこですね

ではでは。

キャッシュについては導入の是非を問うところがあるので、

ぶちくま

面倒だからもういいかな

という方は、画像の適正化とサーバー設定くらいでやめてもいいと思いますよ。むしろ、サイトのコンテンツボリュームを増やしていった方がよっぽど利益はあるかと。

PageSpeed Insightでやばい評価を受けたのでサイトの高速化に乗り出しています。この記事では、「キャッシュ」についていろいろ弄り倒した内容が書いてあります。

Cocoonに必要なキャッシュ機能

Cocoonだと、ブラウザ側のキャッシュはWordPressのテーマ側（つまりCocoonの機能）でやってくれる機能がついています。

Cocoonおすすめのサイト高速化設定

ブラウザキャッシュについて

まずはブラウザのキャッシュに対応していきます。

ブラウザキャッシュだけでも高速化はできる

ブラウザキャッシュは、簡単に言えば、

機能のことを言います。

ブラウザキャッシュの具体的な機能について

最初に来たときには、そのサイトの情報を１から読み込む必要がありますが、２回目にはもうすでにそのサイトの情報を持っているので、たとえばデザインだとかの情報をつかってサクッと表示してくれる、という効果があります。

ただ、容量があるので、ブラウザの方で「もういいな」と思ったら、数日で消えたりします。つまり、ユーザー側にデータを依存している状態なわけです。ユーザー側のブラウザにキャッシュが溜まっていれば逆に動作がもっさりすることもあります。

• HTTPでの要求に対する応答には、必ずHTTP Respons Headersが付いています。Respons Headers とは、Webサーバーからの応答ヘッダー情報の集まりです。
• キャッシュの動作（有効期間、キャッシュするか否か）は、HTTP Respons Headers内に「キャッシュ動作に関するヘッダー」が含まれていて、それに従います。
• この「キャッシュ動作に関するヘッダー」設定はWebサーバー側で行います。

【Webサイト高速化】ブラウザキャッシュについてまとめてみた

引用させてもらいましたが、ブラウザキャッシュについて勉強になったサイトです。

デザインが適応されないんだけど、というのはキャッシュが問題

よく、CSSのデザインを変えたときに、「変えたところが反映されてない！」っていう現象が起きます。これは、前のCSSの情報をブラウザが保存していて、前の情報（CSS）でサイトをデザインしているから起きます。

もちろん、別原因のこともあるけどね。

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

このブラウザキャッシュに関しては、Cocoonの高速化設定のところでチェックを入れるだけで対応できます。

一番簡単で、かつ相手のブラウザの保存容量依存に高速化が測れるのでいいですね。ただ、データは送る必要があるので、（たぶん）サーバー負担はそれほど軽くならない。あくまでも処理が早くなるのはユーザー側のブラウザでの処理ですね。

ちなみにブラウザキャッシュとCookieはどう違うの

クッキーの場合は、個人を対象にしている感じですね。読者からすると、自分の情報をサイト側に提示して、「私、前に来たこういうものなんですけど」とクッキーを差し出しているイメージ。

すると、サイト側は「はいはい、前の情報、とっておいてありますよ」という感じで、たとえばショッピングサイトだとカートの中に商品をとっておいてくれますね。あんな感じです。

Cocoonユーザーが設定すべきキャッシュプラグイン

キャッシュを使うための方法として、プラグインを導入します。
先ほど紹介したブラウザキャッシュの他にも、キャッシュは４種類あります。

Cocoonユーザーの我々がすべきことはページキャッシュとサーバーのデータベースキャッシュを作成することです。このふたつのキャッシュについても説明していきます。

ページキャッシュとDBキャッシュの違い

この辺りは私もあまりよくわかっていないというのが本音のところ。ぜひ、参照ページを参考にしていただきたい。私があえて記事にするのは、自分の理解度を整理するためである。

なので、何も知らない人が「へー」と思うくらいの知識量を提供しています。

WordPressキャッシュプラグインを選ぶために知っておくべきこと

ページキャッシュはコピー用紙を貼り付けておくイメージ

ページキャッシュは、コピー済みの用紙を張り出しておくイメージだと私は思います。最近のWebページは、データが常に変動することを想定して作られています。

新しい情報を常に更新し続けることで、動きのあるページ作りができます。

ただ、同時に毎回ページを画面に映して、データが変動したらまた画面を叩き壊して新しい画面を用意するのは、かなり面倒です。（動的ページ）

なので、ある時点のデータでページを作成し、コピーをとることにしました。何時間かおきに、コピー機で各ページのコピーを作ります（静的ページ）。これを貼り出しておくのが、キャッシュを有効にする、ということです。

しろくまさん

コピー用紙一枚ですむので、データ処理はほとんど必要ありません。これをそのまま読者は読み取ればいいので、楽チンですね。

欠点もあります。当然、ページが更新されれば、本来なら新しくコピーをつくって貼り直す必要があります。ただコピー用紙なので、一度張り出されたままだと、読者は新しい情報があることも知らずに、そのコピー用紙の情報だけを読み取ることになります。

なので、データの更新頻度に合わせて、キャッシュを用意したり、あるいは投稿したとき、コメントなどのデータ変動があったときにキャッシュを作り直せると便利なわけです。

データベースキャッシュはコピー機に指示が保存されている

データの更新が激しく、頻回にコピー機を動かす必要があるページもあります。コメントが多い掲示板や、実況系の記事、タイムセール情報などが考えられるでしょうか。

そういう場合は、コメントがあったり、記事を更新したりするときに、コピーが勝手に出力されると便利ですよね。

なるべくその労力を軽量化し、変更のある部分を動的に動かすのが、データベースキャッシュになります。クエリをとっておいて、解決策を瞬時に弾き出す、というのがデータベースキャッシュになります。

わけわかんないですね。

「計算の公式を保存しておいて、数字が送られて来たら公式に当てはめて速攻で答案を作る」みたいなイメージでしょうか。

高速化はするのですが、データをもらったら新しいコピー用紙を印刷する必要があるので、サーバーの負担がかかるようになるのが難点ですね。

キャッシュの正しい使い方

うちはほぼコメントのないブログなので、特に必要性は感じていません。さらに、投稿回数も週に1回くらい。月単位だと５本が精一杯ですね。データの変動はほとんどないので、自分が配信しているページのキャッシュさえあれば事足ります。

もし、「アマゾンのセール情報をタイムリーに発信したい」とか、「高校野球の実況掲示板をつくりたい」なんて方は、（そもそもキャッシュがいるのかも考えどころですが）ページキャッシュの設定を頻回にしたり、データベースキャッシュを利用したりするといいのかもしれません。

いずれにせよ、サイトの特徴に合わせることが大事です。

サーバーのデータベースキャッシュがいいのか、ページキャッシュがいいか、そもそも本当に必要か。

各サイトの実測とデータ化して、何が最適なのかをみていく必要があると思います。

導入すべきキャッシュ系プラグインの比較

今回使用したプラグインはこちら。全て無料サポートの範囲内で検証しています。
簡単な特徴もこちらでチェック。

以上の３つです。

ちなみに、結果としてはWP fastest Cacheを使っています。でも、ちょくちょく変更はする予定です。

W3 Total Cacheを使用していたが今回はアウト

この「W3 Total Cache」っていうのが無料なのにえらく高機能で各所でお勧めされているのです。

私も、おすすめプラグインとして紹介されていたので、導入はしていました。
設定もおすすめされるがままにしていたのです。

ただ、設定が悪いのか、別の何かが悪さしているのか、PageSpeed Insightsの点数は思わしくない。せっかく記事にする都合、それと運用していても結局Googleから怒られっぱなしだったので、とりあえず「W3 Total Cache」はアウトしました。

Cocoon製作者の、我らがわいひらさんがこのプラグインについて解説した記事です。参考になります。
PCとスマホを分けて綺麗に高速表示してくれるWPキャッシュプラグイン「W3 Total Cache」の簡単設定方法

「W3 Total Cache」高機能の内容は

などなど、まぁとにかくいろいろあります。

各項目に分かれているので、作りたいキャッシュだけ「Enable」チェックして使用していけば、自分好みに使えると思います。ある程度、自分のサイトにあった使い方がわかってから導入したほうがいいのかも。

ちなみに英語です。

「W3 Total Cache」の悪いところ

定期的に自分でキャッシュを消さないと溜まっていきます。
たぶん、今回自分の得点が悪かった原因はそこにあると思います。
また、再利用する予定ではあるので、そのときレポートを追記します。

WP Fastest Cacheを使用して高得点

最近、Twitterなんぞをみていると、このプラグインを使っている方が多いので私も使用してみました。

このプラグインは、簡単・日本語、が特徴。日本語だろうが英語だろうが、意味がわからないなら調べるのがぶちくまです。

それほど日本語対応はメリットに感じませんが、使ってみると、「たしかにこれは楽チンやわぁ」って感じです。

WP Fastest Cacheの使い方

まずは、日本語表記にしたほうがとっつきやすいですよね。ただ、全部が日本語に対応するわけではないので、いずれにせよ調べながら、になりますけどね。

簡単に操作方法を見ていきましょう。薄い文字になっているのは有料版の機能です。

こんな感じです。
微調整は各自でお願いします。

Autoptimizeも使ってみる

Autoptimizeはどちらかというとスクリプト圧縮系のプラグインなんで、Cocoonには不要かと思ったのですが、なぜか少し点数があがりました。mod_pagespeedでも圧縮されているはずなので、やや機能過多感はあるのですが、どうしてでしょうか。

たぶん、圧縮以外にも、スクリプトの適切な配置もしてくれているのでしょう。レンダリングブロックが回避できているのかもしれません（警告は消えませんでしたけどね）

ちなみにレンダリングブロック回避のためにやったこと

別記事になりますが、いろいろヘッダーからフッターに逃がすといいらしいですよ。

Headをすっきりさせて読み込みを早くするお勧めのWPプラグイン

「レンダリングをブロックする JavaScript を除去」「CSS 配信を最適化」の処理に手を焼いているようでれば解決策として考えられるのがhead部分をきれいにすること。PageSpeed Insightsの得点をあげる奥の手としてプラグインを使って簡単に解決した方法をまとめています。

buchikuma.xyz

2024.03.22

Autoptimizeはこんな人におすすめ

サイトスピード計測によって、「CSSやJavascript、HTMLを圧縮しろ」という警告を受けたら、適宜導入するのはいいかも。

ただ、Cocoonユーザーであれば、機能が重なっていると思うので、レンダリングブロック回避だけなら別プラグインがいいと思います。

WP Super Cacheを使う

じゃあ、キャッシュだけできたらいいんでないの。ということで、WP Super Cacheをイン。「WordPress.com」の開発・運営元のAutomattic社なので、安定感と安心感は強い。

これは本当にシンプルにキャッシュを定期的に作成してくれるって感じなのでいいのかな、と。
Jetpackあたりとの相性も良い。

WP Super Cacheでもサイト高速化は可能

こちらも基本的にはシンプルなので使いやすい。

昔からあるプラグインなので、設定方法についてもたくさんのサイトが参考になります。ただ、なんだかんだで、多くの方がそのまま「WP Fastest Cache」に移行されている方も多い。

個人的に効果を比較した感じだと、こちらの方が使いやすいんじゃないか、と感じた部分があったので、これを導入しようと思いました。

悩んだ末にWP Fastest Cacheを導入

いや、Superの方が良いと思ったんですよ。Fastestのチーターみたいな絵が少しださいなぁ、と思ったのと、Superの方がシンプルに感じたので。

だけど、メインサイトをいじった時には、なぜかFastestの方が得点が上がったんですよね。広告やアフィリエイトの影響はあるんだと思うけど。しばらくはチーターの絵を我慢しようと思います。

キャッシュ系プラグインの注意点

スクリプト圧縮系も合わせて、ですが。とにかく、不具合というか、テーマと干渉することが多いので注意が必要です。

幸いにして、今の所はCocoonを使用していて目立って不具合はないのですが、悪いことも起きています。

キャッシュのタイミング次第で更新が反映されない

これはキャッシュをつくる宿命ですね。

ログインしていればキャッシュが反映しないように設定すればキャッシュ（コピー）を見ずに反映結果をみることができるのですが。

私は投稿後に「誤字・脱字」や「見出し」、「デザイン」、「行間」などをチェックします。

この作業をスマホでやるんだけども（ユーザーはスマホ利用が多いので）、反映されないことがある。設定でキャッシュクリアをかけているのですが、ブラウザキャッシュが残るようになったりなんだか面倒になった。

やはり、Cocoonの高速化機能だけでやりくりするのが一番シンプルでラクだな、と思った。

Rinkerの表示がうまくいかない

当サイトでは、物販系リンク作成ツールとして「Rinker」というプラグインを使用しています。

このRinkerが表示されないことがちょくちょくあります。まぁ、Rinker自体、それほど多用しているわけではないので、実害は少ないので放っておいてますが（おいおい）。

たぶん、キャッシュをつくるタイミングの問題で、うまく反映しないことがあるみたい。
１日経つと治っているので、キャッシュの問題かと思います。

カエレバの画像表示もうまくいかない

Rinkerと同様ですが、カエレバも画像取得がうまくいかないことがありますね。こちらはリンクボタンは生きているのですが、画像なし物販リンクを果たして踏んでくれる人がいるかどうか。

やはり１日放っておけば表示されることが多いので放っておいてますが（おいおい）

WPアソシエイトポストR2は無傷

私がメインで使っているのが「WPアソシエイトポストR2」なのです。今の所は、こちらは画像表示のエラーはないようですね。このプラグインが一番使いやすいので多用しています。

まぁ、結局Cocoon側で便利な物販リンク挿入ツールができたので、徐々にこちらに移行していこうかなとは思っています。

高速化プラグインのまとめ

こんな感じですね。

今はまだ使用していますが、正直、外したくて仕方がない気持ちにはなっています。

ただ、確かにキャッシュができることで読み込みが異様に早くなったのは、点数だけじゃなく体感としても感じるところ。ユーザーとしては読みやすくなっているんだろうなとは思う。

キャッシュクリアのタイミングなどを調整することで、ある程度の不便は解消できそうですし、もう少し使ってみようと思います。

ではでは。

この記事では、サイト高速化に必須である「画像処理最適化」方法についてまとめてあります。

とりあえずサイト高速化できればいい人はまとめ記事へ

1分でわかるサイト高速化の方法

これでOKです。

じゃあ、まずはプラグイン利用前にできる部分だけやっちゃいましょう。

WordPress画像サイズを見直す

WordPressダッシュボードに、「設定」があるので、そのタブの中にある「メディア設定」をクリック。
画像サイズを選ぶところがあるので、そちらでご希望に合わせたサイズに変更してください。

WordPressの画像サイズの設定

画像サイズの考え方

「べつにこれは大きくなくていいな」とか感覚で画像サイズを選んでもいいと思いますが、画像サイズの使い道については考えておくといいと思います。
中サイズはどのような画像を適用するのか。大サイズはどうするのか。
今はモバイルもPCも同じサイトテーマで行う「レスポンシブ」な時代です。モバイルもPCも、同じ画像サイズを異なる画面サイズでみる場面が想定する必要があります。

中サイズはモバイルサイズを意識

私は中サイズは300×300とかなり小さいサイズにしました。
これは、私が利用するアフィリエイトの広告サイズが300pxを基本にしているからです。つまり、画像と広告を一緒のサイズにすることで親和性を高めているわけですね。今のところ、モバイルも大型化しても400pxくらいの幅だと思うので、300pxでもいいかな、と思いました。

ただ、サイトの方針としてはたとえ画面幅が300pxであっても、高画質画像を利用したいという場合はあると思いますので、その場合は、倍の600pxくらいでもいいと思います。
私はくそみたいなイラストを描いたりもしますが、せいぜい600px幅でしかつくらないので必要十分です。むしろあまり大きくされるとアラが見つかるのでうんぬん。

スタンプやアイコン的な「別に細かいところはいいけど、なんとなく言いたいことを一瞬で伝えたい」画像を貼るときは中サイズ、みたいな使い方ですね。

大サイズはCocoonサイズを意識

Cocoonデフォルトの横幅は800pxなので「大サイズ」の横幅は800pxに合せています。
また、「大サイズ」の縦サイズは上限を多めに設定しています。こうすることで、少し縦長の画像でも、横幅を毀損することなく貼り付けることができます。

ということなので、わいひらさんにならって横幅を800pxにするのがお勧めです。
縦長の画像に関しては、どれくらい縦長を許容するか、で決めるのがいいと思います。
私はある程度はアプリなんかで正方形に近づけてカットしたりするので、1600pxよりも小さくてもいいな、と思っています。

あるいはスマホの縦横アスペクト比で考えてもいい

ほとんどのスマホユーザーはデジカメは使わずスマホでとった写真をそのままブログにアップされることでしょう。わたしもそうです。デジカメを持ち歩く習慣はなくなりました。

iPhoneの場合、基本的には写真は縦:横は4:3の比率でつくられます。
横幅が800pxなら、縦は1066pxですね。

画面はiPhoneXなどのベゼルレスなデザインのせいで縦長化が進んでおります。
どこに照準を合わせるかは難しいところですね。
ちなみに、普通のスマホはだいたい16:9、縦長系はアスペクト比は18~19:9といったところです。

仮に横幅を800pxで合わせると、1433px、縦長対応なら1600pxですかね。
わかりやすいのが1600pxなので、「最新スマホで画面いっぱいになる画像を使用したい」という要求まで答えるためには幅800pxに高さ1600pxという画像サイズにしておくと、困ることは少ないと思います。

わいひらさんのCocoonオススメサイズはこちら
おすすめのWordPressメディアサイズ設定

これを設定しておくと、今後の画像サイズ設定の時に便利です。
また、次に紹介するプラグインでも画像サイズに合わせた圧縮をかけてくれるので先にやっておいたほうがいいですよ。

いらない画像を削除する

やはり画像サイズは馬鹿でかいので、いっそ不要であれば削除してしまいましょう。
記事中はリライトの際に見直していけばいいとして。
設定側でいじるなら、ウィジェットなどで自動生成される「人気」「最新」記事一覧とかでしょうか。

ウィジェットなどで生成される「記事一覧」を対策

サムネイルを取得して表示しているものも、なんだかんだで処理に時間がかかるので「いらないな」とおもったら消すのもアリかと思います。私は消しました。これで負担はだいぶ減りました。特に、画像圧縮をかける前だったので、処理量も多かったのだと思います。

記事一覧から画像だけ消す

あるいは、画像をなくして文字リンクだけにしてしまうのもいいですね。
サイドバーは、だれも見てないですし。文字リンクの方がクリックされる、という場合もありますし。

やり方としては、CSS処理になりますが、ウィジェットセレクタ image{display:none}で消せると思いますが、処理が軽くなるかどうかはなんとも。（おいおい）
あるいは、備え付けウィジェット機能の「最新の投稿」でもいいですね。Jetpackで「人気記事」ウィジェットを使ってリンクはCSSで目立たせてもいいかも。

アイキャッチも表示しないようにする

アイキャッチを記事の一番上に設定している方も、もしアイキャッチが不要だと感じれば消してもいいと思います。これはCocoon設定の「画像」のタブ内に設定項目があるので、消すのも出すのも簡単です。

アイキャッチは考え方が難しいな、と思うのですが。スマホサイズにかえるとPCで見たときは小さい画像がちょこんとでてきて見栄えが悪いし。大きいサイズにしておくと処理が遅くなるし。いっそなくしてしまっているのが当サイトです。

Amazonで「職場のイライラをすっきりなくす本」に関する詳細を見る

Amazon

楽天

Yahoo!ショッピング

プラグインを使用してらくらく画像圧縮作戦

使用するプラグインはこちら。

TinyPNGのサイトを利用している方も多いと思いますが、そのプラグインバージョンです。結果から言いますと、このプラグインで圧縮することで「警告」レベルだった我がサイトが「標準」レベルまで持ち直しました。

ぶちくま

さすがにgood!まではもらえませんでした。

EWWW Image Optimizerを利用していた

こいつがまったく息してないですね。
念のために、EWWW Image Optimizerで一括最適化してみたのですが、うんともすんとも。

TinyPNGのプラグインを利用

正確には、「Compress JPEG & PNG images」というプラグインになります。
サイト高速化しようと思うまでは私は存じ上げなかったのですが、どうやら「画像は圧縮してからアップロード」というのは、もうブロガーの基本だったようです。

ぶちくま

うん、知らなかったよ、知らなかったさ、誰も教えてくれやしない！

孤独な一匹狼ブロガーとしては、とにかく自分で調べる。

Amazonで「一匹狼のすすめ―すべての組織人に贈る「活きる」ためのメッセージ」に関する詳細を見る

Amazon

楽天

Yahoo!ショッピング

1ヶ月500枚という利用制限あり

このプラグインだと、1ヶ月で利用できる枚数が制限があります。
1ヶ月で500枚です。私は記事更新はせいぜい1ヶ月５本程度。
１本あたりアイキャッチとプラスして2〜３枚程度なので、余裕ですね。

必要十分だと思いますが、足りない分はサイトで直接圧縮かけるのを併用すればいいし、有料で１枚１円くらいでできるので補完的に有料利用もOKです。

プラグインを使わずともサイトで直接圧縮も可能

TinyPNGというサイトがあります。

こちらに画像データを投げ入れると、勝手に圧縮してくれます。
この時に、すでにある程度画像の大きさをいじっておくと後が楽でいいですね。

EWWW Image Optimizerはプラグインから削除

とりあえず意味がないことがわかったので、EWWWは削除しました。
たぶん、設定をいじればもう少しまともになったり、有料版でさらに最適な画像圧縮がかけられるようなので、有料利用が前提なのかもしれません。

EWWW Image Optimizerはサイズ調整は得意

サイズを適切なサイズにカットするのは得意なようなので、TinyPNGで圧縮してからアップロードすることでそれぞれの機能をいいとこどりできるかもしれません。

AMPには有効だったか

まだ確証はしていないのですが、EWWWを無効化してから、どうにもAMPに対応したページは点数がガクッと落ちました。

ぶちくま

今まではAMPのページは
Good！とお褒めの言葉をもらっていたのに！

EWWWがAMPの画像に関しても縮小処理をかけてくれていたのかもしれません。
もちろん、違うかもしれません。
ただ、AMPが遅い理由は全て「画像圧縮しろよ」というメッセージなので、おそらくこのプラグインだとおもうのですが。

追記：やはりプラグインでもない様子

あくまで私的運用の結果ですが、圧縮アップロード後にEWWWを有効化してしばらく運用してみましたが、とくに警告メッセージは変わりませんでした。なので完全にEWWWはアウトにしています。

ぶちくま

AMPの評価を上げるいい方法があったら教えてほしい

「Compress JPEG & PNG images」の使い方

ここからは実際にプラグインを使用して、がんがん圧縮をかけていこうと思います。
簡単ですし、得られる効果は大きいので是非、トライしてみてください！

「Compress JPEG & PNG images」をインストール

まずは、なんにせよプラグインをダウンロードしてください。
WordPressのダッシュボード、「プラグイン」の項目を選びます。
上部に「新規追加」があるのでクリック。

プラグイン検索してみてください。プラグインは単語ごとで検出をかけているので、しっかりコピペしてください。

忘れずに「有効化」してくださいね。

設定「Setting」は最初は必要最小でOK

Compress JPEG & PNG imagesの設定

1. 「プラグイン」から「Setting」をクリック。
2. 「Tinify account」の、名前とアドレスを入力して送信。
   

   画像圧縮｜Tinyfyからメールがくる

3. メールを受信するので、メール内にあるリンクボタンからHPのダッシュボードに移動してください。そこに「APIキー」という長い暗号みたいなものがあるのでコピーしてください。
4. 再び、WordPressのダッシュボードに戻って、「Compress JPEG & PNG images」のプラグイン設定画面から、APIキーを入力してください。
5. これで利用できるようになりました。
6. 「Image sizes」だけ設定を直してください。チェックが多すぎると月間利用数が減ってしまいます。正確にいうと、圧縮する数が増えます。
   

   Compress JPEG & PNG imagesの細かい設定

Compress JPEG & PNG imagesで画像を一括圧縮する方法

1. プラグイン設定画面か、ダッシュボードの「メディア」タブ内に「Bulk Optimization」というのがあるので、選択。
2. Optimizationというボタンがあるのでそこをクリック。すると、圧縮処理をはじめてくれます。このページは終わるまで開いておいてください。
   

   各パラメーター

ぶちくま

なんか、何もしないうちに圧縮できました。
なんと、70％近くも削減されました！

画像最適化の結果

「Compress JPEG & PNG images」を利用することで、一度、EWWWの最適化をかけた後でも、50％ほど画像データがサイズダウンしてくれました。

ぶちくま

ありがたやー。

ただ、設定の都合もありますが、この記事数50程度のサイトでも月間利用数400/500まで使用することに。記事が多く、画像が多いサイトだと、一回は有料利用でサイズダウンしちゃった方が労力カットもできそうですね。

実際、メインサイトだと全然足りませんでした。幸い、月末に実施したので、2ヶ月分の枚数（1000枚）で処理できましたけども。

画像最適化をしてみた感想

結論：プラグイン利用になるがとにかく便利

これですね。

感想：らくできてよかった。

やはり、サイト高速化においては画像の見直しは避けては通れませんね。
プラグインでらくらく一括して画像処理ができてよかったです。

ブログ高速化のためにやった5つの方法｜WordPressテーマはCocoon

サイト高速化のためにやることはシンプルです。要は、画像を減らして圧縮する。これだけでほぼ解決します。体感速度はまったくトラブルなし。ただ、それでもPageSpeed Insightsの評価は残酷なものです。なんとか、コードやカスタマイズ不要で高得点を出した記録を公開します。

buchikuma.xyz

2024.03.22

私はPageSpeed Insightsを真っ赤な「Low」という警告を半年ほど放置しました。

ぶちくま

なんだかわたしの人間性まで否定されているような気持ちになりました。

そんな私でも、たった５つの方法を実践するだけで「Good!」までもっていきました。

ぶちくま

どうせいろいろカスタマイズとかコードとかやらないといけないんでしょう？

なんと、初心者でも簡単にできます！
PHPファイルに触らずにプラグインと、サーバーの設定をいじるだけです。

しろくまさん

とにかく、一度ご覧あれ！

画像を見直すことで７割は解決する

ブログ用のサイトであれば、コンテンツ（記事）の中にちょこちょこ画像を挟んでいると思います。
この画像たちがスピードを悪化させる原因です。

サイト高速化のために画像でやるべきことは３つ

とりあえず、サイトを重くしている原因をスリム化していきます。

詳しい方法はこちらの記事へ

数字は最後にまとめますが、あれだけで真っ赤だったPageSpeed Insightsの評価が、オレンジ色まで戻ってきました。

パソコンはMedium評価で79点

モバイルはMedium評価で70点

ぶちくま

久しぶりにオレンジ色と再会しました！

GTmetrixの評価もまずまず

個人的にはオレンジ色でも及第点なので、ここでやめてもOKだと思います。
しかし「どうせなら記事にするか」と思ったので、もう少し深めていきたいと思います。

エックスサーバーなら簡単に高速化設定できるよ

とりあえず及第点までは戻ったのですが、どうせなら、PageSpeed Insightsの評価を緑色にしたい、と思ったのが泥沼。

ぶちくま

ここからが本当に点数が上がらなかったです。

Googleさんから「いいね」をもらうべく、サーバーの力も借りることにしました。

エックスサーバーでmod_pagespeedをONにする

こちらも画像付きで別記事で解説してます！

キャッシュを最適化していく

やったことは「プラグインの導入」それと「どれがいいかひたすら比較」です。
比較がどうしても時間がかかるので、だいたい1日おきくらいにプラグインの項目を少しずついじって、データを取って、また変えて、を繰り返すイメージです。

ぶちくま

発狂するかと思いました

結論だけいえば、WP Fastest Cacheを導入することになります。

詳しくはこちらも別記事です。

CDNは難しいのでJetPackの設定だけ利用する

CDNという高速化に役立つ機能があります。

こちらも警告が出ているのですが、いろんなところからデータを置いたり引っ張ったりする、という構造上、コンテンツが表示されない系のエラーが出ることが多いみたいです。

JetPackのプラグインを使っていれば、WordPressのPhoton（image CDN）というCDN機能が簡単に使えます。
いつか解説しますが、これを切ると点数が上がったり下がったりするのでとりあえず入れてみます。

Rinkerとカエレバの画像が表示されなくなる

ちなみに、この時点でRinkerとカエレバで作った物販系のリンクが死んでます。

ぶちくま

画像が取得されなくなりました。

まぁたぶんキャッシュかCDNのエラーだろうということで、1日放置したら表示されてました。焦った方はキャッシュをクリアしてから放置してみると意外と治っているかも。
キャッシュが更新されて表示されるようになったんだと思いますが、もしダメそうならJetpackの画像設定を変更してみてください。

追記：結局CloudflareというCDNを導入しました

正直なところ、もう高速化できているので不要かと思いましたが、記事完成のためには必要な知識だと思い実践してみました！

PHPをバージョンアップするとサイトスピードが上がる

そういう噂がありましたので、エックスサーバーのPHP ver.7を更新してみました。
とはいえ、メジャーなアップデートじゃなかったようなので、正直あまり変わりませんでした。
もし、2015年くらいPHPアップデートされていなければ、やってみる価値はあります。

レンダリングブロックを回避する

抜本的な改革が必要だという結論になり、

レンダリングブロック

という聞きなれない警告にも対応することにしました。
といってもやること自体は難しいことではありません。

レンダリングブロックについての簡単な考え方

基本的に、読者の端末（ブラウザ）があなたの記事をサイトから構成するときには、
シンプルに「頭」から「足」にむかって、上から舐めるようにひとつずつの「司令」を読み込んでいきます。
この「司令」なんですが、スタイルを決定する「CSS」や、サイトの動きを制御する「Javascript」などの形式をとったりしていて、HTMLという形をつくっています。
先ほどから圧縮だの何だの言っているCSSやJavascript、HTMLっていうのは、
この司令を「なるべく簡潔に、余計な指令を挟まないようにする」という作業のことです。

この指令も、優先順位をつけることでよりスムーズなサイト構成ができるようになります。
大体の指令は、「頭」つまり＜head＞という部分に詰め込みます。
でも、本当は「足先」くらいにあっても困らない指令があります。
Googleは「頭に指令が詰め込まれすぎて読み込みができなくなってるから、もう少し順番つけていらないやつは消すか後に回すかしろよ」という警告を出しているんですね。
これがレンダリングブロックということです。

どんな指示を後に回せばいいのか

実は、何でもかんでも指令を後回しにすればいいわけじゃないんです。
Googleとしては、まずはファーストビューを完成させろ、ということを望んでいます。
とりあえずコンテンツを表示しろ、ってことですね。
不必要なアニメーションやデザインは、コンテンツが表示されてからでもいいわけで。

コンテンツとして何が重要か、というのはサイトによると思います。
ただ、ほとんどのブログでは「文章」が大事かと思いますし、
画像主体であれば、読者が観にきた画像を最初に表示された方が安心するかもしれません。広告なんかは当然後回しになるわけで。

初心者にはわからないのでとりあえずフッターへ移動

長々と書きましたが、私も初心者なので、何が正しいのか、どうすべきかは、

しろくまさん

運用してなんぼ。

というわけで、エラーが出ない限りは、まずはGoogle先生のおっしゃるように、レンダリングブロックだけは解消しましょう。

プラグイン「Scripts to Footer」で解決

今回もプラグインで解決します。
詳細は別記事にしますか。

これでようやく緑ゾーン、「Good!」評価をいただけました。

モバイルは96点台まで改善

画像にするのが面倒なので、なんとなくPCもGoodな緑色評価になったことはお察しいただきたい。

ぶちくま

おめでとう！

一応、これでPageSpeed Insightに関しては高得点を取ることができました。
同じようなCocoon利用者であれば、同じ方法でもある程度は挙動がおかしくなることはないと思います。

一応モバイル速度も3秒台まで上がっているよ

モバイル速度も3秒台

とはいえ、やはり広告が多くなったり、画像が多い記事になると４〜５秒台になることも。

まとめ：Cocoon機能を生かしてプラグインは減らしたい

ただ、そもそもCocoon自体が高速テーマなので、今回のようなプラグインはできれば使いたくないなぁ、とは思っています。
自分でコードをみつけてfunctions.phpに記入しても良かったのですが、後々、Cocoon側でさらなる対応をすることもあろうと思い、取り外しも簡単なプラグインで処理しました。

個人的には、70点台が安定して出せれば無理に対応しなくてもいいかな、とは思ってます。あくまでも記事作成のために対応策を書いた、というだけの話。

ぶちくま

あくまでもユーザビリティが高められればそれでいいのです。

今回の感想と後日談

最低限やっておけばいいサイト高速化のための処理

いろいろやってはみたものの、これで高得点はとれるな、と感じました。

あと、どうにもRinkerとかWPAPとかの物販リンク系が悪さをしているのか、その後点数が下がったりすることが多くなりました。体感としては、画像が多くなければまったく問題なく感じるのですが。

ではでは。

ブログサイト高速化の測定サイトまとめ

ぶちくま

Jetpackは利用している方も多いと思います。そして、なんでJetpack使っているのかよくわかっていない人も多いと思います。私がそうです。

Jetpackの機能の一部に「画像データをCDN利用できる」というものがあるのですが、意識して使用してますか？

横文字が苦手なぶちくまが、ひたすら英語と戦いながらCDNというサイト高速化（と諸々のメリット）を獲得すべく戦う記事です。

ブログ高速化のためにやった5つの方法｜WordPressテーマはCocoon

サイト高速化のためにやることはシンプルです。要は、画像を減らして圧縮する。これだけでほぼ解決します。体感速度はまったくトラブルなし。ただ、それでもPageSpeed Insightsの評価は残酷なものです。なんとか、コードやカスタマイズ不要で高得点を出した記録を公開します。

buchikuma.xyz

2024.03.22

CDNとは何なのか

そもそもCDNとは何者なのか。

答えは、コンテント・デリバリなんとか

コンテント・デリバリ・ネットワークの略です。
通常サイトのテキストファイル・画像・動画・音声などのコンテンツは、自分で借りたサーバーに保管されています。そのサーバーにアクセスすることでユーザーのデバイスにサイトが表示されます。しかし同じサーバーにアクセスが集中すると混雑のためサイトが表示されなかったり、表示遅延などが発生します。
画像や動画ファイルをCDNサーバーに分散させてキャッシュを保存し、ユーザーに近いCDNサーバーからコンテンツを表示させます。こうすることで自分のサーバーの負荷を軽くし、かつユーザーはCDNサーバーからコンテンツを読み込むため、サイトの表示を高速化することができます。

第１回 ＣＤＮ の 仕組み （CDNはどんな技術で何が出来るのか）

ということらしいです。

わたしなりに解釈しますと、

こんな感じです。

しろくまさん

よくわからないけど便利な機能ってことだな

CDNを利用するとどんないいことがあるの？

以下のサイトがとても役立ちますので参考にさせてもらいました。ありがとうございます。

第１回 ＣＤＮ の 仕組み （CDNはどんな技術で何が出来るのか

CDNを利用するとどうして高速化できるのか

まず、今回の目的である、サイトの高速化に役立ちます。
たとえば、私はエックスサーバーというレンタルサーバーを利用していますが、例えばこのサーバーまでの道路は一本だけしかないとします。

シンプルに、距離が遠ければコンテンツを届けるのに時間がかかりますね。

これが、CDNというネットワーク上に配信サーバーがあると、一番近いところにある配信サーバーまで行けばよくなります。

ユーザーの居場所によりますが、CDNがたくさんあればあるほど、身近に配信サーバーがある可能性が高くなるので、結果として早くコンテンツを受け取ることができるユーザーが増えることになります。

これはわかりやすいパターン。

でも、それだけじゃなくて、一度にコンテンツが欲しい人が殺到すると、１本しかないサーバーへの道路は渋滞します。これが、CDNのような無数に張り巡らされたネットワークになれば、道路がいっぱいできるので、渋滞の解消に役立ちます。

障害にも強いCDN

複数の配信サーバーがネットワークで繋がっているCDNの構造は、障害にも強いとされています。

例えば、ひとつ問題のある配信サーバーがあったところで、CDNは相互のネットワーク上のサーバー同士で補完しあえるので、問題があるサーバーは切り離してしまえばユーザーがトラブルを感じることなく対応することができます。

Jetpackで簡単にCDNを利用できる

実際には「部分的CDN」だと私は思っていますが、導入方法がとても簡単なのでお勧めしやすいです。
やっぱり作業量は少ないに限りますからね。

Jetpack設定方法

こちらはとても簡単です。
Jetpackはプラグインとしてかなり有名なので、「なんか知らんけど使ってる」方は結構多いと思います。

実際、プラグインを「新規追加」する画面の一番上にJetpackは表示されるはず。
こちらをインストールして有効化しましょう！

JetpackとWordPress.comのアカウントを作成する

わたしはすでにアカウントをもっていたので今回は登録不要だったのですが、WordPressをまだ始めたばかり、という方は登録をお勧めします。Jetpackは使わなくてもなんとかなりますが、Akismetというスパムを除外するプラグインは便利です。

様々なプラグインをつけては外してきましたが、Akismetを外したことはないです。Jetpackは重たいので何度か外しましたが。

アカウントは各ブログ用のものを作成しよう

アカウントは、レンタルサーバーで作ったブログ用のE-meilアドレスを使用するといいですよ。私は面倒くさがりなので、メインもサブも同じアカウントにしてますが、複数運営するサイトが出てくると、「あれ、どのメールアドレスだっけ」ってなります。

なので、基本的にどのアカウントを作るときでも「各ブログ用のアカウント」を「各ドメインのアカウントメールアドレス」で登録するようにしました。
メモアプリにロックかけて、表で管理するとわかりやすいですよ。

なんか有料会員に誘導されるんだけど？

アカウント登録時に有料会員に誘導する項目もありますが、「Free」会員で大丈夫です。読みづらいところにありますが、画面の下の方に「Start with Free」というボタンがあるのでそちらをクリック。
金額を入力する画面があれば「＄０」にすれば課金はされません。

JetpackのCDNは設定がすごく簡単

WordPressのダッシュボード（編集画面）に「Jetpack」タブができたと思いますので「ダッシュボード」をクリック。
基本的な編集はクリックひとつでできます。
「パフォーマンス」にある「画像のパフォーマンス」を有効にします。

これだけです、お疲れ様でした！

他にJetpackに必要な設定

Jetpackは多機能すぎて何しているのかいまいちよくわからないプラグインですが、基本的にはスパムブロックだけで大丈夫です。今回は特別にCDNのために画像メディアの設定を行いました。

あとはあえて必要なものはないと思いますが、統計情報を利用したウィジェットの「人気記事一覧」機能なんかは使いやすいかと思います。統計情報取得がプラグイン動作を重くしている原因でもあるんですけどね。

Jetpackは簡単に利用できるので初心者にお勧めできる理由

いや、そのままなんだけども。初心者にはJetpackによるCDN（もどき）がお勧めです。WordPressとの互換性もいいですし、画像ファイルだけなので最悪コンテンツ全てを破壊するようなエラーは起きませんし。

JetpackでCDNするメリット

• 何より簡単。
• 画像サイズを最適化してくれる
• エラーも最小限（の可能性）

JetpackでCDNするデメリット

• 画像しか取り扱っていない。効果が薄い。
• CDNを利用することでエラーが起こる可能性がある。
• レンダリングブロックしている要素にJetpackが入ってくることがある。
• なんか結局表示が遅くなってユーザビリティが低下することもある。

Jetpackの最大のデメリットは「画像ファイルしかCDNとして利用できない」というところです。
試しに他のCDNサービスと比較してみましょう。

同じく無料で利用できるCDNはCloudflare

CloudFlareはそういったCDNサービスの一種です。無料アカウントでも多くの便利な機能を使えるため、簡単にCDNの恩恵を受けられます。CloudFlareは、ライバースプロキシという概念を用いたCDNです。そのため、CloudFlareの導入にはネームサーバが必要となります。
無料でサイトを大幅に高速化! CDNを知らない人のためのCloudFlare入門

今回は他の方の記事におんぶに抱っこですね。申し訳ない。

実際にCloudflareに登録してみる

物は試しということでCloudflareに登録してみました。登録自体はE-mailアドレスの登録だけだったので簡単。

まずはアカウント登録

アドレス送信後に、すぐにメールが返ってくるので、そこにあるリンク「Verify email」をクリックすると、メールの確認が取れます。
するとダッシュボードで設定画面に移ります。

Cloudflareに無料登録する設定

ここまできたら引き返せないのでどうせだからCloudflareを試してみることにしました。
ドメイン取得サイトの設定も必要になるので、少し設定は面倒です。
とはいえ、コピペだけだったので共有します。

ドメイン登録について

1. まずダッシュボードに到着。自分のサイトのドメインを登録します。
2. 次に、ネームサーバーが与えられます。２つあるのでどちらもコピーしてメモして置いてください。あるいはそのページを開いたままにして別タブで作業を続けます。

ネームサーバー登録方法

• ドメインを取得したサイトにいって設定します。
  （私の場合、サーバーはエックスサーバーですが、ドメインはお名前.comで取得しています。その場合は、お名前.comで設定することになります。）
• お名前.comではログインすると契約更新画面のはずです。まずはホーム画面に行きましょう。ホーム画面から「ネームサーバーを設定する」をクリックしてください。
• 変更するドメインを選択してチェックを入れてください。その下にある「ネームサーバーの選択」から、「その他」のタブを選択。
• すると、他のサーバーという欄があるのでこちらをチェックします。
• ここのネームサーバー１、ネームサーバー２など、指定されたところに、それぞれ先ほどコピペしたアドレスを入力してください。

確定すれば設定は終了です。

数分後にメールで「アクティベートしたぜ」ってお知らせが来ます。
これで任務終了です。

また適切な設定があれば追記します。

キャッシュ系プラグインの設定

CDNの設定があるキャッシュ系プラグイン、たとえばW3 Total CacheやWP Fastest Cacheですね。
これらはCDNと連携する機能がついているので、ついでに設定しておきましょう。

CloudflareのAPIキーはMy profileにあるよ

CloudflareのAPIキーが必要になるかと思います。
その場合は、右上にある人物アイコンから「My profile」を選択してみます。
すると、下の方に「API keys」というものがあるので、そこから確認してください。
Global API Keyの方でいいと思います。

Cloudflareを設定するともれなくエラーもついてくる

早速、サイトが高速化されたかどうか確認しようと思ったら、PageSpeed InsightsもGTmetrixもエラーを吐き出しました。

ぶちくま

計測できなくなってる！

ただ、ページは表示されるし（キャッシュのせいかも知れんが）今のところは、不都合なし。むしろ、なんか異様にページの表示は早くなってる！
体感でここまで変わるのは、もしかしたら高速化チャレンジ後、１番の衝撃かも知れん。。。

Cloudflareの注意点

あちこちのサーバーに飛ばされるからかどうかわかりませんが、セキュリティの脆弱性について心配する声があります。

* サイトが頻繁に落ちるようになった
* サイトロックダウン（不正侵入）の回数が増えた

サイト 高速化 ！ CloudFlare と JetPack どちらがいいの？？

という現象が多くみられるようになったそうです。

Cloudflareのサーバー自体が落ちる現象

これも頻回にみられているとのこと。その間、当然じぶんのサイト、みてもらうことができません。
ただでさえ訪問者の少ない我がサイトに、そんな無用なエラーでみていただけないのはあまりに悲しい。

ということで、メインサイトの方は２、３日様子をみて元に戻そうと思っています。

CDNのcloudflareで522エラーがよく出ます。解決方法調べました。

結果：Jetpackは大して変わらず、Cloudflareは早いがエラー

最初にJetpackで画像処理機能を導入した時にはPageSpeed Insightsでの計測結果が5点以上あがりました。

ただ、この設定にしたから全てOK、というほど万能な機能でもありません。実際、メインで使っているサイトに関してはほとんど点数は変わりませんでした。

むしろ、画像圧縮したりする方がよっぽど即席で効果があります。

一方のCloudflareですが、本当はただ比較のための情報を書くためだけだったのになぜか登録までしちまって、しかも利用し始めるという巧妙な罠。

ぶちくま

被コンバージョン率高めのくまです

ただ、実感としてはめちゃくちゃ早くなった。でも、PageSpeed Insightsの評価はいまいち。なんだかもやもや。

結論としては、「遅いと評価されているわけじゃないし、困ることなければCloudflareは外してもいい」と思いました。またGoogleさんに怒られるようなことがあれば考えますが、読者さんに怒られる方がよっぽどつらいっすわね。