脱jQueryで大幅高速化！サイトデザインをVer3.7にアップデート！

サイト高速化の計測結果

サイトの高速化によって速度がどれくらい向上したか開発者ツールで5回ずつ読み込み速度を計測してみました。計測したのはトップページと記事などの個別ページで計測したものの平均値をまとめました。

トップページ

記事ページ

今回の高速化において最も効果が出たのはDOMContentLoadedの項目で、速度がトップページでは従来よりも1秒近く、記事ページでは1.7秒近くも高速化できました。DOMContentLoadedはDOMの読み込み完了時、LoadはDOMの読み込み完了に加え、ページ内のリソースの読み込み完了時となっています。

高速化を行った結果がこのように数値で明確に出てくれると苦労したかいがあったというものです。

サイト高速化とアップデート内容について

今回変更を行った箇所は以下の通りです。コードの軽量化や高速化のために行ったものが多いですが、激安情報やYoutubeチャンネルなどの新たなコンテンツを追加してたりと色々な部分も強化を行いました。

もちろん記事のデザインも細かい部分が変わっていたりします。分かりやすい大きな違いは文字のサイズや画像のサイズをあげて、より見やすくなっています。

アイコンフォントやロゴをSVGへ

以前のVer3.5ではかなりいろいろな場所にWebアイコンフォントを使用していましたが、近年GoogleがコアウェブバイタルとしてLCP/CLS/FIDを重視しているため、コアウェブバイタルの低下を招く要因であるアイコンフォントを排除する方向に修正しました。

• LCP（Largest Contentful Paint）
• FID（First Input Delay）
• CLS（Cumulative Layout Shift）

ただ、アイコンフォントが便利な場面もあるので全て削除したわけではなく、下側にあるコンテンツでは動的ローディングで遅延して読み込みを行うようにしています。ファーストビューにはアイコンフォントは使わないようにしました。

SVGはインラインで埋め込むことでアイコンフォントのような再利用性はないのですが、CSS側で色を変えたりできるので使い勝手はアイコンフォントと同じように使うことができます。なによりインラインなので読み込みが高速なのが良いです。

またアイコンフォント以外にも、ブログロゴは従来はテキストをCSSで装飾していましたが、今回アイコンフォント類もSVG化したので、ShopDDのロゴもSVGで作り直しました。ぱっと見では違いがわからないと思いますが、Ver3.7からはインラインSVGになっています。

脱jQueryでVanilla JSに

脱jQueryはだいぶ前から言われていた流れなのですが、私のサイトもついにjQueryを廃止しました。jQuery自体は簡単なコードで色々できたり色々なプラグインが出ていたりして便利だったこともあり、10年以上前から利用していました。しかし、現在のJavescriptではquerySelectorでjQueryのようにセレクターで指定したりするのも簡単ですし、jQueryを使うメリットよりも使わないことでサイトの軽量化と高速化する方が良いと判断しました。

そんなわけで脱jQueryを行い、従来のコードを全てVanilla JS(ただのJavascript)に書き換えました。このサイト思ったよりJavascriptの動作に依存している部分が多かったので、全部書き換えるのは大変でしたがそのおかげでJavascriptの容量は大幅に削減できました。

従来のJSコード

jQuery 87.4KB + jsコード 20.4KB = 107.8KB

最新のJSコード

jsコード 16.5KB

約86%の削減に成功しています。javascriptはサイトの読み込み時間に及ぼす影響は大きいので、脱JQueyを行った成果はかなり出ました。従来よりjQuery分の処理がまるまるなくなったのはかなり大きいです。

Intersection Observer APIに変更

Intersection Observer APIはターゲットとなる要素が特定の位置と交差するのを監視するためのAPIです。これを使うことで今までjavascriptでscroll量で動的ローディングしていたものをIntersection Observer APIで簡単に実装できるようになりました。

無駄なscrollイベントも発生しないですし、コードもシンプルで綺麗にできたのでIntersection Observer APIは書き換える価値が十分ありました。

