遅延読み込みを改善!SEO対策を行う上でユーザビリティをUpさせる為にサイトスピードの改善は避けて通れません。遅延読み込みを改善」って一体何なのか?って事ですが、Googleが提供するサイト表示スピードを計測するサイトがあります。Insightsここでは、サイトURLを入力すると自動的に表示スピードが計測でき、改善点があれば教えてくれる便利なサイトになります。改善前の結果から見ていきます。「使用していないCSSの遅延読み込み」の項目で、という長いCSSが表示されているのが分かります。これはWordPressにデフォルトでインストールされている絵文字の機能になります。今回は、このCSSに注目して改善を行っていきます。改善後は以下のようになります。改善後は先ほどまで表示されていたを削除できているのが分かります。遅延読み込みを改善してサイトスピードは速くなるの?今回、何回か検証してみましたが、サイトスピードはそこまで速くなることはないかな?っていう結論になりました。検証結果は以下のようになります。遅延読み込みを改善した場合とをそれぞれ交互に10回ずつ試してみました。平均点数も同じになって、そこまで変わらないという結果になりました。遅延読み込みを行わせる関数を入力した場合の比較を行いました。結果は以下のようになりました。遅延読み込みを行わせる関数を入力した場合の方が、若干点数が上昇しました。診断結果で「改善できる項目」に表示される以上、やはり改善を行ったほうが良いと思われます。Googleはユーザーファーストを掲げており、SEO対策としてもサイトスピードの改善は必須であるからです。「チリも積もれば山となる」という言葉にもありますように、少しずつでも改善項目を減らしていくことが、重要であると考えます。遅延読み込みの改善方法それでは、具体的な改善方法について解説していきます。遅延」って何?といは一体何のことでしょう。今回はこちらのサイトを参考にしました。CSSここで解説されているのを要約すると、ブラウザーは、ユーザーの画面にコンテンツを表示またはレンダリングする前に、検出したすべての外部スタイルシートをダウンロードし、解析し、処理する必要があります。各外部スタイルシートは、ネットワークからダウンロードする必要があります。これらの余分なネットワークトリップは、ユーザーが画面上のコンテンツを見るまでに待たなければならない時間を大幅に増やすことになります。引用:https://developers.google.com/web/tools/lighthouse/audits/unused-css簡単に説明すると、まず、Webサイトにアクセスがあってサイトが表示され始める時、外部のスタイルシート(CSS)をダウンロードします。このダウンロードを行っているときはHTMLやJavaScriptの読み込みが止まっている事になります。読み込みが停止している時間があることにより、サイトスピードが遅くなるということになります。WordPressの絵文字機能もこのCSSであり、一番最初に読み込まれるサイトのヘッダー部分にあって以下のように表示されています。今回の改善ではこのCSSの読み込みを無効にする方法になります。プラグインを使用してCSSの読み込みを無効化するプラグインを使用してCSSの読み込みを無効化する方法について解説していきます。このプラグインをインストールするためには2通りの方法があります。Emojis」配布サイトから直接ダウンロードプラグインを配布しているサイトから直接ダウンロードを行い、サーバ内のWordPressディレクトリに直接インストールする方法になります。これはディレクトリ構造が分かっている方にオススメの方法になります。WordPress管理パネルのプラグイン新規追加からインストールWordPress管理パネルの「プラグインを新規追加」からインストールする方法になります。直接ダウンロードに比べこちらの方が直感的にインストールできるので初心者の方にオススメの方法です。Emojis」配布サイトからダウンロードまずは、プラグインを配布しているサイト(WordPress.org)へ移動し、ダウンロードをクリックします。サイトはこちらになります。Emojisこちらのサイトでダウンロードしたプラグインを「/wordpress/wp-content/plugins」ディレクトリにアップロードします。ダウンロードしたプラグインを展開します。アップロードが完了したらWordPress管理パネルから「インストール済プラグイン」をクリックします。すると、プラグイン一覧の中にインストールされたのが分かるので、「有効化」をクリックします。※この時、ディレクトリに直接アップロードした場合は必ずファイルの所有権の変更を行っておきましょう。これで、直接インストールする方法は完了しました。WordPress管理パネルのプラグイン新規追加からインストール次に紹介するのは管理パネルからプラグインをインストールする方法になります。管理パネルから「プラグイン新規追加」をクリックします。Emojis」と入力します。このように表示されるので「今すぐインストール」をクリックします。有効化をクリックしてインストールが完了します。管理パネルからプラグインを見てみると、以下のようにインストールされているのが確認できます。有効化をクリックしたら絵文字機能が無効化されることで、同時にCSSの読み込みも無効化されます。functions.phpファイルを変更してCSSの読み込みを無効化するここでは「functions.php」というファイルに関数を書き込む設定になります。この設定は1回のコピーと貼り付けで終了しますのでとても簡単です。万が一があるので、この設定を行う前には必ずバックアップ(ファイルのコピー含む)をとっておきましょう。管理画面が真っ白になってWordPressにアクセスできなくなる可能性があります。「functions.php」ファイルはWordPressの設定に直接関わるものなので、以下の手順通りに作業して下さい。トラブル等が発生した場合はお問い合わせからご連絡お願いします。Child」ですが、他のテーマでもやりかたはほとんど同じになると思います。管理画面左の外観からテーマの編集をクリックします。右側にある「テーマのための関数」(functions.php)をクリックします。「テーマのための関数」(functions.php)をクリックすると左側に関数の文字列が表示されます。ここに書かれている内容は人それぞれで違います。array();}を貼り付けます。Emojis」で使用されている関数で、これをプラグインとしてインストールするのではなく、直接スタイルシートに書き込む方法になります。Emojis」フォルダ内の「disable-emojis.php」で見ることができます。emoji's」は何の設定を行うかの説明になります。「//」の後ろは、設定に反映されませんので、自分で分かりやすいコメントを書くと良いと思います。今回は「emoji'sの無効化」と入力しています。最後の「}」も忘れないで貼り付けて下さい。);」まででOKというように説明している場合もありますが、自分の場合は何回試してもビジュアルエディタ画面に不具合が発生しました。後半部分を記載すれば、不具合が改善されたので、上記の関数を全て記載する事をオススメします。貼り付けたら、下図のようになります最後に「ファイルを更新」をクリックして終了になります。サーバー内の「functions.php」ファイルを直接変更こちらは、サーバー内にある「functions.php」ファイルを直接変更する方法になります。この方法は、サーバーのファイルを扱える方のみ行って下さい。参考までに、変更方法を載せときます。サーバー内の「functions.php」の変更も中身はテーマの関数の変更と同じです。管理画面から設定してあげるほうが簡単ですね。遅延読み込みを改善する方法について解説してきました。テーマ内の「functions.php」ファイルの変更する方法は、もし今後使用するテーマが変わるたびに、同様の設定を行う必要があります。サーバー内の「functions.php」ファイルを直接編集できる方は、WordPress内の「functions.php」ファイルを変更すると後々テーマが変わっても設定しなおす必要がなくなるので、そちらをオススメします。サイトスピードの改善は、Googleの検索順位を上げるためにも必要な対策の1つになります。今回の設定の他にも色々な改善方法があるので、1つでも多く取り入れて、ユーザビリティをUpさせていきましょう。下にサイトスピードをUpさせる方法について書いた記事がありますので、よかったら見てみて下さい。サイト表示の高速化は、サイトを運営している方たちにとって、重要なテーマです。SEO対策を行う上でユーザビリティをUpさせる為にサイトスピードの改善は避けて通れません。今回は、多くの種類があるWordPressプラグインの中でも「高速化」を狙えるプラグインを使用してみたら、実際どのくらい高速化できるのかということを検証しました。Optimizer」を使用して画像の圧縮方法について解説していきます。ここでは、使用しないSNSアイコンの表示設定をオフにして簡単にWordPressを高速化する方法について解説していきます。サイト表示の高速化は、サイトを運営している方たちにとって、重要なテーマです。サイト表示の高速化は、サイトを運営している方たちにとって、重要なテーマです。Optimizer」を使用して画像の圧縮方法について解説していきます。SEO対策を行う上でユーザビリティをUpさせる為にサイトスピードの改善は避けて通れません。今回は、多くの種類があるWordPressプラグインの中でも「高速化」を狙えるプラグインを使用してみたら、実際どのくらい高速化できるのかということを検証しました。ここでは、使用しないSNSアイコンの表示設定をオフにして簡単にWordPressを高速化する方法について解説していきます。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。(1)タイトルとURLをコピーしました。