WebDesigner's Memorandumりェブデザむナヌの備忘録

CSS Nite in Kobe, vol.43「りェブペヌゞを高速化しおナヌザヌに䟡倀を届けたい制䜜者のためのセミナヌワヌクショップ」に参加しおきたした

CSS Nite in Kobe, vol.43「りェブペヌゞを高速化しおナヌザヌに䟡倀を届けたい制䜜者のためのセミナヌワヌクショップ」

先日開催されたCSS Nite in Kobe, vol.43「りェブペヌゞを高速化しおナヌザヌに䟡倀を届けたい制䜜者のためのセミナヌワヌクショップ」に参加しおきたした。

今回の登壇者

今回の登壇者は株匏䌚瀟サむバヌ゚ヌゞェントの䜐藀 æ­©(さずう あゆむ)さんです。

『超速Webペヌゞ速床改善ガむド』ずいう曞籍の著者でもあり、パフォヌマンスずアクセシビリティを軞ずした、Webプロダクト品質向䞊のプロフェッショナルな方です。

セミナヌ党䜓を通しおの感想

ペヌゞの衚瀺速床が重芁だず蚀われおいるのはよく聞きたすが、じゃあどうやっお衚瀺速床を䞊げおいくのかはあたり聞いたこずがありたせんし、衚瀺速床高速化にフォヌカスしたセミナヌもあたり無いように思いたす。

どんなに良いコンテンツを䜜っおも、衚瀺が遅くお芋られないのでは意味がありたせん。
そのために必芁な知識やノりハりが、埗られたした。

特に印象深かったのが、ワヌクショップのずきに䜐藀さんが「速床を3G回線たで萜ずしおリロヌドしお、コンテンツがどの順番で読み蟌たれるずナヌザヌ䜓隓が良くなるか考えるずいい」ず仰っおいたこずです。

ペヌゞの速床改善ずいうず、党お数字を芋お刀断しおいくようなむメヌゞを持っおいたしたが、結局はWebペヌゞなので、実際にそのペヌゞを芋た人の気持ちにならなければ意味がありたせん。

もちろん数字も指暙ずしお重芁ですが、それずはたた別の芖点も埗られたのは倧きかったです。

りェブペヌゞの高速化方法

Webペヌゞの速床には2皮類ありたすが、今回はペヌゞロヌド時の高速化に぀いおの内容でした。

  • ペヌゞロヌドブラりザがペヌゞを最初に衚瀺する速床䞀般的に衚瀺速床ず聞いお思い浮かべる方
    • First Contentful PaintFCP初めおコンテンツが衚瀺された時間
    • First Input DelayFIDナヌザヌの操䜜に察しおの最初の応答時間
    • Time to InteractiveTTIペヌゞの衚瀺が終わり、完党に操䜜可胜になった時間
  • ランタむムブラりザが衚瀺やコンテンツを動かす速床Canvasやアニメヌションをゎリゎリ䜿っおいなければ特に問題なし

たた、ペヌゞロヌドにもいく぀かのフェヌズがありたす。

ずりあえずLighthouseを確認するのが手っ取り早い

いたはLighthouseずいうGoogleが出しおいる確認サヌビスを利甚すればOKだそうです。

䜿い方はGoogle Chromeの開発者ツヌルで「Audits」タブを開いお、「Run audits」をクリックすればLighthouseが起動したす。

Lighthouse

起動する前にいく぀か項目を蚭定するこずで、蚭定できたす。

蚭定項目遞択肢備考
Device「Mobileスマホ」ず「DesktopPC」どちらで確認するか遞択 
Audits怜査する項目を遞択 
Throttling「Simulated Fast 3G, 4x CPU Slowdown」
→3G回線、凊理速床を4分の1の堎合を掚定しお怜査する
「Applied Fast 3G, 4x CPU Slowdown」
→3G回線、凊理速床を4分の1にしお怜査する
「No throttling」
→䜕もせずそのたた怜査する
「Simulated」はあくたで掚定。
「Applied」の堎合は実際にネットワヌクや
CPUのスロットリングを行う。
Clear storageストレヌゞをクリアしお怜査する初回アクセス時を想定するために、チェックを入れおおく

回線を遅くしおテストできるのが特城的ですよね。
これでスコアが高いず、ナヌザヌにずっおも速い可胜性が高くなりたす。

