WEBページ高速化セミナーに行ってきた

先週asukaさんとGMOホスコンさんが主催したセミナー「WEB制作者なら知っておきたい！WEBページ高速化ノウハウ入門」に行ってきました。

「HTMLコーダー＆ウェブ担当者のための Webページ高速化超入門」を出版した佐藤あゆみ氏が登壇。
なんと！佐藤さんは12才から趣味でWeb制作をやっています。
（12才…私は漫画を読んでいました…）

読み込みに 3 秒以上かかるページからは 53% のモバイルサイト訪問者が離れています

だから高速化は重要。
ちょっと古い調査ですが、
ファーストビューの表示だけでも7秒かかるWebページは70%以上あったそうです。
これはユーザーの離脱率につながり、パフォーマスも下がります。

どうして遅いの？

• 通信環境
• Webサーバ
• コンテンツ
• 閲覧端末

この4点をあげられたが、コンテンツを中心に紹介してくださいました。
一番手っ取り早い画像軽量化以外に、個人的に実行してみたいことを整理しました。

ブラウザキャッシュ

開発中キャッシュは嫌われるが、公開後キャッシュの設定により読み込む時間が半分短縮できることもあります。

文書圧縮 – Minify

コメントや改行を無くしてアップロードする。
ただ、複数人の開発だとわかりにくいこともあると思ったが、
佐藤さんがSassなら管理しやすいと教えてくださいました。
（Sassも勉強しなきゃな…）

Javascriptの読み込みを後回し

 <script src="js/jquery-3.3.1.min.js" defer></script> 

このようにdeferをつけたらOK！すごく簡単

ファーストビュのCSSを優先に読み込ませる

 <link rel="preload" href="style.css" as="style"> 

ファーストビューのCSSだけ先に読み込ませるとより早く表示できます。
ただ対応しないブラウザもあるため、合わせてloadCSSというJavascriptライブラリを使うといいです。

最後に

会社で共有するために本を購入しました。
実践できるといいですね！

余談ですが、今月オープンしたばかりの渋谷スクランブルスクエアに寄ってきました。渋谷で一番高い建築らしいです。
美味しそうなものがいっぱいあった…(º﹃º )

参考資料

https://developers-jp.googleblog.com/2017/03/new-industry-benchmarks-for-mobile-page-speed.html

モバイルページのスピードに関する新たな業界指標