AFFINGER5でモバイルスコアを30アップした3つの方法

困っている人

PageSpeed Insightsのモバイルスコアを上げる方法を教えてほしい

上記のお悩みを解決します。

本記事の内容

モバイルスコアが３０アップした方法を3つご紹介

それでは、本題に入ります。

モバイルスコアをアップした3つの方法

今回、モバイルスコアをアップさせるためにしたことは下記の3点。

functions.phpへ追記（10分）
.htaccessへ追記（10分）
プラグインで画像WebPへ変換（画像量によりますが、多い場合は変換に２時間はかかります）

今回の作業をすることで、PageSpeed Insightsのモバイルスコアが、25→56へスコアアップしました。

タブで切り替え可能！

修正前
修正後

順番に解説をします。
私の作業条件は下記となっております。

作業条件

FTPソフト『FileZilla FTP Client』を使用
テーマ『アフィンガー5』
サーバー『エックスサーバー』

FileZilla FTP Clientをお持ちでない方は、『【filezilla】ダウンロード→インストール→使い方→設定→接続方法』を参照してください。

『filezilla』をお持ちの方は、次に進んでください。

functions.phpへ追記

1つ目の施策は、functions.phpに下記の設定を追記します。

Google Fontsを適用させない設定
スライダーのCSSを適用させない設定
スライダーのJavaScriptを適用させない設定

注意ポイント

スライダー機能を切ります。

スライダーを使用されている方はスライダーを使用している箇所をスライダーなしへ修正してください。

functions.phpの場所

ポイント

ドメイン名→public_html→wp-content→themes→affinger5-child→functions.php

affinger5-childフォルダの中に『functions.php』があります。

step
1右クリック→ダウンロード

ダウンロード先は任意で良いです。（わかりやすい場所）

functions.phpへ追記

functions.phpへ追記するときの注意点が1つあります。

注意ポイント

functions.phpのコピーファイルを作成しておく！

ダウンロードしたら、最初にfunctions.phpのコピーファイルを作成しておきます。

functions.phpは、記述ミスがある場合は、途端にWordPressにログインすらできなくなります。

私も経験がありますが、画面がホワイトアウトしたので冷や汗かきました。

しかし、なにも心配する必要ありません。

コピーしておいた元ファイルを『コピー-functions.php』→『functions.php』に名前を変更して、元の場所にアップロードすれば何事もなかったことになります。

ポイント

コピーをするのを忘れていたとしても、追記した部分を削除してアップロードすれば問題ありません。

最大限に注意しなければならないことは、アップロード先を間違えないことです。

step
2functions.phpの一番下に追記

// Google Fontsを適用させない設定
function deregister_styles_google_fonts() {
  wp_deregister_style( 'fonts-googleapis-roundedmplus1c' );
  wp_register_style( 'fonts-googleapis-roundedmplus1c', '' );
  wp_deregister_style( 'fonts-googleapis-notosansjp' );
  wp_register_style( 'fonts-googleapis-notosansjp', '' );
  wp_deregister_style( 'fonts-googleapis-lato700' );
  wp_register_style( 'fonts-googleapis-lato700', '' );
  wp_deregister_style( 'fonts-googleapis-montserrat' );
  wp_register_style( 'fonts-googleapis-montserrat', '' );
}
add_action( 'wp_print_styles', 'deregister_styles_google_fonts' );
// スライダーのCSSを適用させない設定
function deregister_styles_slick() {
  wp_deregister_style( 'slick' );
  wp_register_style( 'slick', '' );
  wp_deregister_style( 'slick-theme' );
  wp_register_style( 'slick-theme', '' );
}
add_action( 'wp_print_styles', 'deregister_styles_slick' );
// スライダーのJavaScriptを適用させない設定
function deregister_script_slick() {
  wp_deregister_script( 'slick' );
  wp_register_script( 'slick', '' );
}
add_action( 'wp_print_scripts', 'deregister_script_slick' );

functions.phpをアップロード

step
3functions.phpへ追記ができたら、元の場所にアップロード

元の場所とは？

ポイント

ドメイン名→public_html→wp-content→themes→affinger5-child内

ポイント

上書きの確認メッセージが出力されますが、上書きして完了です。

念の為、自分のブログにアクセスできるのか確認しておきます。

.htaccessへ追記

2つ目の施策は、.htaccessへ下記をの設定を追記します。

キャッシュを1ヶ月保持する設定
Gzip圧縮する設定

.htaccessの場所

ポイント

ドメイン名→public_html→.htaccess

step
1右クリックでダウンロード

ダウンロード先は任意で良いです。（わかりやすい場所）

.htaccessへ追記

.htaccessへ追記するときの注意点は、functions.phpのときと同様です。
元のファイルをコピーして残しておきましょう。

注意ポイント

.htaccessのコピーファイルを作成しておく！

ダウンロードしたら、最初に.htaccessをコピーしておきます。

step
2.htaccessの一番下に追記

# キャッシュを1ヶ月保持する設定
<ifModule mod_expires.c>
ExpiresActive On
ExpiresByType image/gif "access plus 1 months"
ExpiresByType image/png "access plus 1 months"
ExpiresByType image/jpg "access plus 1 months"
ExpiresByType image/jpeg "access plus 1 months"
ExpiresByType image/x-icon "access plus 6 months"
ExpiresByType text/html "access plus 1 days"
ExpiresByType text/css "access plus 1 days"
ExpiresByType text/javascript "access plus 1 months"
ExpiresByType application/javascript "access plus 1 months"
ExpiresByType application/x-javascript "access plus 1 months"
</IfModule>
# Gzip圧縮をする設定
SetOutputFilter DEFLATE
# 画像は再圧縮しない
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
Header append Vary Accept-Encoding env=!dont-vary
# 各MIME Typeを圧縮対象にする
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-font-woff
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject