ユアマイスター株式会社エンジニアブログ

ユアマイスター株式会社のエンジニアが日々徒然。

Google Lighthouseについて調べてみた vol.2 #lighthouse

f:id:yourmystar_engineer:20181218170205p:plain

こんにちは。ユアマイスター 星(@inase17000)です。

vol.1 に引き続き、前回語りきれなかったことをvol.2でお届けです。

Lighthouseとは?

Lighthouse は、ウェブページの品質向上に役立つよう開発された、オープンソースの自動化されたツールです。詳細は前回記事に書いてますのであわせてご覧ください。

yourmystar-engineer.hatenablog.jp

今回は差分のみ記載します。

Audit References - 診断

①Performance - パフォーマンス

Diagnostics

  1. Minimize main-thread work
  2. JS の解析、コンパイル、実行にかかる時間の短縮をご検討ください。配信する JS ペイロードのサイズを抑えると効果が見込めます。詳細"

    • 必要なJSコードだけを読み込み、実行する
    • JSコードをMinifyする
    • JSコードを圧縮する
    • 未使用のコードを削除する
    • 無用なネットワーク通信を避けるため、JSコードのキャッシュ設定を行いブラウザにキャッシュさせる
  3. Ensure text remains visible during webfont load

    • webfont読み込み中は、テキストで表示しておく
  4. Reduce JavaScript execution time

    • JavaScriptの実行時間が長いので短くなるようにする
    • 「Minimize main-thread work」と一緒
  5. Avoid an excessive DOM size

    • ブラウザ エンジニアは、ページに含まれる DOM のノード数が 1,500 個を超えないようにすることを推奨しています。ツリーの深さは 32 要素まで、子や親の要素数は 60 個までにするのが最適です。DOM サイズが大きいと、メモリの使用量が増え、スタイルの計算に時間がかかり、レイアウトのリフローというコストが発生します。詳細
    • DOMサイズを小さくして、解析時間とメモリ効率を上げる必要があります
    • yourmystar.jpではBEM記法でスタイル検索のリソースを最小限にできるよう工夫しています
    • DOM のノード数がオーバーしてしまう場合は、ページの要素数を減らす検討をします
  6. Serve static assets with an efficient cache policy

    • キャッシュの有効期間を長くすると、再訪問したユーザーへのページの読み込み速度を向上できます。詳細
    • Googleが許容する明確な基準は見つけられず...
    • 2592000秒(30日)の画像も指摘されてるので、結構ハードル高い気がします
      • 今度、60日にしてどうなるか、など閾値を実験で見つけてみよう(暇だだったら)
  7. Avoid enormous network payloads

    • ネットワーク ペイロードのサイズが大きいと、ユーザーの金銭的負担が大きくなり、多くの場合、読み込み時間が長くなります。詳細
    • ダウンロードするファイルの縮小を行います
      • レスポンスのテキスト圧縮
      • ファイルの圧縮
        • JS、CSS、画像ファイルのMinify
    • 画像の圧縮レベルを 85 にした上で元ファイルと比較して4KB以上の削減ができそうならば指摘が入る、というロジック
  8. Minimize Critical Requests Depth

    • クリティカル リクエスト チェーンでは、高い優先度で読み込まれたリソースを確認できます。チェーンの長さを縮小する、リソースのダウンロード サイズを抑える、不要なリソースのダウンロードを遅らせるなどしてページの読み込み速度を改善することをご検討ください。詳細
    • 「合格」や「不合格」を判定するものではなく、単なる示唆なので改善のための目安として使う
      • クリティカルなリソースの数を最小にする: リソースを削除する、ダウンロードを遅延させる、非同期にするなどの対策をとる。
      • クリティカル バイト数を最適化して、ダウンロード時間(ラウンドトリップ数)を短縮する。
      • 残りのクリティカル リソースの読み込み順を最適化する: クリティカルパス長を短縮して、すべてのクリティカル アセットができる限り早くダウンロードされるようにする。

