ハマログ

株式会社イーツー・インフォの社員ブログ

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

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

  yt   2019年11月12日


関連記事

Adobe Fonts のWebプロジェクトの使い方

Adobe FontsはAdobe社が提供しているサブスクリプションフォントライ…

ロゴマークとロゴタイプについて

先週末からなんどもWPにYouTubeの動画埋め込みにチャレンジしているが、 ・…

デバイスごとにフォントを変える方法

某案件で、クライアントの指定でGoogle FontのM PLUS Rounde…


← 前の投稿

次の投稿 →