【WordPress】WEBサイト高速化作戦part1〜現状把握と対応検討〜【PageSpeed Insights】
どーもこんにちわ！K-BA LIFEの中の人です！
10月は、模様替えの季節。
弊WEBサイトもテーマを「Stinger5」からTCDの「Gogeous」に変更しました。
このテーマになってから、競馬サイトらしくないデザインの良さになっていると思いませんか？（自画自賛w）
一度掃除をし始めると徹底的にやってしまいますので、今回は、題名にもある通り、弊サイトの高速化をテーマに、
記事にします。競馬と離れた内容ですが、お仕事で使用する人もいるかもしれませんし、是非ふ〜ん程度でみていただければ思います。
高速化とは
お気に入りから好きなサイトを見に行くときに、クリックしますが、中々表示されないとかありますよね？
確かに、大人気のサイトなどではアクセスが集中して、遅くなることもありますが、通常運用ではそのようなことはありません。
では、何故普通のサイトが遅いのか？
競馬サイト運営素人には、わからないんですね。
特に競馬しかしてこなかったので、こんなことわかるはずもないんですね。
WordPressを入れて、適当にプラグイン入れて、文字を書いて入ればかっこいい記事になる。
それがWordpressの良さですが、突っ込んだことは、上級者でないとできないです。
このように仕組みがよくわからないけど、クリックしてから遅いのは嫌だというサイトオーナーのために、
WordPressで作ったWEBサイト・ブログの高速化に到るまでの過程を、私が実体験を元に説明していきたいと思います。
現状把握
仕事でもなんでも、改善をする前には、現状の把握が必要です。
現状を把握し、計画を立て、実行し、効果を確認し、更に改善点を見つけるべく行動する。
これを難しい言葉で、PDCAサイクルを回すといいます。
今回のテーマでも、WEBサイトの高速化としておりますが、高速化には、聖域はありません。
早ければ早いほどいいのです。そのため、常に改善点を見つけて修正するというプロセスが重要です。
例に違わず、弊サイトでも現状把握をしてみました。
現状把握に使用したサービスは、下記。
何より簡単です。
自分のサイトのURLを入力するだけで、現状確認ができます。
私のサイトは、７０％以上がモバイルからのアクセスですので、モバイルの点数を重視しました。
結果は、上記画像の通り、
速度：６２点
ユーザーエクスペリエンス：99点
※ユーザーエクスペリエンスは、ユーザーにとっての使いやすさを重視したものです。
GoogleさんからのK-BA LIFEは、速度はそんなに早くないけど使いやすいサイトということになります。
つまり、課題としては、明らかに”高速化”のわけです。
そこで、高速化に向けて、対策を練ろうと思いますが、何をしたらわからない。。。
でも先ほどのPageSpeed Insightsをよく見ると、対策が載っています。
【最重要】
サーバーの応答時間を短縮する
スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
【重要】
表示可能コンテンツの優先順位を決定する
画像を最適化する
ブラウザのキャッシュを活用する
この上記５つを対策がすることがわかりました。
この５つの対策については、次回以降適宜更新いたします。
おしゃれさやかっこよさと懸け離れたイメージのある競馬サイトでもおしゃれに使い勝手のいいサイトを作っていきたいと思います。