200万PVと300記事を達成！『まころぐver5.0』に更新！！
今回は、ブログのテーマ更新のお話。
今月は仕事がドタバタで、記事のストックを使いきって以降、更新が滞っていましたが…。改めて確認すると、今書いている投稿で300記事に到達。
更には、トータルページビューも200万PVを超え、ブログを読んで下さっている皆様には感謝しかありません！！そこで…。
少し前にテーマを更新したばかりですが、何かとスッキリしない部分があったので、隙間時間を利用してガッツリとフルスクラッチ。
例によって見た目は変わりませんが、表示速度などは体感できる程に改善する事が出来たかと。という事で、いつものように作業内容を記録しておきます。
フレームワークと使用コードの見直し
まず最初に、前回作成したテーマにて、Googleさんから「コンテンツの幅が画面の幅を超えています」という指摘が増えたので、根本的な骨組みから作り直し。
※「コンテンツの幅が～」という指摘。何も改善する事無く、そのまま申請に掛けると修正確認される謎仕様のエラーメッセージでしたが…。ガンガン数が増えただけに、放置するのも気持ち悪いのでゼロから作り直しました。
ついでに…
空要素が増えるため諦めた網点背景も、背景グラデーションの原理を利用し、背景専用の空要素を生成する事無く再現に成功。
その流れで、レイアウトの骨組みは大幅に簡素化しつつ、今までと変わらないデザインを維持するよう根本から書き直し。更には、PHP部分にも古くなった記述があったので、最近の物に書き換えておきました。
HTTPリクエストの削減
次に取り組んだのが「HTTPリクエスト」の削減。要は、画像などの読み込み数を減らしてあげようと、昔から利用している『cssスプライト』を強化。
今までは個別になっていたロゴ等もまとめ、近しいサイズ同士を1枚の画像に凝縮。ロゴやレイアウトなど、使用する画像を5枚程度まで削減しました。
こんな感じ
更には、関連記事などの写真も抜き、文字だけのリンクリストにしてみたものの、やはりアドセンスが入るとHTTPリクエストが一気に跳ね上がる。
という事で、こちら側は可能な限り削減を行い、寂しくなった関連記事は以前のように整えておきました。※一応、サイドバーへの表示を減らしたので、関連記事からも多少は削減できているかと。
LiteSpeed Cacheの導入
現在利用しているレンタルサーバー『mixhost
』は、「LiteSpeed」を採用しているため、高速化に役立つWordPressの専用プラグイン『LiteSpeed Cache』を導入する事が可能。
細かなチューニングが必要になったものの、サイトのキャッシュに始まり、CSSやJS圧縮・一括化から遅延読み込み等も一挙に設定。
ツールボックス
今まではテーマに直接書き込んだり、プラグインを使っていた部分の負担が減り、『PageSpeed Insights』におけるスコアの改善にも繋がりました。
※色々と設定を確認した結果、何故かキャッシュをオフにした方がスコアが良いので、しばらくの間はキャッシュ以外の機能を利用してみる予定です。
遅延読み込みの徹底
最後に、スコア改善に向け一番効果があったのは、アドセンスやTwitter・Instagramなど、外部ファイルを伴う各種スクリプトの遅延読み込み。
画像やiframeの遅延読み込みは行っていましたが、何をどれだけ頑張っても、アドセンスやSNS関連を埋め込むだけで、各測定サイトのスコアは30～50ポイント減点と、努力を無にするほど大幅に落ちてしまう…。
Twitterの埋め込み
ただ、これらを利用しない訳にもいかず、遅延読み込みでファーストビューの表示を早くしてやろうとゴソゴソ。
複数サイトのコードを参考に、試行錯誤しながら「アドセンス」「Twitter」「Instagram」の遅延読み込みに成功。この改善により平均で95～99ポイントのスコアが出るようになりました。
200万PVと300記事を達成！まとめ
この1ヶ月半は、少しでも空いた時間があれば新しいテーマを作っていたので、記事の更新頻度が落ちてしまいましたが、とりあえずは一段落という事で、しばらくの間は様子を見ながら運営しようかと。
上記の他にも、全ての画像をWebPへと変換したり圧縮し直したりと、細々と対策を取ってみました。そのかいあってか、現在は高スコアになっています。
スマホ・99点
パソコン・100点
各種スクリプトを撤去した際、お試しで出ていたようなスコアが出るように。やはり、アドセンスやSNS埋め込みの遅延読み込みが効いていますね。
まだまだ旧ブログ『オーシャントリッパーズ』には及びませんが、先日200万PVを突破し、今回の投稿で300記事というキリの良いタイミング。何とかテーマも新調する事が出来て良かったです！！
今まで通り、マイペースで続けますので、今後とも宜しくお願い致します！
※5月に実施されたアップデート以降、アクセス数が半減して戻らず、密かに悔しかったので、投稿記事よりもテーマをゴリゴリ書いてたのはココだけの話し（笑
最後まで読んで頂き、ありがとうございます！！
今回の投稿と同じ「WordPress」にある前後の記事は、下記のようになっております。お時間がある時にでもチェックして頂けると嬉しいです！！
また、11月27日現在「ガジェット」には「 70件」の投稿があります。カテゴリー内での人気記事や、ブログの最新記事リストも記載しておきますので、宜しければ合わせてご覧くださいませ。
シェア＆フォローして頂けると嬉しいです！
リモコンを押すとテレビの電源が落ちる原因はAmazon Fire TVだった！
- 防犯カメラ『Google Nest Cam』使用レビュー！工事不要の簡単設置でオススメ！！
- 学校のプリント整理にScanSnap iX1600でデジタル保存した感想
- ブログデザイン微調整しました！※表示が崩れる場合はリロードを！！
- 【Google Pixel8 Pro】イチオシの全画面保護フィルム！！
- ドラクエウォークを始めて一年経過した感想と改善点！！
- WordPress6.0でエディタの自作タグボタンが使えなくなった件を解消
リモコンを押すとテレビの電源が落ちる原因はAmazon Fire TVだった！
※書き込んだコメント内容は、管理者の認証を受けた後にブログへ表示されます。