使用していない CSS の遅延読み込みを改善!絵文字削除(wpemoji)

サイト高速化

絵文字(wpemoji)を削除して使用していない CSS の遅延読み込みを改善!

絵文字(wpemoji)を削除して使用していない CSS の遅延読み込みを改善する画像

SEO対策を行う上でユーザビリティをUpさせる為にサイトスピードの改善は避けて通れません。 そもそも「使用していない CSS の遅延読み込みを改善」って一体何なのか?って事ですが、Googleが提供するサイト表示スピードを計測するサイトがあります。

ここでは、サイトURLを入力すると自動的に表示スピードが計測でき、改善点があれば教えてくれる便利なサイトになります。

まずは改善前の結果から見ていきます。

改善前の結果 改善前の画像

「使用していないCSSの遅延読み込み」の項目で、

CSS遅延読み込みの画像

という長いCSSが表示されているのが分かります。これはWordPressにデフォルトでインストールされている絵文字の機能になります。

今回は、このCSSに注目して改善を行っていきます。改善後は以下のようになります。

改善後の結果

改善後の画像

改善後は先ほどまで表示されていた

CSS遅延が改善された画像

を削除できているのが分かります。

CSS の遅延読み込みを改善してサイトスピードは速くなるの?

今回、何回か検証してみましたが、サイトスピードはそこまで速くなることはないかな?っていう結論になりました。

検証結果は以下のようになります。

サイトスピード結果表示の画像

まずは何も行わない場合と、プラグインを使用してCSS の遅延読み込みを改善した場合とをそれぞれ交互に10回ずつ試してみました。

平均点数も同じになって、そこまで変わらないという結果になりました。

この結果をみて「プラグインを使用することでCSS の遅延読み込みを改善した」けれども、「プラグインを入れたことによってサイトスピードが落ちて相殺されたのではないか??」という疑問が出ましたので、

続いて、プラグインを使用した場合と、プラグインを使用しないで「functions.php」ファイルに直接CSS の遅延読み込みを行わせる関数を入力した場合の比較を行いました。

結果は以下のようになりました。

プラグイン使用有り無しの検証結果の画像

ぱっと見、ほとんど変わらない感じですが、「functions.php」ファイルに直接CSS の遅延読み込みを行わせる関数を入力した場合の方が、若干点数が上昇しました。

結局のところCSS の遅延読み込みを改善したほうが良いの?

結論からいうと、サイトスピードの上昇はそれほど見込めないけど、

診断結果で「改善できる項目」に表示される以上、やはり改善を行ったほうが良い

と思われます。

Googleはユーザーファーストを掲げており、SEO対策としてもサイトスピードの改善は必須であるからです。

「チリも積もれば山となる」という言葉にもありますように、少しずつでも改善項目を減らしていくことが、重要であると考えます。

CSS 遅延読み込みの改善方法

それでは、具体的な改善方法について解説していきます。

まず、そもそもタイトルにもなっている「CSS の遅延」って何?といは一体何のことでしょう。

今回はこちらのサイトを参考にしました。

Defer unused CSS

ここで解説されているのを要約すると、

ブラウザーは、ユーザーの画面にコンテンツを表示またはレンダリングする前に、検出したすべての外部スタイルシートをダウンロードし、解析し、処理する必要があります。

各外部スタイルシートは、ネットワークからダウンロードする必要があります。

これらの余分なネットワークトリップは、ユーザーが画面上のコンテンツを見るまでに待たなければならない時間を大幅に増やすことになります。

引用:https://developers.google.com/web/tools/lighthouse/audits/unused-css

簡単に説明すると、

まず、Webサイトにアクセスがあってサイトが表示され始める時、外部のスタイルシート(CSS)をダウンロードします。

そして、このダウンロードを行っているときはHTMLやJavaScriptの読み込みが止まっている事になります。

つまり、読み込みが停止している時間があることにより、サイトスピードが遅くなるということになります。

WordPressの絵文字機能もこのCSSであり、一番最初に読み込まれるサイトのヘッダー部分にあって以下のように表示されています。

ヘッダー部分の画像

今回の改善ではこのCSSの読み込みを無効にする方法になります。

プラグインを使用してCSSの読み込みを無効化する

プラグインを使用してCSSの読み込みを無効化する方法について解説していきます。

