Menu/Prof
スズキマコト
自由人
元々は楽器屋のギター兄ちゃん。
趣味でプログラミングしてるうちに
本職になってしまった人。

過去に喋っていた言語
c pascal Assembler
perl PHP Python Ruby など
javascriptなどは都度必要に応じて。
最近Mac買ったのでswift勉強してます。

体ぶっ壊して死にかけたので人生RESET中。

SWELL 高速化

X
     この記事はプロモーションを含みます
contents

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

全3部作になるのでお時間可能であれば全部見てください。

失敗も成功も含めて意味ある構成にしてみました。

各記事末尾にリンク張ってます。

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

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

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

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

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

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

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

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

まずはご存じ 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なんかの実行速度はクライアント側の問題なので

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

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

けどね

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

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

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

使用する各種プラグイン

スクロールできます
EWWW Image Optimizer画像の最適化プラグイン コレ入れる前にでかいままアップしちゃった画像もしっかりあとから全自動でリサイズと圧縮できちゃう優れたプラグイン。
推奨されるwebP形式の画像変換も全自動で無料で可能
SWELLと相性が悪いって話も聞きますが筆者は特に問題はおきてません。
私は無料版ですがコレ入れているおかげで画像デカいままでガンガンUPしちゃってます。
勝手に圧縮、勝手に指定サイズにリサイズしてくれるのでほんと超ラク。
入手先通常
Flying Scripts by WP Speed Mattersこれはjavascript遅延読み込みプラグインなんだけど機能的にはSWELLに搭載しているものと等価かな。SWELL側で処理しても良い。筆者は問題が起きた時のの切り分けしやすさとSWELLの入力フォーマットがコンマ区切りでめんどくさいので試しにこっちにしてみただけ入手先通常
WP Fastest Cacheこれが超高速と自称するスタティックHTML生成装置。 無料版入手先通常

WP Fastest Cache Premium
お金に余裕があるならPremium版に。フル機能開放
よく似た有名な爆速WP-rocketは年間サブスクであるがコイツは買い切タイプ。
税込$49.99
支払い方法は クレカ払い PayPal払い GooglePay払いに対応。
筆者はGooglePayで安全に支払いました。
データーベースのオプチマイズができるので主にそれが目的なんだけどw

ただSWELLの作者様は WP-rocket派らしいので将来的に世界最速のキャッシュプラグイン言われるWP-rocketとSWELLは相性の良いプラグインになる可能性は高いっすね。
こちらはサブスクで$50/year くらいだったかなー興味ある方はぐぐってくだされ
アカウント作ってメール認証終わると
無料プラグインからダウンロードページに飛べるようになるのでダウンロードしたら手動でインストール
一覧

EWWW Image Optimizer

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

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

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

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

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

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

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

画像の遅延読み込みのオプションは今回はコイツにはやらせません。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を特定して遅延読み込み指定して

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

高速化するって考えね。

デフォルトの5秒遅延で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が勝手にやってくれてた笑 賢いのぉ

導入前は モバイル36点 PC90点 でした。

導入後(WP Fastest Cache 無課金)

モバイル

モバイル

PC

PC

導入後2(WP Fastest Cache 課金)

モバイル

PC

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

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

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

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

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

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

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

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

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

結論

しばらく使っての感想。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

いまも投稿しながら計測してみたけど (2・24 午前1時くらい)

モバイルで 最低34 最高60

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

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

https://gtmetrix.com/

こっちは悪く無いなw

あ あと 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 をローカルロードするって奴。 しばらく試してみる。

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

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

シェアしてくれると喜びます
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

makotoのアバター makoto Blogger&YouTuber

サーバー管理者として17年ほど仕事でサーバー触ってました。
www,mail,dns,sql各鯖をすべてFreeBSDで運用してましたが現世ではかなりレアなタイプになるみたいですね笑

viやシェルスクリプトとかperlとかgccとかFreeBSDとか実はbashよりtcshが好きとか時々寝ぼけるのは
その名残でしょう。

今まで縁の下の力持ち的な他人のためにプログラムを書き他人のためにサーバー構築し他人のためにWEBサイトを創る的な世界から
自分の好きなことに集中できる環境は実に気持ち良いですね。
現役は引退済みなので難しいことはやりませんしやれません。

現在 ほぼ自由人。

contents