wordpressサイトの高速化で速度が3倍!?行ったカスタマイズを紹介!
当ブログの姉妹ブログ「Yugoの不思議な音楽の国」が大幅に高速化して表示速度が最大3倍になりました⁽⁽ ◟(∗ ˊωˋ ∗)◞ ⁾⁾その結果、「ページ/セッション」も約7%増加💡
サイトはもちろん内容が大事ですが💡Googleサーチエンジンが近年モバイル（スマホ）での表示速度をランキング指標に取り入れたことはもちろん！何よりも実際にアクセスして下さる方もページがすぐに表示されたほうが気分が良いですよね!?
今回は当サイトで使用しているCMS「Wordpress」でサイトを高速化するために実装して効果が絶大だったカスタマイズ方法を紹介していきたいと思います^-^ﾉ
表示が早くなると気分がいいね⁽⁽ ◟(∗ ˊωˋ ∗)◞ ⁾⁾以前はトップページなんて表示されるまでに8秒とかかかっていたのが今では2秒台になったよ💡
（アクセスが多く集中する時間帯は若干遅くなるけど^-^；）
記事では途中、テーマを変更した話ついて書かれているけど、テーマを変更しない人が高速化できる方法も紹介しているから参考にしてみてね💡
- 1. 画像をすべて超軽量のWebP形式に変換してみた！
- 2. 「Plugin Load Filter」を使って、一部のページのみで必要なプラグインをサイト全体で読み込まないようにカスタマイズ！
- 3. WP Fastest Cachを使ってページキャッシュを生成して高速化！
- 4. TOPページのカテゴリ別、記事一覧表示で「データベースを１回だけ取得＆配列に代入」してデータ転送量を抑えた！
- 5. WordpressテーマをCocoonに変更して高速化！
- 6. Lazy Load
- 7. その他、Cocoonに標準搭載された機能で置き換えられるプラグインをすべて停止して軽量化できる！？
- 8. ブログはコンテンツが最も重要！でもサイトのユーザビリティも大事！？
画像をすべて超軽量のWebP形式に変換してみた！
画像の形式には「比較的軽いJpeg」や「透過色が扱えるPng」など様々あります。
でも、それらとは比べ物にならないくらい軽く（1/4程度の容量）、しかも画質が良い「WebP」という形式があって、Google Chromeを筆頭にFire Foxなど主要なブラウザでどんどん対応が進められています💡
まさに今注目のサイト軽量化法だね💡
まだ一部のブラウザでは対応していないものもあるので、対応していない場合のみ従来どおりJpeg、Pngを表示する仕組みになっています💡
今後はすべてのブラウザで対応予定とのことで期待できる対策方法です💡
WordPressでWebPを実装するなら「Ewww image optimizer」というプラグインを使用すればできるよ💡
画像を多用しているサイトなら軽量化の効果は絶大💡
公式サイト！
- Ewww image optimizer（Wordpress.org – プラグイン配布ページ）
「Plugin Load Filter」を使って、一部のページのみで必要なプラグインをサイト全体で読み込まないようにカスタマイズ！
次に、プラグインをたくさん使いすぎてサイトが重くなっている方におすすめしたいのがこちら💡「Plugin Load Filter」というプラグイン！・・・。
おいおいっ、またプラグイン足してるじゃん!?
って思うんだけど、うまくできているから大丈夫だよ💡
管理ページ、投稿ページ、固定ページ、特定のページ、のみでプラグインを有効にでできる優れもの！
Wordpressはインストールされたプラグイン「すべてのページ」で読み込んでしまう仕組みになっているのをご存知ですか？
例えば💡管理ページでしか使わないプラグインや、特定のページでしか使わないプラグインがあるよ💡
管理ページのみで読み込めば良いプラグイン！
- Ewww image Optimizer
- TinyMCE Advanced
- AddQuickTag
- Plugin Load Filter
お問い合わせページのみで読み込めば良いプラグイン！
- Contact Form7
これらのプラグインも、実はすべての記事ページで読み込まれてタイムロスに繋がっているんだ💡
わ〜、特に「Ewww image Optimizer」と「Contact Form7」は重たいって有名だよね！でも便利だから必須！
これはかなり軽くなりそう！？
必要なプラグインを必要なページのみで読み込むようにすると、記事ページではほとんど必要なプラグインは無いことに気がつくよ💡
そして💡この「Plugin Load Filter」自信も管理画面のみで有効にするからユーザーエリアの速度には一切影響を与えないところもポイント💡
これは導入しなきゃだね💡
公式サイト！
- Plugin Load Filter（Wordpress.org – プラグイン配布ページ）
WP Fastest Cachを使ってページキャッシュを生成して高速化！
WP Fastest Cachは、ページキャッシュを作成して高速化するプラグインです💡
本来、Wordpressは都度データベースへアクセスして情報を引っ張ってきてそれを表示するので毎回「サーバーへの接続→データの取得→データの描画」という一連の作業を行ってページが表示されるので、サイトの速度はデータベース・サーバーの速度に左右されてしまいます。
これがかなり効果的！
ページキャシュを使えば１枚の絵のように保存できる！？
複雑なことを抜きに簡単に言えば、ページキャッシュとはページのデータをまるまる静的に保存して、表示するときは一枚絵を表示してサーバーとのやり取りを減らす！というのが目的です💡
ブラウザキャッシュのようにそれぞれのユーザーが保存するのではなくサーバー上にデータが保存されるため初めてアクセスするユーザーでも表示が速い恩恵を得られるという特徴があります💡
ページキャッシュは24時間に1度など一定期間ごとに更新したり、記事投稿＆編集時＆コメント投稿などの変更が加えられた際に更新されて新しい情報がユーザーに届けられるようになっているよ💡
サーバー負荷を減らすためにもページキャッシュは必須だよね💡
TOPページのカテゴリ別、記事一覧表示で「データベースを１回だけ取得＆配列に代入」してデータ転送量を抑えた！
このブログでは、サイトのTOPページに「カテゴリ別の記事集」をスライダー（カルーセル）で表示しているのですが、これがとてつもなく重かったのです！？
最も重たいときでMax12,000msec（12秒）の大台！
実は、当初Post Carousel Proというプラグインを使ってカテゴリ別記事を表示していたのですが、これが各スライダーごとにデータベースにアクセスする仕組みで、さらに毎回複雑な処理をするので激重！
最初は良かったのですが、表示するカテゴリを増やすごとにどんどん重くなって、サーバーにも負担がかかるので設計を見直す必要がありました。
トップページがこうなってるサイトってよく見るけど、軽く作るの大変なんだね。
Wordpress標準の関数でカテゴリーを絞っても毎度データベースにアクセスするのは同じ！
次に考えたのが、Wordpressの関数で記事だけ取得してスライダー部分だけ別のJavascriptを使うという方法💡
ところが、この方法でも結局「表示するカテゴリー数」の回数だけデータベースにアクセスするのでサーバーへの負荷は減らないという問題は残ってしまうんだよね。
プログラミングの世界では「如何に同じ処理の回数を減らして速度を上げるか」が重要らしいよね💡
結論！！データベースに１度だけアクセスしてすべての記事を取得して、phpでカテゴリ別に条件分岐を書いて表示させることで軽量化した！
<?php
$arg = array(
'post_type' => 'post',
'posts_per_page' => -1,
'no_found_rows' => true,
);
$the_query = new WP_Query($arg);
if ($the_query->have_posts()) :
$post_no = 0; //記事番号を初期化
while ($the_query->have_posts()) : $the_query->the_post(); /*** 以下にループ処理を記述！*/
$all_posts[$post_no][title] = get_the_title(); //タイトルの取得と代入
$all_posts[$post_no][date] = get_the_date(); //投稿日付の取得と代入
$all_posts[$post_no][post_url] = get_permalink(); //URLの取得と代入
$all_posts[$post_no][thumbnail_url] = get_the_post_thumbnail_url( get_the_ID(),'thumbnail' );
//記事内容の取得と代入
$postContent = get_the_content();
$postContent = wp_strip_all_tags( $postContent );// HTMLタグをすべて取り除く
$postContent = mb_substr($postContent, 0, 60); //文字列を短縮
$all_posts[$post_no][content] = $postContent;
/*** カテゴリIDの取得（分類用）***/
$category = get_the_category(); //カテゴリ情報を変数に代入
$cat_num = 0 ; //カテゴリの個数をリセット
$all_posts_cat = []; //配列をリセット
//配列からカテゴリIDを抽出して代入
foreach( $category as $value_cat){
$all_posts_cat[$cat_num] = $category[$cat_num]->cat_ID;
++$cat_num;
}
//連想配列に変換
foreach ($all_posts_cat as $i => $value) {
$all_posts[$post_no][category_id][$value] = 'true';
}
++$post_no;//次の記事番号へ
endwhile;
endif;
wp_reset_postdata();
?>
そこで💡最終的に行ったのがこちら！このやり方で新着記事からカテゴリ別の記事まで１度のデータベースアクセスで処理することができます💡
このやり方で軽量化に成功！
- データベースに１度だけアクセスしてすべての記事を階層化した配列に代入！
- 配列の各記事番号の下階層にタイトルや投稿日、URL，サムネイルURLを代入！
- 記事のカテゴリを取得して、複数ある場合も考慮して配列に代入！
- 出力時、カテゴリ分岐の速度が上がるよう連想配列に変換！
という流れで配列に代入しています💡
さらに💡今回は少しでも速度を上げるために、phpでより処理の早い方法で記述を行ったよ💡
phpで処理が早くなる裏技！
- 配列にカテゴリが含まれるかどうかの判断には、遅いin_arrayではなく、一度連想配列に変換して「isset関数」で真偽（true/false）を判定して高速化！（25倍くらい速くなる）
- インクリメント（++）を変数の後ろに付けて高速化！
- printではなくechoで高速化！
など、何百回も行うループ処理の中身はできるだけ速い処理を積み重ねて高速化してみました💡
phpはどの関数を使うかで処理速度が大きく変わるのでコーディングする際はより速い処理を選ぶように心がけましょう💡
高速化って地道な作業だね〜
WordpressテーマをCocoonに変更して高速化！
さらに💡今回のカスタマイズでは、Wordpressテーマを今大人気の「Cocoon」に変更して高速化しました💡
このサイトでは以前Simplicityという無料のテーマを使わせていただいていたのですが、今回の Cocoonも同じ製作者である「わいひら様」による最新の無料Wordpressテーマ！です💡
素晴らしいテーマを無料で公開してくださって、わいひらさんには本当に感謝しています!ありがとうございます💡
公式サイト！
- 寝ログ（わいひら さんの公式ブログ）
- Cocoon公式サイト（無料Wordpressテーマ配布）
そんなわけで、今回はこのCocoonを使ってトップページのみ３カラムに、その他の記事ページでは２カラム表示にして使わせていただきました💡
さて💡せっかくなのでこのテーマのすごいところをちょっとだけ紹介してみよう💡
PCとスマホ間でシームレスなレスポンシブデザイン表示！
以前のSimplicityでは、PCサイトとモバイル向けサイトでは異なるhtmlファイルを読み込んで表示していたのが、Cocoonになって１つのhtmlファイルで完全シームレス（境目がない）なレスポンシブデザインになりました💡
簡単に説明すると💡パソコンのブラウザ幅を狭めたり広げたり、スマホを縦表示から横表示にしてもデザインが崩れない作りになっているよ💡
まず、これによって読み込むファイル数が減ったことでデザイン性の向上はもちろん、読み込み速度の無駄が省けて大幅にスピードUPしています💡
html・CSS・Javascriptの圧縮機能が標準搭載！
圧縮化ってこういうやつ↑
htmlやCSS、Javascriptは、改行や空白、コメントアウトなどを圧縮（ミニマイズ）することで高速化できることは広く知られていますが、一般的にWordPressでこれらの圧縮を行うにはプラグインを導入する必要がありました。
そしてプラグインを導入することでWordpressがまた重くなってしまうという矛盾・・・。
なんとCocoonには標準機能としてこれらの圧縮機能が付いているのです⁽⁽ ◟(∗ ˊωˋ ∗)◞ ⁾⁾
テンプレート設定から項目をクリックするだけで圧縮されて高速化できるよ💡
ブラウザキャッシュ機能も標準搭載！
次に使用したのが、こちらもCocoonの標準搭載機能であるブラウザキャッシュ💡
ブラウザキャッシュとは、閲覧者のブラウザにキャッシュ（データ）を残しておくことで、２回目以降のアクセスが高速化される機能のこと💡（※ページキャッシュとはまた異なる機能なので注意！）
こちらもプラグインなしで実装できるよ💡
Lazy Load
Lazy Loadとは、サイトにアクセスした際、画面外にある画像は最初に読み込まず、ユーザーによって画面がスクロールされると読み込んで表示することです。
初期描画にかかる時間を短縮できる便利な機能として多くのユーザーが活用しています💡
多くのLazy LoadプラグインはGoogelでのSEOに対応していない？
Lazy Loadのプラグインはたくさんありますが、実は多くのLazy Loadプラグインを導入すると、Googleのクローラーボット（巡回ロボット）が画面外に何も画像がないと判断してしまうという問題があり、SEOに最適とは言えないのです💡
回避するためには、画像に<noscript>タグを付けてあげなければならないよ💡
これを知らないでLazy Loadプラグインを使うとほとんどの画像がGoogleにインデックスされなくなってしまうよ💡
今やGoogleは画像内の文字まで判別してコンテンツを識別できるらしいから少しでも認識されたほうがいいよね💡
Point！SEOとは、Google検索エンジンで上位に表示されるための要点のようなもの💡
Cocoonに標準搭載のLazy LoadはSEOにばっちり対応されている！？
わいひらさん、ほんとすごすぎる^-^；Google対応がしっかりされてました(。’-‘)さすが。
その他、Cocoonに標準搭載された機能で置き換えられるプラグインをすべて停止して軽量化できる！？
Cocoonには、他にもさまざまな機能が搭載されていて、今まではプラグインを使用しなければ実現できなかった機能がテンプレート独自の機能で実装できてしまいます💡
ここからはCocoonの機能を使うことで不要になった、今までお世話になっていたプラグインを一挙に紹介します💡
（１）Table of Contents Plus
今まで、記事の目次を付けるために「Table of Contents Plus（TOC）」というプラグインを使用して自動的に出力していたのですが、Cocoonには最初から目次を付ける機能が完備されています💡
Simplicity時代にお世話になりました💡TOCがあったからこそ、見出しの再確認や執筆方法など、今の形式が誕生したと言っても過言ではない重要な存在です💡
（２）All In One SEO Pack
続いて、Wordpressを運営する上で定番となっている「All in One SEO Pack」ですが、実はかなり重たいプラグインとしても有名💡
Cocoonテーマーには優秀なSEOパックが備わっているのでこの度お世話になったこちらのプラグインも外すことにしました💡
今までありがとう⁽⁽ ◟(∗ ˊωˋ ∗)◞ ⁾⁾SEOの知識を学ばせてくれました💡
（３）wordpress popular posts
こちらは、ブログの人気記事を期間別のランキングで表示できるプラグイン💡このプラグインもなかなか重たいことで有名でしたがとても便利で使っていました。
Cocoonには人気記事を表示する機能もついているのでこちらも外すことに💡
人気の記事を確認したり、逆に人気の無い記事を探してリライトするためにお世話にになりました💡
（４）Autoptimize
AutooptimizeはhtmlやCSS、Javascriptを圧縮して、さらにブラウザキャッシュを作成して高速化するプラグインです。
こちらもCocoonの機能で紹介したとおり、置き換えられる機能なのでこの度外すことになりました。
Cocoonってなんでも揃っててすごい！
（５）WP Lightbox 2
WP Lightbox 2は、画像をクリックした際に拡大表示するためのプラグインです💡こちらも意外と重たいのです^-^；
この機能もCocoonに標準搭載されているので今回で外すことになりました💡
読み込み時間で480ms（0.5秒弱）くらい短縮できたよ💡
（６）Master Slider
こちらはWordpress界ではかなり有名なスライダープラグインですね💡
インストールすれば誰でも簡単にスライダー（カルーセル）を表示できるということで、$24でライセンスを購入してずっと使用していたのですが、機能が豊富すぎて重たい^-^；
そんなわけで、当サイトではすべてのスライダー（カルーセル）表示を「Slick」というとても軽いスライダーアプリケーション（Javascript）に置き換えることにしました💡
このSlickですが、本来は公式サイトからJavascriptファイルをダウンロードして設定するという手順で使用するのですが、Cocoonでは最初からカルーセル機能としてSlickが読み込まれているのでそのまま使用することができます💡
スライダーを全部Slickに変えたら軽い！
公式サイト！
（７）Classic Editor
ちょっと前の更新で、Wordpressではブロックエディタという編集画面が採用されてしまい、今までのエディタを使うにはClassic Editorというプラグインを導入する必要がありました。
新しく始める人には使いやすいのかも知れませんが、僕のようにもう10年近くも旧エディタを使っていると今更新しいエディタを覚えるなんてめんどくさくてできません^-^；
旧エディタのほうが使いやすいって方は多いはず💡
Cocoonテーマなら設定でクラシックエディタに戻せるからすごい！
今まではプラグインを使って旧エディタに戻していたのですが、Cocoonなら設定画面の「Gutenbergエディターを有効にする」からチェックを外せば元通り💡
プラグインは必要ありません💡
プラグインが１つ減った💡嬉しい💡
投稿画面のデザインは実際のページと同じ！
一般的にWordpressの投稿画面って、質素なデザインじゃないですか？完成形がよく見えないというか。
でも💡Cocoonでは、実際にユーザーに表示されるデザインそのままの形で編集することができるのです💡（このあたりはSimplicityでも設定してたからできてたんだけどね💡）
完成形を見ながら文章を書けるのは嬉しいね💡
ブログはコンテンツが最も重要！でもサイトのユーザビリティも大事！？
と、ここまで長々とサイトを高速化する方法について書いてきましたが、なんだかんだ言ってもやっぱりいちばん大事なのは記事の内容ですよね💡
どんなに表示が速くても、そこに何も書かれていない白紙が置かれていても誰にも見てもらえないのです💡（真っ白なページの表示は速いです・・・）
でも、そこにコンテンツを足すことによって初めて「需要への供給」と「表示の重さ」が誕生します。
Point！
- どんなに表示が速くても、真っ白なサイトだと見るものが何も無い💡
- どんなに素晴らしい内容でも、重すぎてアクセスできない人がいたら、その人にってそのサイトは無いものと同じになる💡
- 結果！両者とも何も無いのと等しくなる💡
表示が速くて真っ白な画面よりは、重くたって少しでも多く需要を満たすものの方が価値があるんじゃないかな💡
軽くすることよりも、まずは内容を充実させることを考えて、その結果重くなってしまったら軽量化する方法を考える！
それが大事ってことだね💡
そうだね💡そのバランスを考えることが今後の課題になりそう💡
あと💡一説によると、リンクをクリックして3秒以内に表示されないとブラウザバックされる率が一気にあがるんだって💡