技術スポンサードリンクSEO対策はとても大変です。Webの高速化は知識が必要ですし、HTML構造の最適化も知識が必要です。古いサイトはjQueryをヘッダーで読み込んでいて、外すとサイトのコンテンツの大部分が動かなくなることもあります。意図せずディープWebを作ってしまっているサイトもあります。そんなSEO対策ですが、監査だけならGoogleが提供しているアドオン「lighthouse」を使うとかなり楽になるので、紹介していきます。このサイトで使ってみる。まとめLighthouseとは?Lighthouseとは・・・Googleによると以下のようなものになります。オープンソースの自動化されたツールでウェブアプリの品質向上に役立ちます。拡張機能として実行するか、コマンドラインから実行できます。指定して実行すると、ページに対する集中的なテストを実行してパフォーマンスに関するレポートを生成できます。今後は弱点を検出するテストを利用して、アプリの品質改善の指針を得られるようになります。Developersざっくりまとめると、Googleが想定している「ユーザーにとって使いやすいサイト」かどうか自動で判定してスコアを出してくれるものです。Google公式のものなので、非常に信ぴょう性の高いスコアになっています。※ただし、Googleのモバイルファーストの方針のためか、計測対象はモバイルサイトのみとなっています。レスポンシブデザインであれば問題ないですが、PC・モバイル間でレイアウトや情報を変更しているサイトは気を付けましょう。Report」を押す。コマンドラインでインストールして来て実行する。今回は使ってみようということでChromeのアドオンを使用します。このサイトで使ってみる。アドオンを追加します。ウェブストアのLighthouseにアクセス。矢印のボタンをクリックするだけで追加完了。「Chromeに追加」ボタンを押すと、ブラウザの右上にこのようなアイコンが表示される。Reports」ボタンを押すだけでスコアの計測が始まる。(やや時間がかかるので注意。)そして、このサイトのTopで実行してみた結果が以下になります。SEOの項目は気を付けているので、当然満点!(ドヤ顔)パフォーマンス(ページの速さ)も意識して画像サイズを小さくしたり、テーマも軽量のものを選んでいるので中々ですね・・・!緑色になりたいですが、それにはまだまだPHPの知識が足りない。App意外は50以上を取れています!それでは、それぞれどういう項目なのか、何を見てどう改善すれば良いかを解説していきます。Practice、SEOの5項目を順番に解説していきます。Performanceパフォーマンス、ザックリいうとページの速さです。パフォーマンスでも以下のさらに細分化した項目があります。Indexこれらは「最初にユーザーに何かしらが表示されるまでの時間」と「最初にユーザーに意味のある情報が表示されるまでの時間」「ファーストビューが表示されるまでの時間」です。Paintは、「とにかく何でもいいので表示されるまで(それこそ一文字テキストで「あ」とか表示されるまででも良い。Paintは、「意味のある要素が表示されるまで」となっている。「意味のある要素」の定義は、ページを読んだ限りだとページ最上部に表示される主要コンテンツであったり、ユーザーにとって便利な情報であったりするようである。情報量が多ければ多いほど遅くなります。「読み込みが失敗してるのかな」とか「これパケット通信料凄いことになってるんじゃ」とか「遅すぎてイライラする!」と思ってそのページは諦めて閉じるユーザーが多いのです。そのため、Googleはここの項目は、「1秒以内に表示するのがベスト」と言っていますし、実際早いページはSEOで上位に来ます。すれば早くなるのか?それには以下の2つのポイントがあります。サーバー側のレスポンスを高速にする多くのページはサーバー側から何か情報を受け取って表示します。この受け取る処理を早くしてあげるというわけです。MySQLを使っているならクエリチューニングや、Redis等の爆速KVSを使えないかの検討。何らかの複雑なアルゴリズムを使っているなら高速化出来ないか専門化に相談してみても良いかもしれません。非常に手間と知識が必要ですが、キャッシュサーバーとかを使っても良いかも。ファーストビューだけ先に読み込む。ユーザーが最初に目を通す部分だけ表示してしまって後ろの方は非同期で読み込んでいく方式です。最初の読み込みも最低限だけでいいのでかなり早くなります。これもある程度知識が必要になってきます。大事な部分ですがぶっちゃけ一番面倒です・・・。Latencyこれらは、ザックリまとめると「ユーザーの操作に関する時間」についての項目です。前から順に、「ページが最低限の操作可能な状態になる時間」「ユーザーが画面を操作できるようになるまでの時間」「操作に対して、レスポンスにどれくらい時間がかかるか」になります。上のフォームが操作可能だけど、下の方の要素はまだ読み込み中です。みたいな状態になればOKということ。(Googleの説明だとほとんどの要素が操作可能となっているので、もしかしたら一つだけだと駄目かもしれない・・・。Interactiveは、ユーザーが画面を操作できるようになるまでの時間なので、完全にすべての要素を操作できればOKというイメージで良いかと思います。フォーム入力などをなるはやで受け付けるようにした方が良いというイメージ。Analyticsなどを活用して、使われていない機能は削ってシンプルなページにしてしまいましょう。楽でしかも効果は抜群です。jQueryを使わない・便利だからってライブラリに依存しないjQueryは便利です。ネイティブjsで書くか、cssで出来ることはcssでやるか。ちなみにライブラリはなるべく使わない方が良いです。lazysizes等優秀なものならいいのですが、自分で書いた方が良いぞとなるようなライブラリも多いです。ライブラリって読み込みが必要なのでまたそこで読み込みという処理が発生して遅くなります。自分で書いてminifyして一つのファイルに全部ぶち込むビルド環境を作るのが理想です。lighthouseのアドバイスに従う色々書きましたが、難しいことを考えるより、lighthouseのアドバイスに従うというのが楽で効果があるかもしれません。今回の自分のサイトの結果には以下のようなアドバイスがあります。formats.これは、画像サイズがもうちょい小さくできるぜというアドバイスです。要はpngファイルをwebPとかjpeg2000にするといいよ!というようなことが書かれています。WebPはChromeしか対応してないから!!!やりたくても出来ないんだよ!!!!!と言いたい所ですが・・・。画像サイズが大きいのは事実なので、ちょっと圧縮してみたり色々工夫が出来そうです。比較的知識が必要なく、堅実な方法かもしれません。まとめ一旦Performance編ということでまとめてみました。lighthouseを使えば、SEO対策に自信のあるシニアエンジニアなどがいなくても良質なコンテンツを作ることが出来ます。(高速化にシニアエンジニアの腕が必要な時もあるでしょうが・・・)とはいえ、非エンジニアでも出来そうなアドバイスをしてくれているので、それを読んで、Googleのドキュメントを読んで、少しずつ対応していくだけでも随分良くなるのではないでしょうか。某配送システム白猫プロジェクトのアイシャが大好きなエンジニアの卵。Java/Shell/C++/HTML/Sass/rustかgoやりたい。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。WordPress.。