当ページのリンクには広告が含まれています。 AFFINGER5(アフィンガー5)

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

筆者はこんな人

34インチのウルトラワイドモニター

34インチのウルトラワイドモニターをフル活用！ 気分転換で動画を見始めたら止まらない笑

ばらもん。
ばらもん。
AFFINGER6とSWELLを使って、6つのブログを運営しているビール大好き自称鳥人間です！

特化ブログの数

困っている人
困っている人
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

.htaccessをアップロード

step
3.htaccessへ追記ができたら、元の場所にアップロードします。

元の場所とは？

ポイント

ドメイン名→public_htm内

ポイント

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

WebPへ画像を変換

3つ目の施策は、WebPへの一括変換。
『WebP Express』というプラグインを使用します。

step
1『WebP Express』をインストール後に有効化

step
2設定タブから『WebP Express』の設定を開く

  • 『Alter HTML』にチェック
  • 『Replace <img> tags with <picture> tags, adding the webp to srcset』または『Replace image URLs』にチェック

step
3『Convert on upload』にチェックして、『Bulk Convert』をクリックすると変換が始まる

以上です。

まとめ

私がモバイルスコアを上昇させた方法をご紹介しました。
ご紹介した通り、FTP転送を多用しています。
操作に慣れないうちは、難しいかなぁと感じるかもしれません。
しかし、実際に作業をしてみるとそ～んなに難しくはありません。
操作方法さえ分かれば簡単です。
functions.phpや.htaccessへの追記も１,２回作業すれば慣れます。
万が一、ファイルを壊してしまった場合でもコピー元ファイルさえ残しておけば復旧は簡単です。以上です。

-AFFINGER5(アフィンガー5)
-