ブログ記事が３０記事まで増えてきて、気になっていたのがサイトの表示速度。
使用しているTHE THORは表示速度が速いテーマと思い込んでいたこともあり、表示速度を気にすることがありませんでした。
しかし、記事が増えるとともに、使用する画像も増えてきたため「本当のところ、こんなに画像をバンバン貼ってるけど大丈夫なの？」という思いがぴよすけに生じてきました。
この記事はサイトの表示速度向上を、画像で説明しながら解説してあります。
実践前と実践後の速度比較だけでなく、速度を向上させることの所感もまとめました。
表示速度は測定したほうがよい
検索順位を上げるための方法について調べていると、複数の方が「サイト表示速度が検索順位に反映される」ということをおっしゃっていました。
ぴよすけはこれまで、サイトの表示速度が遅いと感じることがありませんでした。
ブログ生活１ヵ月を超えてもなお、サクサク表示されています。
そのため今まで一度も計測したことはありません。
ちなみによくよく調べてみるとGoogle先生も次のようにおっしゃっていました。
・ウェブページの表示速度は Google 検索での順位決定要因にもなり重要
・ウェブページの表示速度が遅いほど、コンバージョン率に悪影響がある
・ウェブページの高速化では、表示にかかる時間、リクエスト数、ページ容量が重要
・Test My Site を使用し、自社のサイトに必要なアクションを確認する
ふむふむ…やはり表示速度が速いほうがいいに越したことはないわけですな。
記事が増えてきたものの、まだ３０記事程度…
もし何か手立てを打てるなら早いうちに打っておこう！というぴよすけの興味本位から、今回速度を測定することにしました。
表示速度の測定方法
では実際に表示速度の測定をしてみましょう！ということで用いたのがPageSpeed InsightsというGoogleのサイトです。
このサイトの赤枠①に自分のブログURLを入力し、②の分析をクリックするだけで、速度が測定されるという便利なツールです。
出てきたぴよすけの結果がこちら。
まずパソコンの表示速度。
７２…まぁそこそこの数値なんでしょうか？
でも色が黄色表示なので、見方によってはあまりよろしくない数値かも…
続けてモバイルページ。
はい、完全に遅いですね。笑
２９って…
あまりの数値の低さにびっくり。
テストの平均点が６０点くらいですよ～と言われているのに２９点とった時の気分。笑
なんとか数値を上げるべく、改善しましたよ。
サイトの現状
まず改善する前にサイト全体の現状をまとめておきます。
使用している画像
１記事あたり２～４枚、もっと使っている記事もありました。
固定ページやカテゴリーページも含めると２００枚以上です。
この画像たち、アップロード前に圧縮していますがほとんどの画像は400KB～900KBくらいの大きさでした。
某画像サイトから引用してきていますが、リサイズはしていませんでした。
さすがに圧縮しても大きいかなぁとは思っていましたが…
今回の実践はこの画像圧縮が大半になります。
画像圧縮系プラグイン
入れていませんでした。
画像圧縮や速度についてよくわかっていなかったのでWordpressにアップロードする前に圧縮しておけば問題ないという認識でした。
サーバー
高速といわれるXサーバーを使っていますが、特にサーバー側で何かをいじったことはありませんでした。
今回の実践では特に触れません。
使用しているプラグイン
当ブログ運営で使用しているプラグインです。
あまり入れていないつもりでしたが、数えれば１０個も入っていたんですね…
Add Quicktag
Akismet Anti-Spam
Category Order and Taxonomy Terms Order
Classic Editor
Google XML Sitemaps
Kattene
WP Downgrade|Specific Core Version
WP External Links
WP User Avatar
ZEBLINE
テーマでの設定
使用しているテーマ「THE THOR」でのSEO設定は行っていました。
ダッシュボード→外観→カスタマイズの中にSEO設定という部分があります。
この部分で圧縮や非同期読み込みなどの設定ができます。
ぴよすけはこんな感じで設定していました。
それでは実際にどのようなことを実践したのか、紹介していきます。
実践してみたこと
①画像の圧縮
とにかく画像が重いということを考えたので、画像圧縮から手を付けました。
リサイズしてから圧縮
machoさんのサイトを参考に、リサイズ→圧縮という手順を踏み、すべて入れ替えました。
ぴよすけは画像のサイズは頓着がなく、中にはスマホで撮影した横幅4000を超える画像を使用していました。笑
そりゃあ圧縮しても小さくならねぇわけだ
ぴよすけ愛用のiLoveIMGというサイトでリサイズし、画像圧縮を１から始めました。
画像のリサイズ・圧縮は別記事にて解説します。
約２００枚の画像のサイズをすべて確認し、大きすぎるものは基本的に横幅800に収めています。
リサイズが完了したものを、改めて圧縮。
体感ですが、平均すると約５０％ほど圧縮されました。
メディアファイルの整理
効果があるかわかりませんが、WordPressにアップロードしたメディアも整理しました。
ダッシュボード→メディア→ライブラリに保存されている圧縮前の画像・使っていない画像をすべて整理。
画像圧縮系プラグインの導入
今回の圧縮作業を機に、画像圧縮系のプラグインを導入しました。
THE THORだとSEO系のプラグインを入れた場合、不具合が起きるということもあったので、これまで導入を見送っていました。
今回導入したのはEWWW Image Optimizerというプラグインです。
アップロードをしたとき画像が圧縮されるのはもちろんのこと、すでにアップロード済みの画像も最適化されるという便利なプラグインです。
AutoptimizeなどのCSS最適化プラグインや、キャッシュ機能プラグインも導入を検討しましたが、THE THORの性能と干渉してしまう可能性があったので、今回は導入を見送りました。
②AMP設定・PWA設定
THE THORにはAMP(Accelerated Mobile Pages)とPWA(Progressive Web Apps)というGoogleが普及を推進するシステムが標準装備されています。
この２つの機能、いろいろ調べた結果、モバイルページの高速化が実現するそうです。
一方でAMP専用の規格があるらしく、試しにAMP設定をしてみたところ、ほとんどのページでエラーが発生しました。
AMPはエラーの直し方を、PWAは導入されている方の記事等で情報収集し、ぴよすけも導入してみたいと思っています。
現段階ではどちらも設定しませんでした。
③CSSの整理
正直ぴよすけはCSSにそこまで詳しくないため、効果があるのか疑問ですが…style-user.cssの整理をしました。
ぴよすけのクセで、どこでCSSが区切れるか分かっておらず…追加するときに数行開けてしまっていました。
中には１０行以上空いていた部分もありました。
再測定
丸２日かけて上記①～③を検討・実践してみた結果発表。
まずモバイルページ。
うーん……
多少改善されたけど、こんなもんなのかなぁ…
続けてパソコンページ。
おおおぉ……
なんということでしょう…
頑張った甲斐がありましたヨ！(´；ω；`)
こちらがビフォーアフター。
モバイルページの読み込みが遅いということで、今後はAMP・PWAの導入が課題です。
表示速度の向上＝おもてなし
今回丸２日かけてサイトの表示速度を上げるために作業をしてみて思ったことがありました。
それはブログにおけるおもてなしがいかに重要だったかということです。
ブログ開設時、初心者であるぴよすけが参考にしていた他の方の記事には、おおむね次のようなことが書かれています。
・記事の内容、つまり質を向上させよ
・初心者のうちはブログカスタマイズにあまり手を出さない
・アナリティクスなど分析の数値を気にするな
ブログ開設から１ヵ月ちょっと経ち、そのとおりだなぁと思っていました。
しかし現実には、少数でもサイトを訪問してくれている人がいたのも事実です。
興味を持ってくれた数人の訪問者が「このサイト、マジ読み込み遅いんですけどぉ～」という気持ちになったら、再び訪れるのはないんでしょうね。
ブログカスタマイズに凝り過ぎず、記事の質を高めていくこと…たしかにそのとおりだと思います。
ただ一方で、訪れた方にストレスなく記事を読んでもらいたいという思いは、とても大事なことなのではないかと作業していて感じました。
世にいうユーザビリティの向上ということでしょう。
SEO的にいいとか検索順位を上げたいという理由から表示速度を上げたいと思う方もいるかもしれません。
まずは基本に立ち返り「サイトを訪れた人にストレスなく読んでほしい」この気持ちが一番大切なんだと思いました。
最後までお読みいただきありがとうございました。
↓↓↓クリックしていただくとぴよすけが泣いて喜びます。