このプラグインをインストールするためには2通りの方法があります。

  • Disable Emojis」配布サイトから直接ダウンロード

プラグインを配布しているサイトから直接ダウンロードを行い、サーバ内のWordPressディレクトリに直接インストールする方法になります。これはディレクトリ構造が分かっている方にオススメの方法になります。

  • WordPress管理パネルのプラグイン新規追加からインストール

WordPress管理パネルの「プラグインを新規追加」からインストールする方法になります。直接ダウンロードに比べこちらの方が直感的にインストールできるので初心者の方にオススメの方法です。

Disable Emojis」配布サイトからダウンロード

まずは、プラグインを配布しているサイト(WordPress.org)へ移動し、ダウンロードをクリックします。

サイトはこちらになります。↓↓(配布サイトは別タブが開きます)

Disable Emojis

こちらのサイトでダウンロードしたプラグインを「/wordpress/wp-content/plugins」ディレクトリにアップロードします。

disable-emojisファイルのzip画像

ダウンロードしたプラグインを展開します。

disable-emojisファイル画像

アップロードが完了したらWordPress管理パネルから「インストール済プラグイン」をクリックします。すると、

プラグイン管理画面の画像

プラグイン一覧の中にインストールされたのが分かるので、「有効化」をクリックします。

※この時、ディレクトリに直接アップロードした場合は必ずファイルの所有権の変更を行っておきましょう。

これで、直接インストールする方法は完了しました。

WordPress管理パネルのプラグイン新規追加からインストール

次に紹介するのは管理パネルからプラグインをインストールする方法になります。

まずは、管理パネルから「プラグイン新規追加」をクリックします。

プラグインの検索に「Disable Emojis」と入力します。

プラグインを追加画面の画像

このように表示されるので「今すぐインストール」をクリックします。

有効化をクリックの画像

有効化をクリックしてインストールが完了します。

管理パネルからプラグインを見てみると、以下のようにインストールされているのが確認できます。

プラグイン管理画面にインストールされた画像

有効化をクリックしたら絵文字機能が無効化されることで、同時にCSSの読み込みも無効化されます。

functions.phpファイルを変更してCSSの読み込みを無効化する

ここでは「functions.php」というファイルに関数を書き込む設定になります。

この設定は1回のコピーと貼り付けで終了しますのでとても簡単です。

ただ、万が一があるので、この設定を行う前には必ずバックアップ(ファイルのコピー含む)をとっておきましょう。

管理画面が真っ白になってWordPressにアクセスできなくなる可能性があります。「functions.php」ファイルはWordPressの設定に直接関わるものなので、以下の手順通りに作業して下さい。もしトラブル等が発生した場合はお問い合わせからご連絡お願いします。

テーマの編集から変更

今回、例として使用するテーマは「Simplisty Child」ですが、他のテーマでもやりかたはほとんど同じになると思います。

管理画面左の外観からテーマの編集をクリックします。

テーマの編集ボタンの画像

右側にある「テーマのための関数」(functions.php)をクリックします。

functions.phpの画像

「テーマのための関数」(functions.php)をクリックすると左側に関数の文字列が表示されます。ここに書かれている内容は人それぞれで違います。(下図は初期設定状態)

functions.php入力画面の画像

この一番下に

/**
* Disable the emoji's
*/
function disable_emojis() {
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
remove_action( 'admin_print_styles', 'print_emoji_styles' );
remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );
remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );
add_filter( 'wp_resource_hints', 'disable_emojis_remove_dns_prefetch', 10, 2 );
}
add_action( 'init', 'disable_emojis' );

/**
* Filter function used to remove the tinymce emoji plugin.
*
* @param array $plugins
* @return array Difference betwen the two arrays
*/
function disable_emojis_tinymce( $plugins ) {
if ( is_array( $plugins ) ) {
return array_diff( $plugins, array( 'wpemoji' ) );
}

return array();
}

を貼り付けます。

この関数は、プラグイン「Disable Emojis」で使用されている関数で、これをプラグインとしてインストールするのではなく、直接スタイルシートに書き込む方法になります。

この関数は、プラグイン「Disable Emojis」フォルダ内の「disable-emojis.php」で見ることができます。

