Simplicity表示速度改善方法

wordpressはデータベースから記事の内容や画像の情報を取得して、画像自体は実際はアップロードディレクトリから読み込むだけですが、それらを表示しています。
乱暴に言えば、毎回処理したものを表示していると言う感じです。こういう動的なサイトというのはそれ自体がそもそも重いのですが、プラグイン等でキャッシュをすることで本来データベースにアクセスする所を既にキャッシュされた内容を返すことでより速く表示しています。

本来はキャッシュが効いていれば遅いということはないはずですが、キャッシュが効かない部分があります。その大元はGoogleアドセンスのような外部から読み込む広告です。

Googleアドセンスのスクリプト自体は同じものですからキャッシュされています。が、キャッシュされた広告コードはGoogleの広告データの入っているサーバーにアクセスして毎回広告を読み込んでいるのです。
こういった定形のスクリプトが外部にアクセスするために全体的に速度が遅いとGoogleの速度テストなんかでは言いますが、「お前ん所のが遅くしてんだよ」とはなかなか言えません。

広告収入を得る代わりに速度を犠牲にしているのは管理者なので、広告を入れなきゃいいじゃんと言われたらそれまでだからです。同じようなものに、各SNSのスクリプトもこれと同じことです。

よってこれらをまず外せば飛躍的にページの表示速度は向上すると思います。ついでに画像も外せば完璧です。wordpressと言えど、おそらくは一瞬で表示されることでしょう。

と言ってもまぁ外せないと思うので、まずGoogleは基本javascriptの読み込みにasyncもしくはdeferと言う非同期あるいは遅延読み込みのタグを入れていますので、レンダリングがブロックされることはないはずです。では他のはどうかというと、普通にスクリプトを読み込んでいるだけなので、レンダリングがブロックされるのです。

レンダリングとは、ブラウザに表示するとかデータを処理したものを描画するということです。

ブラウザはhtmlソースの上から順番に処理していきます。cssを読み込み、javascriptを解析して、htmlを読み込みそれらを処理した後、表示します。これがレンダリングです。この途中で、何かの処理待ちが起こるとレンダリングが遅れます。これがレンダリングブロックです。

これらの改善方法はGoogleのテストの結果の部分でもどうすればよいかを提示しているはずですが、簡単に書くと、

cssは圧縮
javascriptは圧縮 + asyncかdeferを入れる
画像は最適化
ムダなリソースを読み込まない

これらをしなくてはいけません。

ムダなリソースというとわかりにくいかも知れませんが、例えばyoutubeの動画などはプレイヤーを埋め込むのではなくサムネイルをまず表示させておいて、見ている人が何かしらアクションを起こした時にプレイヤーを読み込むということをすることでページの表示自体は速くすることができます。
つまり準備完了!!と言う状態ではなく、その手前、何かしてくれたら準備しますと言う状態で止めておくというのが重要です。

画像の最適化はプラグインでもできますし、手動でもできます。
cssの圧縮はテーマのcss(style.css)とプラグイン等のcssはちょっと注意が必要ですが、これらもテキストエディターのプラグインやcssの圧縮をオンラインでできるサイトもあります。
注意点は2つ。テキストエディターで圧縮されたものを展開できるプラグインや機能がない場合は必ず複製したものを圧縮する。元の状態がわからないと編集できなくなるので。
テーマcss等の先頭に/*〜*/で書かれている部分に著作権情報やテーマ情報が書いてある部分は圧縮しないと言うのがもうひとつ。

通常、圧縮というのはコメント部分とムダなスペースをまず無くします。なのでテーマの情報等が書かれている部分は圧縮をかけると無くなってしまうことがあると思うので、その部分以外を圧縮するという感じかと思います。

javascriptの圧縮も同じようなことです。が、圧縮してみて何かしらエラーがでた、もしくは上手く動作しなくなったという場合は何かしらスクリプトの書き方に問題があるのでそれらを修復してからでないと圧縮してはいけません。といっても試してみないとわからないんですけども。

async、deferをつけるというのは、まずそのスクリプトがdocument.writeを利用していないかを確認して、利用していない場合で、そのスクリプト単体で読み込み順序とかが守られてなくても動作するようなものはasyncで非同期にしても問題ありません。
ドキュメントが完成してから動作するようなものはasyncにすると、ドキュメントが読み込まれていないのにスクリプトが先行して動作する場合があったりして問題が出る可能性があるのでdeferで遅延読み込みをします。

これらは、wordpressでもつけることができ、英語ですがこちらに詳細が掲載されています。

wordpress4.1から搭載されたscript_loader_tagと言うフックでスクリプトの読み込み時にdeferなりasyncをつけると言う事をするわけです。

更に広告、またその他の場合は、dns prefetchをヘッダタグに入れることでDNSルックアップ（名前解決）を先に行う事ができるようになります。これは何でもかんでも入れたら良いかというものではなく、効果的に使うことで意味をなします。
先に行うということは、他を後にするということなので、何を先に行うべきかを考えなくてはいけません。

DNSプリフェッチでWebサイト高速化など参照の事。

こういうふうな感じです。ただしこれはブラウザで先読み設定をしている場合はほぼ効果はありません。効果があるか無いかは、実際に試してみてスピードテストなどを行い、効果があるようであれば継続、ないようであれば止めるということを試行錯誤します。
人によってこれら設定がしてあったりなかったり、またどのサーバーを読みに行くかはそれぞれなので全く効果がないというわけではありません。

ひとまずこれらを行う事で若干の体感速度は向上するかと思います。がSNSを取り、Googleアドセンスを外し、画像も外したものに適うものではありません。
これらを入れた状態で高速に表示するためには、より高速に動作するサーバーを選ぶしか無いかと思います。