大学院生になってみた

プロ野球とSEOをこよなく愛する大学院生がいろんなことを書くブログです。

Googleのweb.devとは? 最新機能をサイトに実装しよう!

こんばんは大学院生です

 

こんなサービスを見つけました!

web.dev

その名もweb.devです。現在はベータ版です。

web.devとはサイトの分析や、そのサイトで実行可能なガイダンスによって、開発者がサイトやアプリにウェブの最新機能を習得して適用できるように支援するGoogleのサービスです。

web.devのキャプチャ

web.devのキャプチャ

要はですね、

サイトをテスト→そのサイトに足りていない、改善できる箇所を指摘→その実装方法を学べる→実装できるようになる→サイトの評価が高くなる

ということを目的にしているのだと思います。

確かに、最近は色々なサイトを改善する技術が登場していますが、その全てを追っかけるのは難しく、結局は現状のままになってしまうということはよくある話ですね。

しかし、このように悪いところを指摘してくれれば、改善もしやすいという話ですね!

ということで、とりあえずこのサイトをテストしてみました!

 

ちなみにこのテストの機能はもともとあった「Lighthouse」というサービスが用いられています。最近、PageSpeed Insightにも分析ツールとして導入されましたね。

そのLighthouseのテスト指標は5つあります。

  • 1.Performance…ページの読み込みスピードを評価
  • 2.PWA…PWAのチェックリストに反していないかを評価します(PWA…すっごく簡単に言うと、モバイル向けウェブサイト+アプリの機能のサイト)
  • 3.Accessibility…コンテンツへのアクセスを妨げる可能性がある一般的な問題を確認
  • 4.Best Practices…HTTPSの使用から正しい画像のアスペクト比に至るまですべてのものを評価 
  • 5.SEO…サイトが確実に発見されるためのベストプラクティスを確認

ではテストしてみましょう!

web.devのテスト結果

web.devのテスト結果

えーっとSEO以外あんまり良くないですね笑

しかし、安心してください!こんな感じでテスト結果を改善した時のインパクトが高い順で出してくれます。

f:id:masterzzz:20181115010755p:plain

 

さて、とはいえ実装なんてどうすればいいの?と思いますよね。

そんな人に向けて、Google先生は勉強できるようにしてくれています!

f:id:masterzzz:20181115011943p:plain

全編英語ではありますが、かなりしっかりしています。とはいえかなり専門的なので、やるときは根気が必要そうです、、、

 

まとめ

ということでweb.dev使ってみました!サイトの読み込み速度が遅いなどでお困りの方は一度テストしてみてみてはいかがでしょうか?

個人的には最高のサービスだと思いますよ!