※2行目の「Disable the emoji's」は何の設定を行うかの説明になります。「//」の後ろは、設定に反映されませんので、自分で分かりやすいコメントを書くと良いと思います。

今回は「emoji'sの無効化」と入力しています。

最後の「}」も忘れないで貼り付けて下さい。

※他のサイトでは、前半部分途中の「〜add_action( 'init', 'disable_emojis' );」まででOKというように説明している場合もありますが、自分の場合は何回試してもビジュアルエディタ画面に不具合が発生しました。後半部分を記載すれば、不具合が改善されたので、上記の関数を全て記載する事をオススメします。

貼り付けたら、下図のようになります

functions.phpへコードを入力後の画像

ファイルを更新ボタンの画像

最後に「ファイルを更新」をクリックして終了になります。

サーバー内の「functions.php」ファイルを直接変更

こちらは、サーバー内にある「functions.php」ファイルを直接変更する方法になります。

この方法は、サーバーのファイルを扱える方のみ行って下さい。

参考までに、変更方法を載せときます。

ワードプレスフォルダの画像

wp-includesフォルダの画像

functions.phpファイルの画像

データベース入力画面の画像

サーバー内の「functions.php」の変更も中身はテーマの関数の変更と同じです。

管理画面から設定してあげるほうが簡単ですね。

まとめ

今回は、CSS の遅延読み込みを改善する方法について解説してきました。

テーマ内の「functions.php」ファイルの変更する方法は、もし今後使用するテーマが変わるたびに、同様の設定を行う必要があります。

サーバー内の「functions.php」ファイルを直接編集できる方はWordPress内の「functions.php」ファイルを変更すると後々テーマが変わっても設定しなおす必要がなくなるので、そちらをオススメします。

サイトスピードの改善は、Googleの検索順位を上げるためにも必要な対策の1つになります。

今回の設定の他にも色々な改善方法があるので、1つでも多く取り入れて、ユーザビリティをUpさせていきましょう。

下にサイトスピードをUpさせる方法について書いた記事がありますので、よかったら見てみて下さい。

[徹底解説!]プラグインAutoptimizeで簡単サイト高速化
WordPressプラグイン「Autoptimize」でサイト表示スピードをUpさせよう!! サイト表示の高速化は、サイトを運営している方たちにとって、重要なテーマです。 どんなに良い記事を書いて、役に立つ情報を発信したとし...
レンダリングを妨げるリソースの除外を行ってサイトスピード改善!!
「レンダリングを妨げるJavaScriptの除外」を改善しよう!! SEO対策を行う上でユーザビリティをUpさせる為にサイトスピードの改善は避けて通れません。 そもそも「レンダリングを妨げるリソースの除外」って一体何なのか?...
[2019]徹底解説!!ワードプレス リビジョン削除で高速化
そもそもリビジョンって何なの??? 皆さんはワードプレスに搭載されているリビジョンという機能はご存知でしょうか??? 記事を作成していく過程において、要所要所で下書き保存をしたり、プレビューをチェックしながら進めていくと思います...
WordPressプラグインで高速化の効果を検証してみた!その1
WordPressプラグインで高速化の効果を検証してみた 今回は、多くの種類があるWordPressプラグインの中でも「高速化」を狙えるプラグインを使用してみたら、実際どのくらい高速化できるのかということを検証しました。 そもそも高速化...
画像圧縮プラグインEWWW Image Optimizerの使い方
ワードプレスを高速化!プラグインEWWW Image Optimizerで画像を圧縮しよう ここでは、ワードプレスプラグイン「EWWW Image Optimizer」を使用して画像の圧縮方法について解説していきます。 何のため...
わずか3分!SNSアイコン表示Offでワードプレスを簡単高速化!
SNSアイコンを表示オフにしてワードプレスを簡単高速化! ここでは、使用しないSNSアイコンの表示設定をオフにして簡単にWordPressを高速化する方法について解説していきます。 このページを見ているということは、Word...
ワードプレス高速化!プラグインa3 lazy loadで簡単設定
a3 Lazy LoadをインストールしてWordPressを高速化しよう サイト表示の高速化は、サイトを運営している方たちにとって、重要なテーマです。 どんなに良い記事を書いて、有益な情報を発信したとしても、サイトの読み込...

コメント

タイトルとURLをコピーしました