新テーマ『まころぐver2.0』について

今回は、ブログのテーマ（テンプレート）のお話。

旧ブログ『オーシャントリッパーズ』のアクセスが、1日1万PVを越えた辺りから制限を受けることが増えたので、サーバーの引っ越しを兼ねて新設した当ブログも、あっという間に二年が過ぎました。

以前と同様、ボチボチと更新を楽しんでいる当ブログですが…。ふとした時に、Googleの『PageSpeed Insights』にてチェックを掛けると…。

なんと！！

モバイル表示が重視され、チェック項目が一新されているのは知っていましたが、この10ポイントという結果に驚愕！！

タイミングによって結構なバラつきがあるものの、調子が良くて45ポイント前後と芳しくない…。という事で、半月ほど掛けてテーマを再構築してみました！！

モバイルの改善が重要！！

当ブログを新設した際、モバイルは80ポイント以上あったものの、この数年でPCとスマホのシェアは一気に逆転し、アクセスの7～8割はスマホからといった状態。

現在は、完全にモバイルファーストの時代で、PC側のテーマよりもモバイル側を重視しないと、検索結果にも影響が出てきます。

パソコンのポイント

WordPress Optimization Guide

パソコンは、そこそこ善戦しているのですが…。

ブログのテーマは、画面サイズによって切り替わる『レスポンシブデザイン』にて制作しており、モバイルの項目が改善すれば、パソコンのスコアも高くなるハズ。

とりあえず、テーマのデザインは気に入っているので、モバイルの為に何を削除できるかといった、現行テーマからの引き算をベースに作業を開始。

ウェブフォント”Noto Sans JP”を最優先

まず最初に、大幅にスコアを落としている原因として挙げられるのが、Googleのウェブフォント『Noto Sans JP』の使用。

メイリオが中心だった頃に比べ、游ゴシックを使用しているサイトが増えてきたものの、Chromeで細くなったりと若干使い勝手も悪く、Win7を使っている人もまだまだ多い。※自分もですが…。

Noto Sans JP

そこで、旧ブログの見出しに使用していた『Noto Sans JP』を全面的に取り入れ、現在のブログを作ったものの、やはりシステムフォントと比べると、読み込み速度・サイズ共に大幅な減点。

更には、Google公式の非同期スクリプトも試してみましたが、FOUTの発生が気になり却下。また、システムフォントでの表示は、スコアが格段にアップするものの、どうしてもメイリオと游ゴシックの気分にならないので却下。

最終的には…

アンドロイドとChromeで、システムフォントとして使われている『Noto Sans CJK JP』を優先的に出力する事で、気持ち程度の改善を図ってみましたが、フォントウェイトの部分で違いが出たので却下。

今回の新テーマで唯一手を加えず、そのままにしたのがフォントの種類『Noto Sans JP』でした。※こればかりは好みを通してみました。

LiteSpeed Cacheを使うかキャッシュの取捨選択

一方、キャッシュに関しては、現在利用しているレンタルサーバー『MixHost』にて、独自のキャッシュが設定されているとの事だったので、特に弄らず様子を見ていたのですが…。

今回、PageSpeedのチェック項目にも挙がっていたので、そろそろ弄ってみるかと思い、LiteSpeed Webサーバー対応の利を生かし、LiteSpeed Cacheをお試し導入。

LiteSpeed Cache導入後・モバイル

LiteSpeed Cache導入後・パソコン

ウェブフォントは現行のまま、スコアだけが軽く上昇しましたが、この手のプラグインにありがちな、キャッシュが効き過ぎ状態になりまして…。

細かな部分のキャッシュを解除できず、結局は今までと同様.htaccessにゴリゴリと書き込み、自前で解決しておきました。

HTTPステータスコード200

LiteSpeed Cacheのようなプラグインも良いのですが、画像の遅延読み込みであったり、ファイルのminify化であったり、コチラ側で作業した部分と被る事も多く、キャッシュの設定以外でもさほどメリットを感じず…。

ファイルの種類や期間など、自分の思うように.htaccessへ書き込む方が、自由度が高くて好みに合っていました。

重複・不要コンテンツの削除とWebPの導入

最後に、リクエスト数を減らすため、重複していたり不要になったコンテンツは思い切って削除。※まだ1カラムにする勇気はありませんでしたが…。

