爆速サイトはどう作る!? 〜『ぱっとベア』で採用した爆速Tips 〜


公開日：2020年7月22日

こんにちは。

ぱっとベアの長谷川です。

前回の第一回更新から日が空いてしまい申し訳ございません。
新型コロナウイルスに対する緊急事態宣言が終了してしばらく経ちましたが、残念ながら東京ではまた感染者数が増えてきましたね。

コロナにより弊社もリモートワークに切り替えており、
6月から一部出社になっていたためなかなかチームで集まることができずお待たせしました。

さて、第二回ディレクターズレポートでは爆速サイトの具体的な制作シーンに移っていきます！
エンジニアの方必見です！

速いサイトを作るにはこれが必要

まず、『表示速度を速くするために何をどうすれば良いか』メンバーで話し合うことにしました。

「いつもは画像を圧縮をしてるね」
「vue.js等の技術を使ってみれば良いんじゃないか」
「そもそもゴールは？速いサイトどこ？それベンチマークにして越えようよ」
「物理的にページ短くするでしょ、長さ5pxくらい、、(白目)」

などなど話し合いました。

ベンチマークという話がでましたが、本件だけでなくプロジェクトではゴールを最初に設定します。
我々のゴールは「有名な爆速サイト」よりも「表示速度で勝る」ことを掲げることにしました。
ベンチマークとなる速いサイトは阿部寛さんのホームページ、ヤマハ発動機様の東京モーターショー特設サイト、dev.toが挙がり、
調査をしてみると、それぞれサイトが速い理由は、主に以下の事が理由であることがわかりました。

阿部寛さんのサイト

  • 画像が少ない
  • HTMLコードが短い
  • javascriptを使用していない
  • 画像リクエストを含めて合計で6本しかサーバーとの接続が発生しておらず、サーバーとの接続で生まれる遅延が限りなく少ない

ヤマハ東京モーターショー2019特設サイト

  • cssは全てインラインで書いてある
  • コンテンツは<table>、中身は<p><a><img><hr><strong><em>のみ。<marquee behavior="scroll">がある(右から左に動いてるテキスト)が、html5で廃止されているので、代わりにkeyframesを使う
  • Jsはマウスストーカーの cursor.js(Vanilla)というのだけ読まれている

dev.to

  • CDNを活用している
  • キャッシュを残すことでページ速度を上げている
  • 共通箇所のCSSをHTMLの中に直接記載している
  • JavaScriptはライブラリなどは極力使っていない
  • 画像管理のクラウドサービス「Cloudinary」を使い、圧縮や自動での最適化を図っている

それぞれのサイトが利用している技術やスペック(ページ容量と速度)を測りました。
スペックでの測定結果などは第一回に記載しているのでそちらをご覧ください。

ディレクターズレポート第一回

技術について調査するとともに、我々独自での爆速手法の調査検討をした結果、
以下の4つに絞って開発を進める事にしました。

  1. 外部ファイルは極力読み込まない
  2. ファイルサイズも軽くする・Minify化
  3. 画像を軽くするためにWebPを使用
  4. キャッシュの利用

それぞれもう少し詳しくご説明致します。

外部ファイルは極力読み込まない

ほとんどのwebサイトでは、css、JavaScriptやjQueryなど、外部ファイルをhtmlのhead内またはbody最下部で読み込みます。
読み込むファイルの数が多ければ多いほど、httpリクエスト数が増え、表示速度が遅くなってしまいます。

そこで、今回の『ぱっとベアプロジェクト』では

  • ページに必要なcssはhtmlのhead内に記述する
  • JavaScriptはhtml内に記述する
  • 弊社で標準使用しているjQueryは使わない

として進めて行くことにしました。

※ただし、サイドナビなどの共通のスタイルについては圧縮したmodule.cssを読み込んでいます。

それぞれのファイルサイズを軽くする・Minify化

ファイル自体のサイズを軽くするというのも、サイト表示スピードを上げるための一つの方法です。

  • セクショニングに関係のない余計なタグは使わない
  • class名を短縮する
  • css,JavaScriptの記述は圧縮してMinifyする