HTML+CSSのコードの見直し

HTMLについては無駄なタグを削除してよりシンプルなデータ構造に変更しました。CSSも一部無駄になっていた部分を削除してよりシンプルなものに変更しました。

ただし、HTMLに関してはSVGをインライン化して導入したことによってサイズは62KBから81KBに肥大化してしまいました。

CSSに関しては57KBが51KBへと10%程度削減することができました。

CDNを利用して高速化

サイトに必要な一部の画像やjavascript、CSSなどは、有料契約をしてるさくらのレンタルサーバーに置いているのですが、さくらのレンタルサーバーはTTFBが遅めです。また、画像などを同時接続で取得すると途中から速度が低下するという問題点もあります。

それを改善するためにCDN(コンテンツ・デリバリー・ネットワーク )を導入しました。これにより速度は以前よりも高速化されて、読み込み速度も向上しています。やはりCDNの導入はかなりこうかがでかいですね。画像が多めのサイトは絶対にCDNを使ったほうがいいです。

ちなみにFC2ブログは2009年から画像の高速表示を導入しており、CDN大手のアカマイを使った画像をCDN経由で表示できるようになっています。

画像のWebP化でより軽量に

以前からこのブログではWebPを推奨していたのですが、一般的なブラウザは全て対応してきた中SafariだけがWEBP対応していなかったため、なかなか普及しきらないという問題がありました。

しかし、Safari 14でついにWebP形式の画像をサポートしたことで、次世代画像戦争にも終止符が打たれました。これにより一般的なブラウザであればWebPを表示できるようになったので、当サイトでもサイトの画像はWebPで統一する方向に変更しました。

ただし、FC2ブログの仕様上の問題で記事内の画像についてはWebPに対応していないためそれ以外の部分でのWebPを採用した形となっています。

トップページのデザインを一新

トップページのデザインを一新しました。コンテンツを従来よりも大きめに変更してより見やすくしました。またカラム構造も大幅に変更して変則1カラムのちょっと変わった感じにしました。記事の個別ページでは2カラムですが、途中から1カラムに変わるようになっています。

新たにカテゴリー増設

カテゴリーについては新たに「スマートウォッチ」「生活家電」「カメラ」「スピーカー」の4種類を追加しました。最近だとスマートウォッチのレビューやアクションカメラ、防水スピーカーなどのレビューが増えていたので、カテゴリーを新設した形です。

カテゴリーも従来より細分化されたので、記事も見つけやすくなりました。サイトの下部にカテゴリー一覧が用意されています。

激安情報コンテンツを追加

激安情報については激安ShopDDで情報を取り扱っていますが、ShopDDにも最新記事のいち部を表示するようにしました。激安コンテンツに興味のある人の役に立てば幸いです。

Youtubeチャンネルを追加

Youtubeチャンネルの最新動画についてShopDDからも見れるようにしました。未だにチャンネル登録者が少ない状態なので、よければチャンネル登録していただけると嬉しいです。たくさん登録していただけるとやる気に繋がります！

今回の個人的感想＆まとめ

久しぶりにテンプレートデザインを大幅に変更を加えたという記事でした。やはりWEBの技術も年々進化しているので3年ごとくらいの周期で大幅な改修が必要だと思いますね。今回もデザイン変更に結構時間がかかってしまい、6月から手を付けていたのですが、完成は10月になってしまいました。

今回は内部高速化はかなり行ったのですが、だいぶ早くなったのでよかったです。特にjQuery廃止の影響のおかげかモバイルでの体感速度がかなり向上しています。サイト速度の計測結果を見る感じだとjQueryをやめた効果が結構出ているようだったので良かったです。

見た目についても文字サイズを上げたり記事の内容を見やすく画像のサイズを上げたり、などの細かい違いがあります。記事ページはだいぶこだわったので個人的には結構気に入っています。あとはロゴとかベースカラーを薄い緑っぽい色にしました。以前より落ち着いた色になりました。

今後とも裏技ShopDDをどうぞよろしくお願い致します！