Simplicity2 から Cocoon に移行して軽量化に成功できた設定の話

この記事は約 7 分で読めます。

先日よりWEB業界およびブロガー界隈で話題になっていた、Google の MFI(モバイルファーストインデックス) および スピードアップデート。

ページの読み込み速度をモバイル検索のランキング要素に使用します
Google フレンドリーなサイト制作・運営に関するウェブマスター向け公式情報
グーグル「スピードアップデート」ついに開始! モバイル表示速度が検索ランキング要因に【SEO記事12本まとめ】 | 海外&国内SEO情報ウォッチ
モバイルページの読み込み速度をモバイル検索のランキング要因として使用するグーグルの「スピード アップデート(Speed Update)」をわかりやすく解説する。
グーグル、スピードアップデートを正式導入 
グーグル、スピードアップデートを正式導入 

これらに対応していくために、当サイトも高速化を図っていくことにしました。

その際、1年半利用させていただいた無料テーマ「Simplicity2」から「Cocoon」に移行することにしました。

この記事は、それによって得られた効果や設定の記録となります。

どなたかのお役に立てれば幸いです。

スポンサーリンク

テーマの変更

変更前:Simplicity2

Simplicity
内部SEO施策済みのシンプルな無料Wordpressテーマを公開しています。初心者でも出来る限り分かりやすく使えるように作成しました。

Simplicity2 および Simplicity2 子テーマ をそのまま利用させていただいていました。

色んなカスタマイズができ、当時WordPress初心者だった匠は設定に夢中になりました。

今思えば、かなりのプラグインを代用できることが分かっていて、ちょっと勿体ない使い方をしたな、という部分もあります。

変更後:Cocoon

Simplicity2と同じ「わいひら」さんが作られています。

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。

こちらの親テーマおよび子テーマを活用させていただいています。

無料テーマながら、高機能 かつ 高速な表示スピードという点が非常に惹かれます。

また、Simplicity および Simplicity2 で培った経験を元に作り直したという点、洗練されていることは間違いありません。

フォーラムの盛り上がり、別の人がスキンをどんどん作られている様を見て、ファンの多さが分かります。

変更の決め手

Cocoonを使えば必要なプラグインを減らせる!

これに尽きます。

表示が速くなるのでは?という淡い期待もありました。

しかし、冷静に考えると、プラグインと同じ機能を実現する以上、大幅な高速化を期待するのはどうかな、と思っておりました。

テーマ変更によるねらいは、プラグイン管理のシンプル化

あくまで複雑になりがちなWordPress管理の軽減でした。

・・・

実際には、それだけでは終わらなかったんですけどね。(後述)

スポンサーリンク

プラグイン管理の効率化

利用をやめたプラグイン

同時期にVPS(Kusanagi)に移行しましたので、必ずしもCocoonだけの効果とは言い難いですが、プラグインをいくつも辞めています。

Cocoon に移行して辞めたプラグイン

  • Newpost Catch
  • Page Builder by SiteOrigin
  • SiteOrigin Widgets Bundle
  • Speech bubble (ふきだしプラグイン)
  • Table of Contents Plus
  • WordPress Popular Posts

この中で最も大きいのは「Page Builder by SiteOrigin」「WordPress Popular Posts」を辞められたことです。

負荷が高いと分かっていながら、サイトの作りや相性からやめられなかったプラグインたち。

Cocoonの機能が代用してくれて、しかも速い!ということから、無事に辞めることに成功しました!

kusanagi に移行して辞めたプラグイン

  • 001 Prime Strategy Translate Accelerator
  • Easy Updates Manager
  • WP Fastest Cache

Cocoonとは関係ないですが、キャッシュや更新系を移行することができました。

この時にかなりキャッシュについて勉強できたので、またそれは記事に書きたいと思います。

移行しなかったプラグイン

Autoptimize

当初、こちらをCocoonに移行できると踏んでいたんですが、どうも辞めてしまうとスローダウンしてしまうことが分かりました。

どうやらキャッシュやMinify以外にも効いてる仕組みがあるようでした。

たぶん、スクリプトの結合やインライン化だと思うのですが、具体的には解明できず。

ただ、遅い原因になってるわけではないので、利用継続することにしました。

All In One SEO Pack

よく遅い原因の一つとして、批判されがちなプラグインです。

当サイトはSEOをガンガンやってはいないのですが、それでも検索エンジンでの見え方くらいの設定には使っています。

そのため、タイトルや抜粋などのメタタグ情報を全て手で移行しなきゃいけないかなぁ、なんて思ってました。

それでも数百ある記事を全部手でやるのは大変だなぁと憂鬱になっていました。

そこで見たのはこちらのフォーラム。

