saikoの日記帳

技術
2018.10.18

開発者ツールの「Audits」とかいう便利ツール

実に便利な機能

前々からChromeの開発者ツールにはページスコアを測る機能がついてたんですが、久々に見たらめっちゃ進化してました。

今日会社で言われて気づきまして、尋常じゃないほどに便利になってたんですよね。 確か前まではせいぜいスコアが出る程度で、詳しくやろうとすると外部Webツールなどを使っていました。 そっちは大抵どこがどう悪いのかが表示されますからね。

それがですね、Google先生が重い腰を上げたのか、スコアだけでなく「何をしたらいいのか」を書いてしまっているんですよ。 これはもはや革命ですよ!革命! 一部の客層で少しWebに詳しくなると、SEOに詳しくなり始めるんですよね。 そんで、スコアツールとか使ってどうこう言い出すと本当に地獄。 中には「Amazonは80点超えてますよね」とか言い出す始末。

お前自分がAmazon並のコンテンツ力持ってるとでも思ってるのか?

流石に言いませんけど、結局どんだけSEO力高めてもコンテンツがコンテンツなら意味はねえんだよ! というのは置いときまして、とにかくスコアを上げてくれと言い出すんですよ。 それは仕方ねえと取り組むんですが、どこをどうやっても変わらない箇所とか出てきてもうほんと地獄。 慣れてくると何したら良いのかなんとなくわかりますが、ほとんど手探り。 そもそも大体がGoogle先生基準な癖して奴らその辺の情報を出したがらないと来たもんで。

これまではそうした中で一応スコアツールに書いてあることやってきたんですよ。

んで、今日見つけたこれですね。

こんなんもう最高。 何が嬉しいって、想像以上に事細やかに「ここをこうしろ」ってのが書かれてあることですかね。 残念なことに日本語ではありませんが、なんとなくわかるでしょ。

ちなみに上のスコアはこのページ(index)のスコアです。 静的ページでなおかつ画像とかも圧縮したりしてるので流石に良いスコア出てますね。 ちなみにスコアの雑な説明としては

  • Performance: (多分)CSSとかHTMLとか画像の圧縮とかしろってやつ(地味に面倒)
  • Progressive Web App: PWA化しろ
  • Accessibility: 多分W3C準拠な書き方すればスコアが上がる(class=""とかやってると下がる)
  • BestPractices: 見た感じJSの書き方とかSSL対応とかその辺を見てるっぽい?
  • SEO: viewportだとかレスポンシブだとかやってれば上がりそう(Twitterカードの設定とかも)

多分こんな感じ? ぶっちゃけこれで見るべき点はPerformance, BestPractices, SEOだと思います。 特に上と下の2つ。 PWAに関してはぶっちゃけ自己満足だと思ってます。 アレ活用するとなるとそれこそニュースサイトとかそこそこの企業じゃないと無理。 Google先生の罠。

個人的に嬉しい点としては、W3Cに沿わない書き方とかをHTMLの行数とかで指摘してくれる点。 多分これで書かれてあることを実施すれば大抵のスコアツールで良い点取れると思う。 ただ、Performanceに関してはWP使ってる場合良い点数取るのは難しいと思います。 それこそ圧縮バッチリキメて使ってるPHPの処理をなるだけ軽くする必要があるんで。

ウチが点数高いのはHexo使って静的なページにしてるからですね。 WP使うと、PHPで動的に記事引っ張ってくるので時間が掛かる、それはしゃーない。 Hexoの場合は、ローカルで生成したHTMLをWeb上にアップロードしてるだけ。 つまり生成に時間が掛かっても、それはHTMLの読み込みに一切影響しない。 キャッシュすると余計に速くなって超スピード!?って感じです。

本気の記事サイト作るとなるとHexoとかでは力不足な点が出ますが、そうじゃないなら便利なんですよ。 結局世の検索システムを牛耳ってるのはGoogle先生なので、こういう公式ツールで良い点取ろうね。 ここで点数高いとGoogle先生にしゅきしゅきされるので。

ぼくはSEO100点取れてるのでもうこれ以上しないです。 PerformanceはAnalytics入れてる時点で確定で数点下がるのでどうでもいいです。

それでは今日はここらでサヨウナラー

同じカテゴリの他の記事

新着記事