SWELL 高速化

>>Amazonのお得な最新のタイムセール情報はここ

サーバー管理者歴17年の筆者が選んだレンタルサーバーはここ

ドコモ home 5G「キャッシュバック10,000円」を進呈中！

SWELLの高速化も考えてみよう。

僕達のお気に入りのSWELLは特に何もしなくてもそれなりに高速に動作はしてくれてる。

でもモバイルサイトに関してはWEBサイトの速度の指標のサイトからの

判定は余り速くない判定が出ること多いかな。

昨今Google先生も「モバイルフレンドリーにしましょう」と声高に言っているので

SEO対策としては今後とも結構重要な項目みたいなのでなんとかしてみたいと考えます。

ただあんまりこだわり過ぎて肝心のライティングが疎かになるのもよくないので

程々にチューニングは程々にｗ

クロックアップとか好きな人はハマる作業ですｗ

まずはご存じ PageSpeed Insights

これに自分のBLOGのURLを入れて 「分析」 ってやれば色々と教えてくれます。

大まかな見方とすれば点数がでるのでそれを見れば良いか悪いかはパッとみわかる。

その下に何が遅い原因か色々とアドバイスくれているので

コレを一つ一つ潰していけば速度に対するSEO対策が確実にできるって言うのが本質。

僕は今回この速度を少しでも速くするために複数のプラグインを試した。

ただ入れただけだと機能がダブっていたりしてプラグインでOFFにしても

他のプラグインでONになっているために遅延読み込みが外れないとか

結構面倒なので その辺りもわかりやすいように説明しておくね。

そもそもSWELLにはテーマ内に色々高速化機能を持ってる

皆さんも見たことあると思うけど SWELL設定の中に 高速化 って項目がある。

普通に使うならぶっちゃけここだけの高速化で結構速くなる。

安定に高速化したいならベータ機能は外しておいて

あとモバイルとかに制約ある部分も外して

あとはONしておいてもいいんじゃないかな。

javascriptの遅延読み込みも作者さんは作られているので

遅延読み込みに関してはコレを使うべき。

前述の PageSpeed Insights で確認すると遅いjsや

メインのレンダリングを遅延させてる犯人を教えてくれるので

その見方を参考にここに記述をしてくれ。 後で説明するよ。

筆者はスタティックなHTMLを生成して普段はそれを表示させるという

古来からある高速化を試してみたかったので今回はSWELLの高速化ルーチンは

あえて実験の為ほぼ使わない。

今回の実験ではSWELLの高速化の機能は SWELL自身が使用している

自分用のcssをインラインで読み込ませて高速化するオプション

だけ使用させていただいた。

前述した通りWordPressは基本的にHTMLを動的に生成しているので

つまりユーザーが来訪する度に必要なHTMLを作り出し

それをユーザーのブラウザが読み取って表示しているというプロセスで動いている。

現在生き残っているBLOGのシステムはWordPressをはじめ基本はこの形だね。

動的に生成されたHTMLをキャッシュ化して記事や画像に変更がない限りは

そのキャッシュがあたかも今生成されたHTMLのように振舞って

全体速度を速くしちゃえってのが今回の目的。

サーバー側としては一番負荷の軽いHTMLのテキストファイルを

表示するだけでよく基本的に超高速に動作することが可能になる。

javascriptやcssなんかの実行速度はクライアント側の問題なので

送出する方は気楽でいいｗ

莫大な数の同時アクセスがあった場合とかは動的か静的かはものすごい差になる。

けどね

1日数人しか来ないよな僕のBLOGだとほぼ自己満足の世界

でもあるというのは覚えておいてくださいｗ

でも頑張ってSEO対策になるのかも？の実験や＠＠

使用する各種プラグイン

EWWW Image Optimizer

画像見てオプションは真似しとけばOK^^

画像のリサイズ値は自分の環境にあわせて任意でOKです。

あまりでかい画像だとSEO的に不利になるのですが

逆に筆者が設定してる1024×576だと画像クリックした拡大画像が

拡大にならないレベルなので難しいところだねぇ

今回のこの画像は1920×1080でサイズ指定しなおしてUPしました。

拡大しても小さ過ぎて読めなくなるのでｗ

画像の遅延読み込みのオプションは今回はコイツにはやらせません。OFFです。

但し後述のWP Fastest Cache完全無課金で運用する場合は

EWWW Image Optimize で遅延読み込みはONにしてください。

WP Fastest Cacheも画像オプティマイザー付いてるのですが

買い切りの割に画像処理だけ都度課金みたいな奴なんだよね。

やれることはEWWW Image Optimize同じなんで

画像処理はコイツに任せる。むしろこっちの方が使いやすい。

筆者は実験のため有料版のWP Fastest Cache使うので

画像遅延読み込処理もWP Fastest Cache にやらせてる。

HTMLキャッシュと同次元で管理して問題が起きた時に

管理しやすいようにそうしてみた。

ぶっちゃけどちらにやらせても得られる結果は同じなんで