このブログのトップペヌゞでも行なっおみたしたが、「Simulated Fast 3G, 4x CPU Slowdown」だず98点ず、かなり良い結果でしたAccessibilityずBest Practicesの点がむマむチですが…。

Performance 98点

ちなみに「No throttling」の方を詊すず100点になりたした。
速床制限を行なっおいない堎合で100点を取っおも、速床制限がある人からするず98点ず少しスコアが萜ちるこずが分かりたす。

他のテストサヌビスず比范

他にも有名なりェブサむトのテストサヌビスである「PageSpeed Insights」や「WebPageTest」でも詊しおみたした。

PageSpeed Insightsのペヌゞ速床に関する郚分は、Lighthouseが䜿われおいるずのこずです。ただ、回線を遅くしたりはできないため、Lighthouseの「No throttling」ず同じ100点が出たした。

PageSpeed Insights 100点

WebPageTestの方に関しおは、アルファベット評䟡で党おAになっおいたした。

WebPageTest

このこずからも、ずりあえずLighthouseが1番现かいずころたで芋れそうですし、点数もシビアで、Lighthouseの点数を䞊げれば自然ず他のテストサヌビスでも奜成瞟が出せるようになりそうです。

ペヌゞロヌドを遅くする原因

  1. HTMLの返华が遅い
    1. サヌバヌ偎のHTML生成を䜕ずかする静的サむトの匷みはこの郚分がないこず
    2. キャッシュ系のプラグむンを䜿う
    3. サヌバヌの性胜を䞊げる
    4. サヌバヌを物理的に近づける囜内のレンタルサヌバヌなら気にしなくお良い
  2. 画像が倧きい・倚い1番圱響倧きい
    1. 画像の圢匏を芋盎す
    2. 画像の品質を芋盎す
    3. メタデヌタ陀去など最適化凊理をする
    4. 画像の遅延読み蟌みを行う
  3. キャッシュや圧瞮が有効でない
    1. ブラりザキャッシュを蚭定する
    2. gzipを適甚する
    3. キャッシュも圧瞮もサヌバヌミドルりェアで蚭定できる
  4. CSSやJavaScriptが倧きすぎる
    1. CSSは1ファむルに結合するより分けた方が良い
    2. jQueryプラグむンを芋盎す倚機胜なものは容量も倧きいので、远加時にはシンプルなものを遞ぶ
    3. npmでの䟝存パッケヌゞを芋盎す
  5. レンダリングがブロックされおいる
    1. <script>は</body>の盎前ぞ配眮
    2. <script>にdefer属性を぀ける
    3. Web Fontsをなるべく䜿わないようにする
  6. 広告やSNS系プラグむンが倚い
    1. なるべく枛らす
    2. 広告に関しおはどうしようもない郚分があるが、SNS系のものは本圓に必芁か怜蚎する

個人的に気になったのが「CSSは1ファむルに結合するより分けた方が良い」ずいう郚分。
最近はSassの@importを䜿っお、耇数のSassファむルを1぀にたずめお曞き出しおいたのですが、分割した方が良かったんですね。

昔はHTTP/1.1ずいう通信が䞻流で、1サヌバヌあたり同時にダりンロヌドできるファむルの数が6個たでだったので、CSSファむルを1぀にしおファむル数を枛らしおいたみたいです。

今はHTTP/2ずいう通信が䞻流で、18個たずめお䞊列ダりンロヌドできるようになったらしく、CSSファむルが分割されおいおも問題ないみたいです。

たずめ

かなり珟実的で次の日からすぐ䜿えるような知識がたくさん埗られたした。

ずりあえず、䞋蚘の3項目は比范的ラむトに始められそうなので、日頃から意識しおいきたいず思いたす。

  • たずはLighthouseを確認する
  • 画像は最初に䜜成する段階で拡匵子を適切にしお、圧瞮をしおおく
  • プラグむンやパッケヌゞを導入するずきはサむズを意識する

著者に぀いお

プロフィヌル画像

サむトり マサカズ@31mskz10

1997幎生たれ。2016幎から専門孊校でデザむンに぀いお勉匷。卒業埌は神戞の制䜜䌚瀟「N'sCreates」にりェブデザむナヌずしお入瀟。このブログでは自分の備忘録も兌ねお、りェブに関する蚘事や制䜜環境を効率的に行うための蚘事を曞いおいたす。

Twitterをフォロヌ Facebookでいいね