表示スピードが速いサイトを作りたくて、調べた事をまとめていきます。
この記事のゴールは下記のとおりです。
阿部寛氏のホームページのように、めっちゃ速いサイトを作るにはどうしたら良いのか
阿部寛氏のホームページはなぜ速い？
まずは分析から始めましょう。
阿部寛のホームページ(http://abehiroshi.la.coocan.jp/)のソースコードを見てみると、
- CSSを読み込んでいない
- JavaScriptファイルも読み込んでいない
- 画像が少ない
ということが分かります。これがサイトが爆速な理由です。
見た目のスタイルは全てインラインで書かれており、外部ファイルは1つも読み込まれていませんでした。(そりゃ速いよ)
それから画像もほとんど無く、backgroundの『ABE Hiroshi』という画像とプロフィール写真くらいでしょうかね。恐るべし。
速度計測ツール(今回はGTmetrixというツール)を使ってスピードを可視化したのがこちら↓
このツールの見方はあまり詳しくないのですが、
- Fully Loaded Time
- Total Page Size
- Requests
の部分を見るだけでもすごさがわかります。(それぞれの意味は割愛)
サーバーリクエストが6って･･･この数字は小さければ小さいほど良いやつです。
気になる方は、試しにモダンでオシャレな堂本剛氏のホームページ(https://tsuyoshi.in/)と比べてみてください。
しかしhtml4の書き方は現在非推奨
『阿部寛のホームページ』はとにかく速いし、見やすい。
しかし、html4の書き方なんですね。
現在はhtml5が使われており、4は非推奨となっています。
<frameset>というタグはhtml5では廃止されています。
なので、『新しくWEBサイトを作る』という事を考えれば、同じhtml構造ではSEO的にマイナスになりかねません。ここに関しては注意が必要です。
【開発者(初級)向け】サイト高速化で役立ちそうな技術
この記事を書いている私は、現在マークアップエンジニア1年目です。
バックエンドやサーバ通信(？)などの難しいことはまだわかりません。
ググった中で、今の技術でできそうな範囲の高速化のTipsを6つ挙げていきますね。
参考に見た記事のリンクも貼らせていただきます。記事主様、ありがとうございます。
pjaxで非同期通信する
非同期繊維だと何がいいのか
ページ遷移の際に表示が早い、ページそのものを再描画するのではなく、大元のHTMLはそのままで必要な部分だけ差し替えるのでレンダリングが早いというのと、img,js,cssファイルのリクエスト数が減るのでその分高速になる。
pjaxといえば、私はbarba.jsを実案件で使ったことがあるのでなんとなくイメージしやすいです。
非同期通信すれば、何回もリクエストを送信しなくて良いので速いということですね。
Vanilla(素のJavaScript)で書く
jQueryやその他プラグインはとても便利ですが、かわりにそのファイルを読み込まなければいけません。つまり遅くなっちゃいます。
ということで、JavaScriptを使うのであればVanillaで書く。
近年は『脱jQuery』なんて言われていますし、素のJsで書くのに慣れて置いたほうが何かと良いでしょう。JavaScriptの理解も深まります。
画像はcssスプライトつかう
たくさん画像ファイルを読み込むのもそれだけ時間がかかるので、できそうな部分でcssスプライトを使う。
1枚の画像で、cssで見せる範囲を操作するやつです。背景のあるボタンのホバーとかでよく見かけます。
ファストビューがきれいに見えるcssだけ先に描画されるようにする
先程のcssスプライトも上記の記事からピックアップしました。
『ユーザーがサイトを訪れて一番始めに見える部分のcssだけをインラインで書いて、その他のスタイルは後から読む』という方法。
これはなるほど、そういうやり方があるのだなと新発見でした！
キャッシュを使う、gzip圧縮する
表示が速いといえば、dev.to(https://dev.to/)というサイトも有名らしいです。
(海外版のQiitaみたいなサイトらしい)
このサイトの開発者の方(たぶん)が書かれている記事に、なぜdev.toが速いのかというのがありました。
英語の記事ですが、Googleさんが翻訳してくれるので読んでみると、
- キャッシュを使う
- gzip圧縮する
とあります。(他にも書かれていますがちょいムズなので飛ばしましたw)
その他 読んでみた記事たちいろいろ
-
同時アクセスの不可軽減
-
動的コンテンツの不可軽減 ← 爆速サイトは静的サイトだから今回は関係ないかも
-
ソースを圧縮して1つにまとめる
-
CSS･Jsは非同期
-
画像軽く
-
gzip圧縮･キャッシュ
-
gzip や deflate を使用してリソースを圧縮
-
スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除
-
ブラウザのキャッシュを活用する
WEB高速化の知識を知るのに良さそうな書籍
HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門
【まとめ】サイト高速化するにはこれを試そう
- pjax
- VanillaJS
- cssスプライト
- ファーストビューのcssだけインライン
- キャッシュ
- gzip圧縮
調べごとするのって楽しいな！
スキル面でいうとVanillaはあんまり書いたこと無いので、勉強してみます！
【おまけ】すぐできる画像圧縮
少し知識があればすぐにできるやつです。
画像のサイズを小さくする
画像のサイズは適切にしましょうってことですね。
デジカメとかiPhoneで撮った写真はファイルのサイズがかなり大きいです。
私がファイルの圧縮とリサイズにいつも使っているのは『iLoveIMG』というWEBツールです。無料で使えます。
例えば、
上記の花火の画像。これは私がiPhone7で撮影した写真を圧縮･リサイズしたものです。
元の大きさはこちら↓
大きさ 4032×3024、3.5MB
でかすぎw
リサイズすると↓
大きさ 800×600、215KB
だいぶ軽くなりました。