あっちこっちに同じ機能あると問題起きた時にめんどくさいので

何を使って処理させるかは各自で決めてください。

Flying Scripts by WP Speed Matters

コイツも特に説明は必要ないかな。データーの入れ方は後で説明する。

考え方としてはPageSpeed Insights で出てきた結果を見て

原因となるjavascriptを特定して遅延読み込み指定して

レンダリング中のブラウザの邪魔をさせないようにして

高速化するって考えね。

デフォルトの５秒遅延でOKっす。

WP Fastest Cache

今回の実験の真打登場。

無課金で使える部分はオプション マークしている部分がそう。

取り敢えず全部ONで良い。

なんか問題おきたらcssやjsのオプティマイズを外して様子見る。

ちなみに色々変更した時は必ずキャッシュはクリアした方が良いっていうかしましょう。

キャッシュに邪魔されて変更が分からない事が多数発生する。

有償版の場合はSQLクエリーを減らす 以外は全部ONで大体大丈夫。

上で言ってた画像遅延読み込みは 1番下のLazy Loadってのがそうです。

有償版ダウンロードはお金を払った後でメールくるのですが

文中のここのリンクからダウンロードが死んででダウンロードできないので

ここのプレミアムのタブから落として下さい。

導入して悶えた結果

やったこと

1. まずサイトのTOPをスライドショーをやめた。シンプルに。
2. TOPページのGoogle広告を外した（記事内はそのまま）
3. アップロード済み画像のサイズを一括リサイズと再圧縮
4. webP化してなかったのでこれも一括生成した
5. GZIP転送してやろうと mod_deflate.c を 宣言しようと準備してたら
   WP Fastest Cacheが勝手にやってくれてた笑 賢いのぉ

導入前は モバイル３６点 PC９０点 でした。

導入後（WP Fastest Cache 無課金）

モバイル

PC

導入後２（WP Fastest Cache 課金）

モバイル

PC

まぁそれなりに結果でましたがここまでなるのに相当苦労した。

PageSpeed Insights からのリザルト問題のあるスクリプトの名称を引っ張り出す

こんな感じで一覧出るのだが

出てきた名称をマウスでクリックしてやるとブラウザが立ち上がるので

その立ち上がったブラウザのURLをコピーしておく。

そのURLを http:// を外したものを javascript遅延設定に書き込む。

ただ上記は既に対策済みで遅延させることができない

スクリプトの一覧になっちゃてるけどｗ

コイツが指定しても遅延できないねぇ まぁ書式はこんな感じ スクリプトの名称一部でもいいんだけど
長めに書いた方が安定するみたい。

結論

しばらく使っての感想。

悪くは無いが頻繁にCSSとか更新するときは

やはりキャッシュ系はめんどくさいし

効果は特段満足はできていない。

まぁ僕の設定が甘いのだと思うが

遅いからキャッシュで簡単になんとかしてしまえって考えは

根本的な問題を解明する姿勢としては正しく無い。

手軽ではあるのですがねー。

PageSpeed Insights から出てきた点数は参考までに。

ちなみに検査する時間帯によっても数値はバラバラ。

つまり広告やGoogleのサチコやアナリクスのスクリプトなどの

第三者スクリプトに足を引っ張られるので

広告外すとかタグでも外さない限り更なる高速化は無理だと判断。

これに関しては別の実験で対策するので次以降の記事で確認してみてください。

なので程々でいいんだよ 実際自分でサイトアクセスして

サクサク動いていればOKだとほんと思った。

いまも投稿しながら計測してみたけど （２・２４ 午前１時くらい）

モバイルで 最低３４ 最高６０

まぁ無いよりマシだと思ってるけど

足引っ張られるとほんとあてにならんわ。

https://gtmetrix.com/

こっちは悪く無いなｗ

あ あと WP Fastest Cache の生成されたキャッシュは

程々でお掃除した方が良いみたいです。

ブラウザから簡単にできるのでちょいちょいやることにします。

2/24 追記

やっぱ画像処理 EWWWにやらせた方がいい気がしてきた。

餅は餅屋にってことか。 しばらくコレで様子見る。

なので WP Fastest Cache の Lazy Load オプションは外した。

2/26 追記

Flying Scripts by WP Speed Mattersは 外した。
代わりに
Flying Analytics by WP Speed Matters こっちを試している。

これは Analytics の js をローカルロードするって奴。 しばらく試してみる。

あわせて読みたい

SWELLの高速化 その２ SWELLの高速化 SWELL純正の機能を使う みなさんSWELLしてますかー？ SWELLの高速化を興味本位であれこれ試している段階なのですがやはりSWELL純正の高速化機能も試さな…

筆者 がお世話になってるレンタルサーバー2つと有償テーマのSWELL。
テーマもサーバーも1番大事なのは速度（レスポンス）です。

長い時間付き合う仲間たちです。レスポンスが良いもの使った時の時短の長期間の累積を考えてみてください。1番経費をかけておく部分だと私は考えてます。