技術部アーカイブ - ひいらぎの集い

初めまして、ウェブサイトのシステム管理を担当している7R514と申します。先日、ひいらぎ祭2023のウェブサイトのアーカイブに最適化を施した結果、読み込み速度がとんでもなく速くなりました。この記事ではその方法、および結果について書いていきます。 なお、ひいらぎ祭2023のウェブサイトのアーカイブは以下のURLから閲覧可能です。 https://2023.ひいらぎ祭.com 行ったこと 私が行ったのは以下の4つです。 CDNの使用 広告のプリロード CSS/JSの圧縮 画像の圧縮/キャッシュ それぞれについて解説していきます。 CDNの使用 具体的なコードは以下の通りです。ここでは、jsDelivrとGoogle Fonts APIを使用しています。 &lt;link href=https://fonts.googleapis.com rel=preconnect&gt; &lt;link href=https://fonts.gstatic.com rel=preconnect crossorigin&gt; &lt;link href=https://cdn.jsdelivr.net rel=preconnect&gt; &lt;link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&amp;display=swap" rel=stylesheet&gt; &lt;link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700&amp;display=swap" rel=stylesheet&gt; &lt;link href=https://cdn.jsdelivr.net/npm/ress@4.0.0/dist/ress.min.css rel=stylesheet&gt; &lt;script src=https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js&gt;&lt;/script&gt; CDNを使用することで、地理的に近いサーバーからファイルが読み込まれるようになったり、ファイルを効率的にキャッシュできるようになったりするため、読み込みが高速になる傾向にあります。 広告のプリロード 私たちはサーバーにXREA Freeを使用しています。(前年度のひいらぎ祭シーズンのみ、XREA Plusを契約していました。)XREA Freeではサーバーから指定された広告挿入スクリプトを含めなければならないという制約があります。 このスクリプトを確認すると、広告にランダム性は無く、また(数か月間確認した結果)配信される広告の内容もほとんど変化することはないということが分かりました。ですから、head内に広告画像をプリロードさせるコードを埋め込むことで、高速化が見込めます。 &lt;link href=https://cache1.value-domain.com/vd_468x60.png rel=preload as=image&gt; なお、png画像をdocument.writeしているため、最適化を行ってもなおパフォーマンスは非常に悪いです。有料サーバーを契約しないと根本的な解決は望めません。 (2024年6月1日追記)新ウェブサイト開発・運営のため、再びXREA Plusを契約しました。そのため、現在は広告挿入によるパフォーマンス低下に悩まされることはありません。 CSS/JSの圧縮 文字通りです。CSSとJSファイルを圧縮することで容量を大幅に削減しています。CSSの不要なルールも削減すればさらに高速化できそうですが、そこまでする気力はありませんでした(おい)。 また、JSファイルは直接含めることで、リクエストを1回分減らしています。 画像の圧縮/キャッシュ おそらく今回の最適化の中で最も重要な部分の1つです。 全ての画像をwebpに変換し、解像度やクオリティを下げました。一応、注視しないと不自然さを感じないレベルには留めています。全体としては、ファイルサイズは元の1～2割程度まで減っています。ちょっと圧縮し過ぎたかも。 また、.htaccessに以下のコードを追加しています。 &lt;IfModule mod_headers.c&gt; &lt;FilesMatch "\.(jpg|jpeg|png|gif|webp|svg|ico)$"&gt; Header set Cache-Control "max-age=31536000" &lt;/FilesMatch&gt; &lt;/IfModule&gt; これにより、全ての画像ファイルがクライアント側に1年間キャッシュされるようになり、2回目以降の読み込みが非常に高速になります。 最適化を行った結果 Microsoft Edgeのゲストプロファイルを使用して、開発者ツールで読み込み時間を計測してみた結果、 index.html : 492ms schedule.html : 658ms content.html : 891ms という結果になりました。驚くべきことに、最もファイルサイズが大きいはずのcontent.htmlでさえも1秒以内に読み込めています。 また、キャッシュを使用できる2回目以降の読み込みは平均100ms程度と、非常に高速です。クライアントで処理しているのかと疑うレベルで速い。 (最大速度30Mbpsの回線を使用して検証しています) おわりに いかがでしたか？ 今回の最適化の結果、読み込み時間を非常に短縮することができました。さらに、ウェブサイト最適化の技術について学ぶことができたというのも個人的に嬉しいです。 ちょっとした余談ですが、2024年度のひいらぎ祭ウェブサイトについて。前年度のウェブサイト開発チームに加え、優秀なプログラミングスキルを有する新1年生も加わった、新しいチームで開発を進めております。期待してお待ちください。開発状況などは、「技術部」カテゴリーで投稿していく予定です。 追記 時間が余ったので、さらに速くしてみます。暇とか言うな 画像の遅延読み込み (2024/06/01) HTMLでは、標準で画像の遅延読み込みを行う方法が用意されています。ちなみに、私はつい先日までJavaScriptを使う方法しか知りませんでした。 &lt;img alt src="image/1-1.webp" class="c-list__image" loading="lazy"> このように、「loading="lazy"」というプロパティを設定してやるだけで画像の遅延読み込みが有効になり、画面に近づいてから読み込みが開始されるようになります。ただ、元から画像の容量が極端に小さいので、やはり一瞬で読み込まれます。そのため、最初は本当に遅延できているのか不安になりました。 とはいえ、僅かながら最初の読み込み容量は減っているため、高速化としては成功でしょう。 (参考: https://developer.mozilla.org/ja/docs/Web/Performance/Lazy_loading)

技術部

【Outdated】WSAを使って学校PCでスマホゲームを遊ぼう

ひいらぎ祭2023のウェブサイトを最適化してみた