Service WorkerはSafari対応の見通しより先に通常pageの更新を守る
- Service WorkerのSafari対応が進んでも、営業時間や問い合わせ先まで古い表示にしないために、cacheする内容、更新確認、通常pageを残す考え方を解説します。
タグ: JavaScript
広告を置くpageは収益の前に読者が本文と操作へ進める状態を確認する
- 広告を置くpageでは、収益の前に読者が本文と操作へ進めることを確認します。Chromeの広告filterをきっかけに、広告枠、popup、外部script、本文の順を見直す方法を解説します。
PageSpeed InsightsのFCPとDCLは最初に読める表示とpageの準備完了を分けて見る
- PageSpeed InsightsのFCPとDCLは、どちらもpageの速さに関わりますが示す場面が違います。最初に本文を読める状態とpageの準備完了を分け、読者の導線から改善を決める方法を解説します。
PageSpeed Insightsは実測の速さと改善余地のscoreを分けて読む
- PageSpeed Insightsのspeed scoreとoptimization scoreは同じ数字ではありません。実際の利用者の速度、改善余地、表示を保つ条件を分け、対象pageから改善を決める方法を解説します。
WordPressで投稿を保存できないときは本文を消す前にbrowserと更新前後の差を分ける
- WordPressで投稿を保存できないときは、本文を消して試しません。browser、WordPressのversion、更新時刻、下書き、公開pageを分け、失った内容を増やさず原因を確認する方法を解説します。
モバイルpageの表示速度は順位だけで決めず読者が待つ画面から直す
- モバイルpageの表示速度は、順位だけを狙って直すものではありません。読者が最初に開くpage、待たせる要素、問い合わせまでの導線を分け、PageSpeed Insightsなどで確認する方法を解説します。
aria-liveは画面内で変わった結果だけを短く伝えform全体を読み直させない
- aria-liveはJavaScriptで変わった結果をスクリーンリーダーへ伝える属性です。formのerrorや送信結果を短く知らせ、politeとassertiveを分け、画面の本文と同じ案内を確認する方法を解説します。
fetch()は404を通信失敗として扱わずresponseのstatusを確認する
- fetch()はHTTP 404や500を受けてもresponseを返します。通信できない場合、HTTP status、本文の形式、画面へ出す案内を分け、問い合わせformや一覧の失敗を確認する方法を解説します。
sessionStorageは同じ閲覧画面で続ける入力の補助に使い注文や問い合わせの正本を保存しない
- sessionStorageは一つの閲覧画面で続く入力を補助する保存領域です。localStorageやserver保存と混同せず、入力途中の表示と注文、問い合わせの正本を分ける方法を解説します。
外部scriptを読むときはSRIで固定するversionと更新を受けるresourceを分ける
- SRIは外部scriptやstylesheetの内容が期待したhashと一致するかbrowserで確かめる仕組みです。固定するversion、更新を受けるresource、crossorigin、公開後の確認を分けて解説します。
JavaScriptを使うmenuとformはscriptが動かない画面でも必要な案内へ進めるように作る
- JavaScriptで動くmenuやformは、scriptが使えないときも必要な案内へ進めることを先に確認します。noscriptへ頼りすぎず、HTMLとserver側の処理を残す方法を解説します。
MutationObserverはDOMの変更をまとめて受け取って必要な処理だけを動かす
- MutationObserverは監視するNodeと変更の種類をobserve()で指定します。MutationRecordのtypeを調べ、必要な更新だけを行い、不要になった監視をdisconnect()で止める使い方を解説します。
AdWords Scriptsは小さな定型処理をJavaScriptで自動化する
- AdWords Scriptsは、アカウント内に保存したJavaScriptで統計取得や定型変更を自動化します。対象の絞り方、Preview、スケジュール、APIとの違いを解説します。
