イベント参加ログ》WEB制作者なら知っておきたい！WEBページ高速化ノウハウ入門 11/09 13:00-16:00

gmohoscon.connpass.com

「HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門」の著者:佐藤あゆみさんによるWebページ高速化の基礎とノウハウの講演とデモ実演セミナーを聴講した。

スライドのクオリティが高く（アトラクティブかつわかりやすい）、内容的にも実践的で中身の濃いセミナーであった。 定員オーバーによるキャンセル待ち要員のところ、日が近くなってから繰り上がり当選だか 増席だかで まんまと参加できてラッキーだった。

参加目的・獲得目標

Webページ高速化の手法を習得して、クライアントへのサイト改修提案などに生かしたい。

【聴講note１】佐藤あゆみさん @PentaPROgram Web高速化の話

前編: 講演

• スマホ利用者の増加 =>85%（スマホのみ46%, PC併用39％)
• 3秒を越えると53％離脱
• ユーザの時間、ギカを無駄に消費しない（インバウンド・海外旅行者には切実）
• ファクターは、①通信環境、②Webサーバ、③コンテンツ、④閲覧端末 。このうち ① と ④ は制作側では制御できない。

• ツール

  • WebPageTest
  • PageSpeed Insights Google
  • Google Search Console の「速度」機能。試験運用中。
  • Chrome DevTools（検証ツール）

• 最も簡単＆効果があるのは画像最適化

  • ファイル形式
    • JPG、PNG、GIF
    • SVG
    • WebP（うぇっぴー） 　IE/Safariが未対応　
  • 画像リサイズ
    • media属性で画面幅別の出し分け & srcset属性で画像解像度別の出し分け
      • WordPress v4.4以上なら自動でmedia, secret属性が入る。サムネイル画像サイズを指定するとやってくれる。
  • 最適化サービス
    • TinyPNG（圧縮パンダ） pngだけでなくjpegもOK
  • ローカルツール
    • Macなら ImageOptim — better Save for Web
    • Windowsなら 「Antelope」
    • WordPressプラグインなら EWWW Image Optimizer
  • 適切な書き出し形式を選ぶの重要

• ブラウザ・キャッシュの活用

  • .htaccess で ExpiresByType ファイル種別ごとにキャッシュ有効期間を設ける
  • ワンポイントヒント：テスト開発中はキャッシュを無効化しておく

• 文書の圧縮: Minify,　gzip圧縮

  • Minify コメント・空白文字を減らして小さくする
    • minifyer.org, Dreamweaverやエディタ機能で、タスクランナーで。
  • gzip圧縮 サーバサイドでテキスト圧縮
    • .htaccess に mod_deflateの設定をする
    • ネットワークツールでhttpヘッダーを見ると Content Encoding: gzip となってる

• 読み込み順序の最適化

  • JavaScriptを後回しにするにはdefer属性（後回し）や async属性（順不動で即時実行）を追加するだけでよい <script src="..." defer></script>
<script src="..." async></script>
  • CSS : 1stビュー用のCSSとそれ以外で分ける
    • 1stビュー用のCSSは、head内に直書きする
    • <link rel="preload" href=... preloadを使うと非同期で読み込む IE/Safariを除く
    • Critical Path CSS Generator - by Jonas Ohlsson を使う。1stビュー部分のCSSだけ切り出してくれるツール。
  • 画像のLazyLoad
    • Chrome限定だが loaading属性で LazyLoad と同じ効果が得られる <img loading="lazy"
  • ファイルを一つにまとめるTipsは、HTTP/2 時代では不要に。
  • 不要なコンテンツは削除する。
    • スライダーの2枚目以降を見る人は 2%。スライダーやめて1枚絵にしちゃう選択もあり。
    • TOPページに古すぎるニュースの一覧（与える印象も悪くデメリットの方が大きい）
    • Facebook/Twitterウィジェットがページを遅くすることがある -> 単なるSNSボタンでよくね？
    • 広告・解析タグ -> キャンペーンが終わったら忘れず外す
    • 未使用・古いWebフォント
      • font-display: swap
        「Google Fonts」にfont-displayを適用する方法 | 東京上野のWeb制作会社LIG　
      • 最新バージョンのWebフォントの方が速い

後編: Webページ高速化 実戦デモ

後編は、
・実在サイトの遅滞要因をChromeのDevToolssで分析してみせてくれたり、
・サンプルサイトに対して、前編で言及された最適化手法を順に適用して PageSpeed Insights のスコアがどんな風に改善されるかの実演で進んだ。

• TTFBに時間がかかっている場合 -> サーバが遅い
  TTFB とは Time to First Byte の略、つまり「最初の1バイトが到着するまでの時間」
  • PHP, MySQL, WP自身を最新バージョンにすると 速くなる可能性がある
  • PHP5.4 -> 7にするだけで何倍か速くなる（ さくらインターネットのデータ
  • 長く同じサーバを使っているならば、同じホスティングでも新プランに乗り換えるだけで速くなる可能性がある
