島崎 塁（しまざき るい）
現WEBエンジニア。
ブログアフィリエイトを3年半運営/月間20万PVへ到達するもGoogleアップデートに直撃し、泣く泣く転職を決意。
26才からエンジニアとして活動をはじめ、1年半、詳細設計、実装、テストなど幅広く業務に携わる。
2021年6月よりキュービックに入社。現在は主に自社内メディアのリニューアルなどを担当する。
こんにちは！キュービックのフロントエンドエンジニア、島崎です。
突然ですが、SEOってご存知ですか？
SEOとは「Search Engine Optimization」の略で、伝えたい情報をユーザーにきちんと届けるために、Webサイトの内容をGoogleなどの検索エンジンが理解しやすいよう最適化すること。
SEOがうまくできると、検索結果におけるWebサイトの順位が上がり、サイトへのユーザー流入数は10倍にも100倍にも変化する。ですから、メディア運営をしている人間にとってはすごく重要なものとなっています。
そんなSEOにはいくつかの指標が存在します。その中の１つが「Core Web Vitals（コアウェブバイタル）」、通称CWVです。これは、「ユーザー体験の良好さ」を評価する指標のことです。
▲SEOとCWVは親子関係になっている。
キュービックでは多くのWebメディアを運営していますが、実はその中にこのCWVのスコアが思わしくないものがありました。
今回はそのメディアについて、僕らがいかにCWVを改善していったかを紹介していこうと思います。
危険ラインにあったCWV
始まりは唐突なものでした。
グーグルサーチコンソールというサイトの情報分析ができるツールにて、「LCPの問題、CLSに関する問題」とメディアのCWVに問題がある旨の通知がやってきました。
情報を確認してみると、多くのページで「問題あり」という評価がなされていることが判明しました。
▲当時のサーチコンソール。赤色が急に増えていることがわかります。
改善の秘策はスピードインサイトにあり！
CWVのどのページで問題が出てきたかはわかったので、次に必要な情報は、「どうしたら問題が改善されるか？」「効果計測をどうするか？」です。
サーチコンソールは即時的に情報が反映されるものではないので、修正した後の効果が出ているかどうかがすぐにわかるわけではなかったのです。
そこで2つの問題が解決できるツールを探して見つけたのが「PageSpeed Insights（ページスピードインサイト）」です。
このツールでは、指定したページの現在のCWVスコアの確認や、問題がある部分をどのように修正すればいいかを教えてくれます。
▲当時のページスピードインサイト。問題ありのスコアになっていることが確認できます。
実際に修正。効果は？
今回は下記の2点を修正することで改善効果が得られそうなことがわかったため、実際に対応してみました。
1.指摘を受けた画像のwidthとheightを明示化
2.fontファイルの読み込みをなくす
そして、気になる効果は以下の通りです！
▲総合スコアが49→80へ好転！CWVスコアがかなり改善されたことがわかる。
このように、キュービックのフロントエンドエンジニアは、コーディング以外にもメディア側のスコア改善などの幅広い業務を行うことができます。
まだまだ伸び代のあるメディアが多数あるため、そういった部分の知識を活かしたい・勉強していきたいという方にはもってこいの環境かもしれません！
