2019年6月 Google コアアップデート
6月初旬にGoogleの検索エンジンのアルゴリズムが更新され(コアアップデート)、GoogleのTwitterアカウントでは今回のアップデートについて詳しく状況を説明するツィートが散見された。
Tomorrow, we are releasing a broad core algorithm update, as we do several times per year. It is called the June 2019 Core Update. Our guidance about such updates remains as we’ve covered before. Please see this tweet for more about that:https://t.co/tmfQkhdjPL
— Google SearchLiaison (@searchliaison) June 2, 2019
アップデート内容に関連したGoogle2018年1月17日の投稿：
要するに前々からアナウンスをしていた「スマホでの読み込みスピードやそれに伴うUX(ユーザーエクスペリエンス)があなたの検索ランキングに影響を与えます」の内容が大きく検索結果に影響を及ぼすことになる変更が加えられた可能性が高い。
こういった検索エンジンの改善は日頃から行われているが、今回のように大きく告知されることは稀なので、スマホでのサイトの読み込み速度などのパフォーマンスに従ってオーガニック流入の数字が大きく変わる人が続出すると思う。
サイトの読み込み速度や読み込み時における改善点などはGoogleが提供している以下のサイトから確認することができる。
Google Speed Insight
このサイトに自分のサイトのURLを入力すると、読み込み速度の観点から100点満点中どれくらいのスコアかを教えてくれる。
ちなみにこのぶろぐ「ぽずかふぇ」の現在のスコアはそこそこ低い。現時点でのスコアは以下：
モバイルブラウザでの読み込み速度スコア: 25-32
PCブラウザでの読み込み速度スコア: 54-60
下で書いているWordPressプラグインを入れて色々といじって最適化を行った結果がこれである。時間帯でスコアが変わるが、全体的に改善されていてその前はモバイルは19-22、PCブラウザは49-55くらいだった。
表示される改善要項はどの人もたいてい以下だと思う。
- サーバー応答時間の短縮（TTFB）
- レンダリングを妨げるリソースの除外
- 使用していない CSS を削除してください
- オフスクリーン画像の遅延読み込み
- 次世代フォーマットでの画像の配信
WordPressサイトの読み込み改善について
上記改善要項は要するに、サーバーとの通信にかかる時間、画像やCSS、JacaScriptなどウェブサイトの表示や動作に必要ないコードが読み込まれている、ことを解決できればスコアは大幅に上がる。
通信時間を下げるためには、今使用しているサーバーをより良いものに変えるか、CDN (content delivery network)を使用を利用すると改善されるはず。CDNは Jetpack が無料で提供しているものをとりあえず使ってみるとよいかも (プラグイン新規追加画面から Jetpack と入力して検索)
またモバイル検索の質を上げるため、少なくとも検索エンジン内のランキングを上げるために「AMP」に対応しておく必要がある。
AMPとは
AMPはAccelerated Mobile Pages 。Googleが推進するプロジェクトの一つで、モバイルでのウェブページ読み込みをもっと高速に、快適にしてUX(ユーザーエクスペリエンス)を良くしましょう、というもの。
このページから自分のサイトがAMPに対応しているかどうか確かめてみましょう。サイトのトップページのURLではなく、”https://gegegegensan.com/2019/06/02/spiderman-far-from-home/”など記事が載ったURLを検索するようにしてください。
自分のWordPressサイトがAMPに対応していない場合はプラグイン新規追加画面で AMP と検索して AMP プラグインを入れるとよい。
その他いくつか試した中で、すぐに読み込み速度のスコアに改善を加えることができるプラグインを紹介する。読み込み改善系、画像処理、Javascript処理系のプラグインを複数使うとお互いが干渉しあって悪化する場合があるので自分のサイトに合ったものを一つ有効化するだけで良いと思う。
WordPressプラグイン Autoptimize
Autoptimizeはフロントエンド(HTML、CSS、JavaScript)コードの最適化を行ってくれ、画像の遅延読み込み(現在見ていないページの画像は今読み込まない)や、フォントの調整などを行ってくれる (Googleが提供するフォントを使っている場合に読み込みに比較的時間がかかったりする)
Autoptimizeプラグインはこちらから確認可能。WordPressサイトへはプラグイン画面から新規追加すると早い。
ちなみに別ブログ記事で紹介されていた他の画像遅延読み込みプラグインを使用してみたが、モバイルのブラウザによって「画面が表示されているのに画像がずっと読み込み中の状態になる」という問題が発生したので現在は使用していない。
自分が有効化しているのは以下の事項：
JS, CSS & HTML
- JavaScript コードの最適化
- Aggregate JS-files?
- CSS コードを最適化
- HTML コードを最適化
- 連結されたスクリプト / CSS を静的ファイルとして保存
- Minify excluded CSS and JS files?
Images
- Optimize Images
- Load WebP in supported browsers?
- Lazy-load images?
追加
- Google Fonts – Google フォントの削除を選択
- 絵文字を削除
- 静的リソースからクエリー文字列を削除
以前と比べてこれでだいぶ改善された。
Async JavaScript
async は「非同期」という意味で、このプラグイン「Async Javascript」は文字通り不必要なJavaScriptコードを読み込まないようにしてくれたり、今すぐ読み込まなくてよいJavascriptコードを後から読み込むようにしてくれる。
プラグインの Settings 画面にある Scripts to Async に読み込みが必要ではないJavaScriptのファイル名を , (コンマ)で区切りながら入力していけばよい ~~~.js,xxxx.js,yyy.js みたいに。Scripts to defer は読み込みを遅らせたいJavaScriptのファイル名を入力する。
入力すべきファイル名は、Google Speed Insight で改善要項として表示されたJavaScriptのファイル名をコピーしてScripts to Asyncに貼り付けてウェブサイトがどのように動作するか、Speed Insightのスコアはどう変化するかを確かめるとよいと思う。
また、jQueryはたいていの基本的なウェブサイト上の機能に使用されている可能性があるので、深い理解がない限りはjQueryの箇所は exclude にしておいたほうがよい。
構造を全て理解していないテーマをこのまま使用して手探りでやるか、自分で自分に合ったテーマ作ろうか考えどころである。自分で一から作る必要がないのがWordPressの良いところなのだが。
より技術に詳しくなりたい方、人に教えてもらったほうが早く理解できるタイプの方は、 TechAcademyが無料体験講座をやっていてHTML、CSS、JavaScriptについて教えてくれるようなので受けてみるといいかもしれません。
コメント