パフォーマンスとして表示速度やGoogleのPagespeed Insightや Lighthouse のスコアなどを考慮して開発を行っています。
パフォーマンスとは簡単に言ってページの読み込み速度ですね。
読み込み速度が遅いことは百害あって利益無しで、訪問者が閲覧を諦めて他のサイトに遷移してしまったり、Googleなどの検索エンジンでの検索順位が下がるといったことが考えられます。
見た目が凝ると色々と読み込みするコンテンツが増える傾向にあるので、パフォーマンスを重視すると行ったことはWebサイトの見た目とは相反することが多いです。
しかしながら、様々な手法や新しい技術を利用することにより、高いパフォーマンスのWebサイトを構築することが可能です。
Diverstage では利用する技術は作成するサイトの要件や開発環境に応じて対応することができますが、以下の主要技術に主眼をおいて開発しております。
このサイト自身それらの技術を利用して構築されております。
JAMStack について
JAMStack とは、基本的にHTML、css、およびJavascriptにコンパイルされ、CDN経由で提供されるWebサイトを構築する方法です。
その後、必要に応じてAPIを使用して、より高度な機能を追加します。
バックエンド処理を最小限にし、初期応答部分をフロントエンドに寄せることでWeb表示パフォーマンスを最大限発揮することができます。
Nuxt.js
Nuxt.js には、JAMStack で提供される静的なサイトを生成する機能が備わっており、プレーンな HTMLファイル で静的コンテンツを構築することができます。
しかし、これらのHTMLファイルはVue.jsで構成されていて、初期ページの読み込み後はスムーズなページ遷移が可能となります。
Bulma / Buefy と Purge CSS
CSSとコンポーネントライブラリとして [Bulma](https://bulma.io/）及び Buefy を利用していますが、提供されているすべてのスタイルを使用すると利用していないスタイルや記述まで読み込むことになります。
[Purge CSS](https://www.purgecss.com/）は、コンパイル時に未使用のスタイルを削除することによって、読み込まれるCSSを最小化します。
画像最適化とレイジーロード
Webサイトの読み込みにはHTML、CSSやJavascriptより、画像や動画ファイルの読み込みの割合が全体の半分以上占め、これが読み込み速度に影響している場合が多いです。
その場合重要となるのは、利用箇所に最適な解像度と形式の画像を利用することと、遅延して必要なときに必要なだけ画像を読み込むことが必要です。
これらを常に手作業で行ってしまうとメンテナンス性が損なわれてしまいますが、サイト構築時に自動で反映するように構築することが可能です。
まとめ
一般的にWebサイトのパフォーマンスは、サイト構築において優先度が見た目や機能の次に置かれるケースが少なくありません。
しかしながら、SEI観点でもユーザビリティ的にもメリットは大きく、是非とも優先度を高く考えてサイト構築をしたいものですね。
既存Webサイトのパフォーマンス向上も承りますので、是非 お問い合わせ からご相談ください。