本稿は、2021年春の某日にオンラインで開催した、さくらインターネット社内向け勉強会の発表をもとに書き起こした記事です。前編ではDevToolsの概要と、ウェブサイトを”つかう”人向けの使い方を説明しました。 ウェブサイトを"つくる"人向け ということで次は、Webサイトを"つくる"人向けの内容です。 といってもフロントエンドエンジニアみたいにバリバリ使いこなすよりは、DevToolsの機能を使ってなんとなくわかる、なんとなく参考になるような情報を載せてます。なのであんまり難しくないと思います。 ウェブサイトの品質を知りたい まず1個目。Webサイトの品質を知りたいことってあると思うんですね。例えばSEO対策の効果を見るために、Googleとかで検索したときに上の方に表示されるかどうかとか。あとスクリーンリーダーを使っている人向けに、アクセシビリティの対応はどうなっているかが知りたいですとか。あとですね、ウェブサイトを外注したときに、納品されるじゃないですか。それを評価する方法ってエンジニアじゃないと結構難しいと思うんですね。そのときにこのLighthouse機能を使うと、その品質を測定できます。 Lighthouseのパネルを開いて、計測してくれるカテゴリが「Performance」「Accessibility」「Best Practices」「SEO」「Progressive Web App」ですけど、そのどれを計測したいかというチェックを付けて、実行するとスコアが上の画像のような感じで表示されます。 実際にやってみ
↧