困っている人
PageSpeed Insightsのモバイルスコアを上げる方法を教えてほしい
上記のお悩みを解決します。
本記事の内容
- モバイルスコアが３０アップした方法を3つご紹介
それでは、本題に入ります。
モバイルスコアをアップした3つの方法
今回の作業をすることで、PageSpeed Insightsのモバイルスコアが、25→56へスコアアップしました。
タブで切り替え可能！
今回すること
- functions.phpへ追記（10分）
- .htaccessへ追記（10分）
- プラグインで画像WebPへ変換（画像量によりますが、多い場合は変換に２時間はかかります）
順番に解説をします。
準備
作業条件
- FTPソフト『FileZilla FTP Client』を使用
- テーマ『アフィンガー5』
- サーバー『エックスサーバー』
FileZilla FTP Clientをお持ちでない方は、『【filezilla】ダウンロード→インストール→使い方→設定→接続方法』を参照してください。
『filezilla』をお持ちの方は、次に進んでください。
functions.phpへ追記
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へ追記
注意点が1つあります。
注意ポイント
functions.phpのコピーファイルを作成しておく！
ダウンロードしたら、最初にfunctions.phpのコピーファイルを作成しておきます。
functions.phpは、記述ミスがある場合は、途端にWordPressにログインすらできなくなります。
私も経験がありますが、画面がホワイトアウトしたので冷や汗かきました。
しかし、なにも心配する必要ありません。
コピーしておいた元ファイルを『コピー-functions.php』→『functions.php』に名前を変更して、元の場所にアップロードすれば何事もなかったことになります。
ポイント
コピーをするのを忘れていたとしても、追記した部分を削除してアップロードすれば問題ありません。
最大限に注意しなければならないことは、アップロード先を間違えないことです。
step
2functions.phpの一番下に追記
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
// 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へ追記
.htaccessへ下記をの設定を追記します。
- キャッシュを1ヶ月保持する設定
- Gzip圧縮する設定
.htaccessの場所
ポイント
ドメイン名→public_html→.htaccess
step
1右クリックでダウンロード
ダウンロード先は任意で良いです。（わかりやすい場所）
.htaccessへ追記
注意点は、functions.phpのときと同様にです。
元のファイルをコピーして残しておきましょう。
注意ポイント
.htaccessのコピーファイルを作成しておく！
ダウンロードしたら、最初に.htaccessをコピーしておきます。
step
2.htaccessの一番下に追記
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
# キャッシュを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へ画像を変換
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』をクリックすると変換が始まる
以上です。
＼公式からも期間限定で特典付き！／
SUGOI MOKUJI（すごいもくじ） [LITE]
AFFINGER（アフィンガー）EX版体験版
タグ管理マネージャー体験版
PVモニター体験版
＼当ブログ限定特典付き！／
当ブログの限定特典は下記の２記事
約14,400文字数のボリュームたっぷり記事に仕上げました。
＼本業情シスの大暴露記事も付いてくる！（約6,400文字）／
＼まとめ買いでお得！／
【まとめ買い】ACTION PACK3 - AFFINGER6EX版（特典付き）を手に入れる
EX版とは、「AFFINGER6」の特別機能追加バージョンのことです。
まとめ
私がモバイルスコアを上昇させた方法をご紹介しました。
ご紹介した通り、FTP転送を多用しています。
操作に慣れないうちは、難しいかなぁと感じるかもしれません。
しかし、実際に作業をしてみるとそ～んなに難しくはありません。
操作方法さえ分かれば簡単です。
functions.phpや.htaccessへの追記も１,２回作業すれば慣れます。
万が一、ファイルを壊してしまった場合でもコピー元ファイルさえ残しておけば復旧は簡単です。以上です。
※本記事の内容で実行された結果について、筆者は一切の責任を負いませんので、ご了承ください。
必ず自己責任で実行してください。
