Lighthouseの「Background and foreground colors do not have a sufficient contrast ratio.」の対処方法

文字と背景色のコントラスト比を上げる事で解消できます。 chromeの開発者ツールを開いて、該当タグのstyleのcolorにある四角の色表示をクリックします。以下の様にコントラスト比が表示されます。ここでは、4.34と … 続きを読む Lighthouseの「Background and foreground colors do not have a sufficient contrast ratio.」の対処方法

Lighthouseの「Buttons do not have an accessible name」の対処方法

ボタンタグにaria-labelを追加すれば解消します。自身のケースではVuetifyを使用していたためv-btnタグにaria-labelを追加しました。 aria-labelとは? テキストラベルが画面に表示されない … 続きを読む Lighthouseの「Buttons do not have an accessible name」の対処方法

Lighthouseのスコアを改善する 〜JSの依存解消編〜 4日目

LaravelアプリケーションのLighthouseのスコアを改善していく企画の4回目。前回、jsファイルにgzip圧縮を書けることでサイズの削減に成功した。今回も引き続きLighthouseの改善提案を元に修正していく … 続きを読む Lighthouseのスコアを改善する 〜JSの依存解消編〜 4日目

javascriptをgzip圧縮してLighthouseのスコアを改善する

LaravelアプリケーションのLighthouseのスコアを改善していく企画の3日目です。前回、font-awesome関連の不要なファイルを削除してjsのサイズを削減した結果、Lighthouseのスコアが9点から1 … 続きを読む javascriptをgzip圧縮してLighthouseのスコアを改善する

Lighthouseのスコアを改善する 〜Preload編〜 2日目

前回、jsのサイズを削減すべく、font-awesomeをフル読み込みしていたのを、使用するアイコンのみに絞り込む事で、jsのサイズを削減しました。今回も引き続き、Lighthouseのスコアを改善してきます。で、作業着 … 続きを読む Lighthouseのスコアを改善する 〜Preload編〜 2日目

Lighthouseのスコアを改善する 〜First Contentful Paint編〜 1日目

個人で作成したLaravelアプリケーションをLighthouseのチェックにかけてみたらスコアがズタボロだったので改善したい。 項目の意味は? 以下の公式ドキュメントを参照しながら意味を読み解いていく。https:// … 続きを読む Lighthouseのスコアを改善する 〜First Contentful Paint編〜 1日目