ブログの表示速度を劇的改善させた

2019/10/24

このブログでの収益がここ数年落ち込んでいてちょっとでも改善しようと思ってSEO対策に乗り出す事にしました。
ブログ開設から半年で成果を出すような辣腕アフィリエイターの方もいますが、私のブログは現在の形態になって10年。それ以前を含めると20年以上のキャリアがあるにも関わらず、収益はGoogleアドセンスでいえば年1回程度の支払いでした。これでもサーバーレンタル費用は賄えるので何とかなっていましたが、ここ数年はロクに記事をアップしていないせいか1年半に1回以下の支払いペースに落ちており、何とか改善を図りたいと考えてSEO対策を行うことにしたという次第です。

ジャンル絞ってまともな記事を書けば収益が上がるのでしょうが、今のところそれが目的ではないので今の形態で収益アップを図りたいと思います。

SEO対策と一言でいても何をすれば良いかが分からない

SEO対策って何すりゃよいの?正直全然わかりません。推したいキーワードを書きまくってクローラーに認識させて、キーワードでの検索順位を上げる様なことも過去に事もやってましたが、ここの様な雑記ブログにはあまり影響しなさそうです。という事で他に対策結果が評価可能な数値目標が無いかを考えました。

Google Analysticsが教えてくれたPagespeed Insight

ブログの訪問者の動向を分析する「Google Analystics」は昔から導入しているのですが、これの見方が分からない。分かったところでどう生かすかも良く分からんのですが、ページの表示速度が何やら問題っぽいことをチョイチョイ言うてたので、Google PageSpeed Insightでブログの表示速度を分析してみました。

結果は・・・35ポイント。0-49は低ランクのらしく明らかに問題があることが分かりました。
89-50が分布の中央値の様なので、最低でも50以上に上げることを目標にして対策する事にしました。

以下にやったことを書いていきますよ。
私はシステムエンジニアですがWEBは専門外なので素人さんと何ら変わらない知識しか持ち得ていません。そのため難しいCSSのカスタマイズなどは一切できないのでプラグインが頼りになります。

WordPressのバージョンアップ

長い間、放置しっぱなしだった事もありWordpressのバージョンアップを行わずにいました。たしか4.7か4.8だったので、まずは最新の5.2へバージョンアップしました。Wordpressの動作用件でPHPのバージョンアップが必要だったため、PHPもバージョンアップを行いました。後で分かりましたが今まで利用していたPHP 5.xよりも7.xの方が動作が高速になっており、Pagespeed Insightでの評価アップにもつながった様です。

データ圧縮

単純にサーバーからクライアントへのデータ転送が遅いらしく、対策としてCSSやhtmlなどのテキストデータを圧縮すれば、クライアントへ送るデータ量が減ることでパフォーマンスアップに繋がるそうです。
サーバーに保存しているデータを圧縮するのではなく、.htaccessというWEBサーバーにどのような動作をさせるか定義するファイルにパラメーターを書き込むと、クライアントとの通信時に動的にデータの圧縮が出来る様になるそうです。

ググって出てきた記事を参考に「.htaaccess」を編集し、データの圧縮が有効になり速度改善が出来ました。同時に出ていた無駄なCSSファイルへのアラートも丸っと圧縮することでパフォーマンスが改善して消えました。参考にしたのはこちらのサイトです。
Apacheのmod_deflateでコンテンツを圧縮してサイトを高速化する方法

画像の遅延読み込み

クライアント側で画面外(スクロールして表示する部分)の画像を後から読み込ませる事で、初期応答をよくする改善だそうです。これは[Lazy Load」という専用のプラグインがありましたので導入して一発解決が出来ました。

https://github.com/verlok/lazyload

クライアント側でのデータキャッシュ

初回のサイトアクセス時にクライアントのローカルキャッシュに画像やHTTP/CSSなどのデータをキャッシュさせておき、2回目以降のアクセス時に利用することでパフォーマンスを改善する仕組みです。こんなの指定しなくても勝手にローカルで溜めてくれれば良いのに、サーバー側で定義してやる必要があるそうです。
これも.htaaccessを編集することで対応できました。

CSS,JSなどの最適化

CSSの中身とか良く分からんのでプラグインに任せたいなーと思っていたら「Autoptimize」という良さげなプラグインがあったので導入しました。
設定方法はググってみてなんとなくポチポチとチェックすればOKでした。

PCサイトのパフォーマンス値が劇的改善!!

ここまでやってGoogle Pagespeed InsightのPC向けサイトのパフォーマンス値が「99」と、ほぼ限界までチューニングが出来ました!!
自分でサイトにアクセスしてみても体感できるほど早くなったとは思わなかったのですが、クローラーがアクセスするときの速度はかなり改善されたのでしょう。

しかしモバイル向けサイトはまだ50を超えることは出来ない・・・

モバイル向けはレスポンシブルと言ってクライアントの機器に合わせて動的に生成しているため、サーバー側の処理が遅くなっている事がパフォーマンスが悪い原因の様です。
アクセス時に動的に生成するのではなく予め生成したページをキャッシュして表示させれば良いんじゃね?という事で、そんなプラグインがないか探したら「W3 Total Cache」というプラグインがありました。
設定方法は例によってググって適当にポチポチとやるだけ。

モバイル向けも66ポイントを達成

これで遂にモバイル向けサイトも「66」まで改善することが出来ました。80台乗せられればと思ったのですが35からの改善なので随分良くなったと思います。

これでどれくらいアクセスが改善するのかはわからないですが、しばらく様子を見てみたいと思います。
まぁ本当の改善は「素晴らしい記事を書く」。これに尽きると思います・・・

↓ブログ村のランキングに参加しています。ポチっと押して頂けると嬉しいです♪ にほんブログ村 自転車ブログ ロードバイクへ

-Webサイト構築