単純にファイル内の文字数が少なくすれば、ファイルサイズも減り、速度も上がるはずです。

たかが文字数、されど文字数。地理も積もれば山となる、ですね。

また、過度なアニメーションや手の混んだcssスタイルなどは入れないことで、cssの記述もできるだけ少なくしています。

画像を軽くするためにWebPを使用

ページ内にある画像を読み込む際にもhttpリクエストが発生します。その分表示速度にも影響するのですが、画像が全く無いサイトも味気ないですし、なにより読みづらい･･･。

ということで、できるだけ画像容量を削減しようと考えました。

通常のWebサイト制作でも、画像の圧縮は必須ですよね。
皆様もTinyPNG(https://tinypng.com/)やその他のツールを使って、大きなサイズの画像を圧縮したりしているかと思います。
私達も、使用する画像は全てTinyPNGを利用して画像を圧縮し、さらに縦横サイズもリサイズを施しています。

今回はそれだけではなく、更に軽くする方法として『WebP(ウェッピー)(https://developers.google.com/speed/webp/)』という画像形式を採用してみました。

jpgやpngをWebPに変換するために、Squoosh(https://squoosh.app/)というWebアプリを利用しました。
このアプリは、元の画像のクオリティーとWebP化した画像のクオリティーを見比べることができ、自分の目で確認しながらWebP化していくことができます。
これによって、WebPに変換した当サイトの画像容量はおよそ10KB以下という軽さになっています。

例)TOPページに使用している画像 通常のjpgindex_branding_1.jpg の情報

例)TOPページに使用している画像 webp

TOPページのこちらの画像は、.jpg形式だと27KB。.WebP形式だと8KBです。
27KBでもかなり軽い印象を受けますが、それをさらに3分の1以下にすることができるのは驚きですね。


ただしWebPはIE11でサポートされておりません。

※Safariはまもなくリリース予定のSafari14から対応するそうです。(2020年7月22日現在)
参考記事：ついにSafariが画像フォーマットとしてWebPをサポート！ ウェブページの表示高速化に期待

この点については、.htaccessでWebPがサポートされているブラウザはWebPを表示、そうでない場合は通常のjpgあるいはpngを表示させる仕様になっております。

キャッシュの利用

一度訪れたサイトの情報を、一時的にブラウザに保管しておく仕組み(キャッシュ)を利用して、ユーザーが、次にサイトにアクセスした際にcssや画像ファイルを再読み込みしなくて良いようにしています。
これを制御する処理も、先程のWebPと同じく.htaccessに記述をしています。
当サイトは、ユーザーがサイトを訪れてから14日間キャッシュを残すようにしています。

まとめ｜httpリクエスト数とファイル圧縮がキモ！使ったことの無い技術を採用しました

私達は普段JavaScriptに難易度を向けておりますが、htmlの深さ・難しさを感じました。
SEO対策が出来ているか、何が原因でページ速度が遅いか、普段とは異なった画像の使用方法など、
ページ表示を早くする且つ、SEOにも特化しているページが作成出来るようにチームで努めました。

以上の事は、htmlが肝になってきます。

画像をWebPにする事により、SEOにも効果が見込めます。
またWebPはWebを軽量化するための次世代画像なので、表示速度改善にもなりました。
SafariもWebPに対応予定とのことで、モダンブラウザの画像軽量化はますます必須になっていくことでしょう。

cssやJavaScriptにつきましては、
htmlに直接書き込むことにより、ファイル参照の時間削除にも成功いたしました。
普段は別ファイルにて用意いたしますが、少しでも表示速度を速くする為に行いました。

さらにhtmlはコードのminifyを行い最小限までサイズを落とすことに成功いたしました。

今回、トップページのアニメーションはJavaScriptで実装しておりますが、jQueryを使用しておりません。
jQueryなど出来るだけファイルを読まない・コードを短くする事も今回の重要事項なので、生のJavaScriptにて実装を行いました。
JavaScriptにつきましては、今後はVue.jsを使用してアニメーションを更新する予定です。

お楽しみに！

←前の記事を読む

ぱっとベア