③Accessibility - アクセシビリティ

ARIA Attributes Follow Best Practices

  1. [aria-*] attributes do not match their roles

    • role属性とaria-*属性は、WAI-ARIAで定義されている仕様です
    • htmlのタグだけでは明示できない要素の詳細な情報や、構造情報を書くことができます
    • slick.jsで生成されるHTMLに紛れ込んでました
  2. Elements with [role] that require specific children [role]s, are missing.

    • 特定の子要素が必要なrole属性を指定しているにも関わらず、その子要素のrole属性がついていない
    • これも、slick.js
  3. [role] values are not valid

    • 定義が間違ったrole属性が指定されている
    • うちのサイトの場合は role="image" というのが間違っていました。正しくは role="img" と指定しなければいけません
  4. [aria-*] attributes do not have valid values

    • 定義が間違ったaria属性が指定されている
    • これも、slick.js

Color Contrast Is Satisfactory

  1. Background and foreground colors do not have a sufficient contrast ratio.
    • 背景色と文字色のコントラストを十分につける

Page Specifies Valid Language

  1. element does not have a [lang] attribute
    • <html> エレメントに lang 属性をつける*1
    • つけてなくてもブラウザがよしなにしてくれるけどルール違反ではある

Elements Describe Contents Well

  1. Form elements do not have associated labels
    • フォーム要素にはラベルをつける
    • リーダーなどでサイトを見てるときに目印にするため、らしい

Elements Have Discernible Names

  1. Links do not have a discernible name
    • aタグで挟む間にテキストが入っていなければならない
    • 画像の場合は、altタグでテキストの指定を行う
    • これもリーダーなどでサイトを見てる時用

Meta Tags Used Properly

  1. [user-scalable="no"] is used in the element or the [maximum-scale] attribute is less than 5.
    • viewport指定で、user-scalable="no" となっている、か、maximum-scaleが5以下の場合
    • ユーザーにブラウザで拡大縮小を許容するかどうか、の指定ですがアクセシビリティとしては拡大縮小が自由にできるように指摘されています
    • サイトの提供したいUI/UXと相談しながら落とし所を見つける必要がありそうです

④Best Practices - ベスト プラクティス

  1. Does not use passive listeners to improve scrolling performance

    • Passive Event Listener を使用してサイトでのスクロール パフォーマンスを向上させる
    • jquery.min.js への指摘だったため一旦無視
  2. Uses document.write()

    • document.write() を使わない
    • 低速ネットワークだと、ドキュメントreadyを待って、実行までに長時間かかってしまうことかもしれないからできるだけ避ける
    • adsbygoogle.js への指摘だったため一旦無視
  3. Links to cross-origin destinations are unsafe

    • target="_blank" で別サイトに遷移するとき、リンク元のページとリンク先のページは同じプロセスで動作する
    • リンク先のページで負荷の高い JavaScript が実行されていると、リンク元のページのパフォーマンスが低下するおそれあり
    • rel="noopener" を付加する
  4. Uses deprecated APIs

    • 過去のChromeのバージョンで非推奨となったAPIを使っている場合に指摘されます
    • 今回はとある拡張機能スクリプト内で使われている chrome.loadTimes() が対象となっていました
  5. Displays images with incorrect aspect ratio

    • オリジナルの画像の縦横比と、表示されている画像の縦横比が一致していない場合に指摘されます
    • デザイン上わざと調整している場合などもあるかもしれませんが、不要な画像の読み込みにリソースを使わないよう、縦横比が等しい画像が用意できるとベターですね。

以上、全2回にわけました。いよいよ年末!2018年を振り返らねば!

この記事とは直接全然関係ないのですが、インターンのこの二人、デザイナーとエンジニアでPC画面のリニューアルに取り組んでもらってます。お客さんに動やったら喜んでもらえるか議論しながら進めています。いい風景だったのでパシャリ。