仕事｜Webサイトパフォーマンス改善奮闘記
ある日、情報収集のため参加しているコミュニティにこのような質問が投稿されました。
『障害者差別解消法の改正で民間企業サイトへのWebアクセシビリティ実装義務化が2024年7月と迫っていますが、みなさん対応はどうされていますか？』
…義務化？初耳だったので調べてみると、おそらく義務化されるだろうという旨の記事を見つけました。
管理しているサイトの画像形式をWebPにしたくらいで、ALT属性や表示速度等は改善していなかった私は焦りました。
なぜならLighthouseで測定した結果、パフォーマンスは40%に満たないくらい、アクセシビリティも60%ほどだったからです。
ALT属性は前後の文に自然につながるものかと言われればそうでもなく、indexページにYouTube動画があるので表示が遅い。
表示の遅さは前から気になってはいたものの、いい方法が思いつかず手付かずでした。
Googleからおすすめされたlite-youtube-embedを使うとYouTubeの遅延読み込みができる、ただスマホから再生するためには2度タップする必要がでてくるとのことで、できれば使いたくありません。
なにかいい方法はないかな？と思っていたら、いいタイミングでTwitterでこんな呟きを見かけました。
もちろんレイアウトシフトもだけど、意外とloading="lazy"使ってないんですかね…？
— 長谷川喜洋★星のソムリエ®/HASEGAWA Yoshihiro (@hiro_ghap1) April 17, 2023
width/heightは入れるデメリットがないから入れればいいのにと思ってます… https://t.co/RNcE2WEytF
loading="lazy"
…知らなかった。使ってない。
imgだけじゃなくて、iframeにも入れれるだと？
スクロールに合わせて読み込んでくれるだと？
それは入れなければ！
width/heightも場面場面でhtmlだったりcssだったりしているので、可能な範囲でhtmlに記述し直し、loading="lazy"も入れることにしました。
同時にALT属性も修正。ギャラリー的なところは仕方ないとして、前後の文と繋げられそうな画像はできるだけ見直しました。
そうして更新し直したところ、パフォーマンスが大幅に改善しました！
やったー！
まだ無駄なJavaScriptを消しなさいなど改善策は提示されるけど、最低ランクの赤色は無くなりました！
アクセシビリティの他の部分は下記を参考にゆっくり改善していこうと思います。見た目の部分はクライアントの了承もいるので。
デザイナー3年目、まだまだ出来ることは少ないけど、少しずつこうやって出来ることを増やしていきたいと思います。がんばろう！