例えば、記事を挟むように設置していたSNSボタン等は、本文末の1ヶ所だけに減らし、タイトルタグ直下に近い状態から本文が始まるようにしてみたり。

SNSボタンも種類を絞りました

また、画像に関しては、現在使用中のプラグイン『EWWW Image Optimizer』の機能を利用し、WebPにも対応できる形を取ってみました。

WebP

対応ブラウザの問題もあり、まだまだこれからの技術だとは思いますが、せっかくなので勢いのままに導入。

後は、表現の細かな部分を削ったり、ブログの概要ページを1カラムから2カラムへ変更したりと、一通り手を入れながら書き直しました。

新テーマ『まころぐver2.0』まとめ

今回は、新しく作成したテーマについて書いてみましたが、見た目は殆ど変わっていないものの、ほぼ全部を書き直したので思ったよりも時間が掛かってしまい…。

冒頭で書いたPageSpeedのスコアだけに注目すれば、他にも色々と改善できる所だらけですが、文中でも書いた通り『Noto Sans JP』は気に入ってるし、相変わらずヒーローヘッダーは大好きだし、本文後の記事リストも載せておきたいし…。

ボチボチですね…

今回、キャッシュの設定を弄ったので、こういった計測サイトの表示より、体感速度は多少マシになっているかと思います。※初回アクセスを除き。

スコアの点数を上げるよりも、実際に使った感触を大切にして、自分なりのブログに仕上げて行ければ良いかと、割り切る事にしました！！(^^;)

最後まで読んで頂き、ありがとうございます！！

今回の投稿と同じ「WordPress」にある前後の記事は、下記のようになっております。お時間がある時にでもチェックして頂けると嬉しいです！！

また、11月27日現在「ガジェット」には「 70件」の投稿があります。カテゴリー内での人気記事や、ブログの最新記事リストも記載しておきますので、宜しければ合わせてご覧くださいませ。

• 
  リモコンを押すとテレビの電源が落ちる原因はAmazon Fire TVだった！
• 
  防犯カメラ『Google Nest Cam』使用レビュー！工事不要の簡単設置でオススメ！！
• 
  学校のプリント整理にScanSnap iX1600でデジタル保存した感想
• 
  ブログデザイン微調整しました！※表示が崩れる場合はリロードを！！
• 
  【Google Pixel8 Pro】イチオシの全画面保護フィルム！！
• 
  ドラクエウォークを始めて一年経過した感想と改善点！！
• 
  WordPress6.0でエディタの自作タグボタンが使えなくなった件を解消
• 70件の投稿

  ガジェット今回の投稿と同じカテゴリー「ガジェット」の記事一覧を見る記事一覧を見る

• 
  WordPressでコメント通知などのメールが届かない時の確認項目
• 
  WordPress・勝手に挿入される＜/P＞をピンポイントで撤去
• 
  WordPress5.5のテキストエディタでタグボタンが表示されない時の解決法
• 
  WordPress・ブログ村の新着更新が反映されない対処法
• 
  WordPressも高速！レンタルサーバーMixHostを使った感想！！
• 
  オーシャントリッパーズが1000万PVを達成しました！！
• 
  EWWW Image Optimizerで投稿済み画像をWebPへ一括変換する手順
• 17件の投稿

  WordPress今回の投稿と同じジャンル「WordPress」の記事一覧を見る記事一覧を見る

• 
  リモコンを押すとテレビの電源が落ちる原因はAmazon Fire TVだった！
• 
  決まりきらない潮位でも釣りが出来ればそれでOK！！
• 
  防犯カメラ『Google Nest Cam』使用レビュー！工事不要の簡単設置でオススメ！！
• 
  学校のプリント整理にScanSnap iX1600でデジタル保存した感想
• 
  イッキ見したドラマ『異世界居酒屋のぶ』は惹き込まれる世界観でオススメ！！
• 
  【車の傷】リアバンパーを自分で修理！作業手順とコツを解説！！
• 
  関西からの夏休み旅行に最適！大型プール『ラグナシア』と『変なホテル』を紹介＆レビュー！！
• 515件の投稿

  新着一覧11月27日現在、当ブログにある515件の記事一覧を見る記事一覧を見る