• 全ページで表示する画像（サイドカラム掲載のバナーとか）がデカくないか？
• 例えばWPのプラグイン「Check Copy Contents(CCC)」のように、セキュリティ上問題のあるプラグインとか開発が止まったプラグインが悪さしている場合がある
• consoleに表示されているエラーコード
• 古いアフィリエイトコード残存
• 画像の最適化: 手間と効果のバランスが大切。それが面倒で更新頻度が墜ちるぐらいならまずまずな感じでいい。
• 爆速WordPressテーマ
  • Luxeritas ・・・ 個人ブログならこのテーマ。PageSpeed Insights が100点になる。
  • Underscores ・・・ ビジネス用途ならこれ。いわゆるブランクテーマ。
• WordPressおすすめプラグイン？
  • 不要プラグインを無効にするのが基本
  • プラグインを外して自前のコードに書き換えると速くなる場合がある（SNSボタンを挿入するプラグインとか）
  • Autoptimizeプラグインを使ったコード最適化設定 | Pasolack-パソラック-
• サンプルサイトを使って最適化のデモ

【聴講note２】ロリポップのなかの人によるWeb高速化のハード（サーバ選びや設定）の話

ロリポップのなかの人（登壇者のお名前失念 ^^;）によるWeb高速化のハード面（サーバ選びや設定）の話。

• レンタルサーバーのサービス選び。ポイント3つ
  1. SSD
  2. Nginx、LiteSpeed
     • LithSpeed の特徴
       • HTTP/2完全対応
       • 応答反応が高速
       • WordPress専用キャッシュを利用可能
       • LOLIPOP!ハイスピードプランが対応している
  3. PHPの環境
     • PHP5.6とPHP7.3では処理能力が3倍違う
     • ただし対応してないWPプラグインがあるので要事前チェック
     • PHPの提供方法によってレスポンス時間が大幅に異なる（モジュール版PHP(fastCGI), LASPI, CGI版）
     • モジュール版PHP ＜＜ CGI版 : CGI版は同時アクセス数が12倍遅い
• たいていのサイトはホスティングで十分やっていける。
• 契約する前に「サーバの仕様」を確認しましょう（料金だけで決めないで ^^;）。
• GMOのサービス紹介
  • WADAX安心WPサーバ
    • CDN「Speed Kit」 WPが5倍速になるらしい
    • SSLがマスト(Let's Encript対応している）
  • conohaWING (Nginx+LSAPI)
    • PHPアプリケーションが20%速い
    • コンテンツキャッシュ機能がコンパネから1クリックで有効化できる
  • CORESERVER
    • 新規格にいち早く対応する（しかもユーザに意識させない）運営思想でやってるよ。
    • 例えば HTTP/2, TLS1.3 は標準対応。QUIC,HTTP/3、LiteSpeed などにも早期対応予定。
  • LOLIPOP
    • 強力キャッシュ機能がボタン一つ。キャッシュ対応ファイルを選べるのでECサイトでも活用できる。
    • 同時アクセス数を拡張可能。3日間限定で開放できる（予約可能で、追加料金なし）
      • x日に キャンペーンを打つ予定があるから拡張しよう。。。みたいな使い方ができる

気づき・感想

• 冒頭にも書いたが、
  佐藤あゆみさんの講演スライドが、デザイン性高くアトラクティブ かつ 非常にわかりやすくて感銘を受けた。内容的にも実践的で、明日からすぐに業務に使えるようなノウハウが多くて身になった。

• 目の前で、コードを書き換えたり画像圧縮して PageSpeed Insights のスコアに即反映される様を確認でき 納得感ハンパないデモだった。

• GMO傘下のホスティング・サービスは複数似たようなのが乱立してる印象だったけれど、よく見ればそれぞれ独自性があるらしい。

• 参加者はフロントエンドのコーダーや私のようなWebディレクターが中心かと思ったら、案外インフラ周りやバックエンドのエンジニア層多めな感じだった。

その他、雑多な気づき

• セルリアンタワーは、普段からオフィスパートの入り口がややわかりづらい。今日は、開場時刻10分前ぐらいに着いたのだが、いつもの入り口には「閉鎖中だから向こうに回れ」とか書いてあるし、ガラスの向こうにひとけもないし、イベントを匂わせるようなポスターもなんもないので、別の入り口を探してタワーの裏側に回ったりホテルの方や警備の人に聞いたり結構ウロウロもし、不安な気持ちにもなった。定刻にはスタッフが下に降りてきて一安心したが、時間前に人が居ないまでも、なんらかのサインを出して置いてくれたら、いつもの入り口前で待っていられたのになぁと思った。
• 最近、Apple Watchでピッばかりで、ろくに現金を持ち歩かないものだから、会場で 佐藤さん本、買えませんでした。残念。

HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門

っていうか。。。いい歳した大人が お財布に1000〜2000円ぽっちなのは我ながら いかがなものか、と思ったww。 まぁ、いいっか(´▽) ',、'`,