all in one seo のディスクリプション 設定を引き継げると嬉しいです
わいひらさん、こんにちは。Simplicityの時から、良いテンプレートだなぁとチェックしていて、たまたまサイトのリニューアルを検討していた時にCocoonのβ版リリースをみつけて、即座に飛びついてしまいました。 管理画面での設定もとても解りやすくて最高です(^^   さて、今運用しているサイトが2...

All in One SEO Packでメタタグを出力する機能だけを使うなら、PHP処理の違いなだけだと思うので、そこまで高速化には影響しないと思います。多分。おそらく。
出力されたメタタグにより速さが違うということはないと思うので。

わいひらさんのコメントに納得して移行を辞めました。

実際問題、このプラグインを使ったまま、かなりの高速化はできているので良いかな、と。

List category posts

カテゴリのリストを記事に埋め込む機能です。

この機能はCocoonにも実装されていないようですから諦めました。

ほかにも同じようにいくつか実装されても良さそうなプラグインはあったのですが、現状では高望みせずにそのまま利用継続しています。

スポンサーリンク

Cocoon で高速化する工夫

高速化するために、いくつか設定して効果がありました。

Cocoon

Cocoon高速化設定

Cocoonのブラウザキャッシュ機能のみ利用しています。

HTML、CSS、JavaScriptの縮小化は利用せず、 Autoptimize を利用しています。

下のAutoptimizeとの被りが気になりますが、影響が分からないのでそのままに。。。

Autoptimize

上記の通り、HTML、CSS、JavaScriptの縮小化に使用を継続しています。

恐らくキャッシュ機能と各スクリプトをインライン化するがあるので、そちらが上手く働いて高速なんだろうと考えています。

Autopitimizeの設定

うちの設定はこんな感じ。細かくOn/Offして試した結果、こうなりました。

CDN: Cloudflare

CDNに Cloudflare を使っていて、プラグインもそのままです。

他のプラグインと被る部分がいくつかあるんですが、とりあえず Cloudflare のものを優先して使っています。

cloudflare Minifyの有効化

cloudflare rocket loaderの有効化

とりあえず、上のように Minify とRocket Loader は有効にしています。

そこをすり抜けたものはプラグイン側で処理する算段。

ホントに意図通りに効果があるのかは計測してみる予定。

JavaScritpチューニング

どうやらブロッキングが発生していたので、下記のプラグインを使って解消しました。

Async JavaScript
Async Javascript lets you add 'async' or 'defer' attribute to scripts to exclude to help increase the performance of your WordPres …

この中で下記の通りに設定しました。

AsyncJS設定

  • 「jQuery Method」に Defer を選択した。
  • 「Scripts to Defer」に bookmark_button.js,jquery-migrate.min.js を入力した。

今のところ、表示に不都合は出ていませんし、ブロッキングは解消されました。

失敗:CSS チューニング

CSSによるブロッキングも出ていました。

どうやら「font-awesome.min.css」が問題になっているようでしたが、これだけはどうしても解消できませんでした。

こちらで font-awesome および font-awesome-style を設定してみましたが、表示が崩れてしまいました。

roberts91/wp-async-css
Contribute to roberts91/wp-async-css development by creating an account on GitHub.

なんとかならないものかとわいひらさんに相談してみましたが、ダメでした。。。

font-awesome を読み込まないorブロッキングしない設定
いつも素晴らしいテーマを使わせていただき、お世話になっております。最近、Simplicity2 から Cocoon に移行させていただきまして、非常に多機能かつ高速になり重宝しております。 そんな中、チューニングを重ねましたところ、「font-awesome」に関するcssファイルの読み込みによって...

たしかに読み込ませない設定にしてみると、色んな箇所でアイコンが消えていて大変なのは分かりました。

これは他のアプローチで解消 もしくは解消しなくても済む方向でいかないといけないのだと感じました。

なぜか数日経った後、この指摘は消えていました。PageSpeed Insightの気まぐれだったのでしょうか。。。
スポンサーリンク

Simplicity2 から Cocoon に移行した後の計測結果

かなり高速化できたので、下記をご覧下さい。

なお、計測したのは先月最もアクセスの多かった下記のページです。

Windows 10 の動作を高速化!目に見えて効果がある5つの簡単な設定
Windows 10 がリリースされ、既に数年すぎています。みなさま、上手く使いこなせていますでしょうか?かくいう匠も以前と同じ使い方をして、「どうも違うぞ?」と感じることが未だにあります。その1つにOS動作の高速化(チューニン...

PageSpeed Insight

pagespeed cocoon導入後の結果

もちろんCocoonだけの効果ではないのですが、右側の通り、100点近い成果が出ている点に注目です。

これはかなり満足高い!

GTmetrix

GTmetrix cocoon導入結果

スピードだけ見ると、まだまだ感があります。

しかも、何度かやるとバラ付きが大きいのがわかりますが、とりあえず10秒かかることはなくなりました。

あとは インフラやキャッシュのチューニングをする必要があります。

スポンサーリンク

結論:Simplicity2 から Cocoon に移行は成功か?

成功と思っています。

10個もいかない程度ですが、プラグインを少なくすることには成功しました。

もう少し無理矢理にでも移行すれば、あと2~3個はいけそうですが、労力に効果が見合わないと感じました。

しかし、最初からこのテーマを使っていれば、かなりのプラグインを抑えられるのは間違いありません。

その上、かなり高速表示に長けたテーマですから、非常に有用だと感じました。

正直、このテーマがあれば有償のテーマの必要性をまったく感じていません。はい。

このタイミングに併せて、OSやデータベース、キャッシュについてチューニングをしました。

そちらで大幅に高速化できましたので、それは別の記事で紹介する予定です。

ITセキュリティを生業とするエンジニアという名の社畜です。妻と子供一人と共に、毎日を楽しく生きてます。このブログを通じて、ただひたすらに共有欲を発散しています。詳しいプロフィールはこちら