Webパフォーマンスガチ勢が本当に使っている技術

Webパフォーマンスガチ勢が本当に使っている技術

  • PagespeedInsights100点を獲得する
  • デブサミの話 ​

    概要

    自己紹介

  • プライムストラテジー中村けん牛さん
  • クサナギというCENTOSベースのシステム開発
  • KUSANAGISutakの開発
  • 高速化だけでなく自動化もやっているサービス ​

    論より証拠

    デモンストレーション

  • デブサミサイトを高速にします
  • Onimaruを利用
  • URLをみると見た目はデブサミだけど、違う
  • 見た目は同じだけどAzure上にサイト再現している
  • 本ちゃんのデブサミはChromeのDevToolでfinishまで20秒かかっていたが、高速化すると2秒になった
  • 本番をPagespeedInsightにかけた
  • 最適化したサイトもPagespeedInsightsにかけた
  • 本番は１４点で、最適化したほうは１００点だった ​

    内容ざっくりみた

  • DesableCacheを使う。ブラウザキャッシュ使わない
  • ソースコード比較して、変わっていることを確認 ​

    高速化の話

    高速化背景

  • Googleが早くしろってうるさい
  • Googleはモバイルファーストインデックスとスピードアップデートをめざす
  • Googleの広告収入があがるから早くしろって言ってくる ​

    モバイルファーストと５G時代高速化

  • バックエンドとレンダリングの高速化がより大きな差を生む時代
  • 速度にとってコア数は関係ない。結局直列に処理されるから ​

    高速化の目的

  • UXの最大化、PV、CVR、回遊率、滞在時間の工場 ​

    Web高速化のしくみ

  • ネットワーク、バックエンド、レンダリングを対象とする ​

    レンダリング

  • ファーストビュー、インタラクティブ、セカンドビューにわける
  • PagespeedInsightの配点はファーストビュー、インタラクティブが７割 ​

    バックエンド高速化

    構成

  • WordPressを想定
  • バックエンド高速化の基本はキャッシュ戦略が大事
  • キャッシュ戦略は、CPUを動かさない、ネットワークストレージにアクセスしない、高速な処理系を採用
  • キャッシュ利用の切り口として２つある
  • キャッシュを使った時に最新のアウトプットを保証するもの（キャッシュする）ー＞A
  • 過去の情報を再利用するもの（キャッシュしない個人情報だから）ー＞B
  • 直せつアプリケーションを修正するものとしないものー＞C
  • NginXを使うならLUAを使えば早くなるー＞D ​

    インスタンスの速度改善

  • CPUのコア数より周波数の高い処理系の方がスピードがでる（<-あたりまえ） ​

    OS

  • デゥクスキャッシュを活用する
  • バッファキャッシュを活用する ​

    nginx

  • 使い所注意なのは、個人情報をキャッシュしないこと
  • Open file cacheを設定ー＞ファイルクローズをせずに、置いとくことでオーバヘッドを減らす
  • Luaによるアプリケーションの高速化ー＞Nginxの処理をフックできる
  • Luaを使ったらNginxをサーバアプリフレームとして使える
  • JITコンパイラの方が早いー＞LUAJITおすすめ
  • PCREもPCREJITを使った方が早い
  • PHP5より７を使った方が2．５倍
  • OPCacheを導入ー＞コード変わればクリアされるから安心
  • APCu->インメモリのキャッシュ
  • PHPのPCREに関してもJITを使う方が良い ​

    MySQL

  • QueryCacheの導入
  • 参照クエリの実行結果をメモリキャッシュ
  • innodb_buffer_pool_sizeを絶対設定
  • innodbはOSのディスクキャッシュを使わないので、バッファキャッシュサイズ設定したほうがよい
  • 使われていないSQLクエリキャッシュ削除ー＞やりかたはググる ​

    WordPressの改善

  • I/Oにももとづく最適化処理
  • I/Oが同じならば、O/R Mapper使わずに、直接SQL実行して高速化 ​

    ネットワーク高速化（フロントエンド）

    ネットワーク帯域の確保

  • クライアントが５Gでもバックが100Mbpsだったりする ​

    画像リソース

  • 同一画像フォーマットの最適化
  • JPEとPNGでも WebPを使う
  • LazyLoadingをつかう
  • Chromeのカバレッジをみて何パーセント使っているかみる
  • テキストはgzip/blotliに圧縮 ​

    レンダリング高速化

  • レンダリングプロセスは通常のサイトは全部一度に実行する
  • ファーストビューに必要なリソースのみ最短で実行
  • それによってインタラクティブになるまでの時間を快適にする（ユーザ操作を受け付け可能状態）
  • 最後にセカンダリビューに実行する ​

    JS/Webフォントの遅延

  • 具体例はGoogleMAPはフッターにあるなら、フッターに行くまで描画する必要はないなど ​

    高速化の自動化

    以下ツールで自動化

  • Gulpで画像圧縮自動化
  • inotiywait -> https://qiita.com/hana_shin/items/9e03ad7a40b4fd7afb67