アフィンガー5

【アフィンガー5】モバイル表示速度スコアが30アップした3つの方法

スポンサーリンク

 
【アフィンガー5】モバイル表示速度スコアが30アップした3つの方法 私困 232x300
困っている人
PageSpeed Insightsのモバイルスコアを上げる方法を教えてほしい
上記のお悩みを解決します。

本記事の内容

  • 実際にモバイルのスコアが30アップした方法を3つご紹介
 
それでは、本題に入ります。
 

PageSpeed Insightsで30スコアアップ

 
今回の作業をすることで、PageSpeed Insightsのモバイルスコアが、25→56へスコアアップしました。
 
 
修正前(25でした・・・)
 
【アフィンガー5】モバイル表示速度スコアが30アップした3つの方法 ページスピードインサイトモバイルスコア25
 
 
修正後(56にアップ!)
 
【アフィンガー5】モバイル表示速度スコアが30アップした3つの方法 0 ページスピードインサイトの改善後スコア
 
 

今回すること

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

準備

 
作業条件
 
  • 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
右クリック→ダウンロードしましょう。

ダウンロード先は任意で良いです。(わかりやすい場所)
 
【アフィンガー5】モバイル表示速度スコアが30アップした3つの方法 1 functionsphpの場所

functions.phpへ追記

 
注意点が1つあります。
 

注意

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

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

 
私もいちどだけ経験がありますが、画面がホワイトアウトしたので冷や汗かきました。
 
 
しかし、なにも心配する必要ありません。
 
 
コピーしておいた元ファイルを『コピー-functions.php』→『functions.php』に名前を変更して、元の場所にアップロードすれば何事もなかったことになります。
 
コピーをするのを忘れていたとしても、追記した部分を削除してアップロードすれば問題ありません。
それよりも注意しなければならないことは、アップロード先を間違えないことです。
 
 

step
2
functions.phpの一番下に追記します。

 

 
 

functions.phpをアップロード

 

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

元の場所
 

ポイント

ドメイン名→public_html→wp-content→themes→affinger5-child内
 
【アフィンガー5】モバイル表示速度スコアが30アップした3つの方法 3 functionsphpのアップロード
 
 
上書きの確認メッセージが出力されますが、上書きして完了です。
念の為、自分のブログにアクセスできるのか確認しておきます。
 

.htaccessへ追記

 
.htaccessへ下記をの設定を追記します。
 
  • キャッシュを1ヶ月保持する設定
  • Gzip圧縮する設定
 

.htaccessの場所

 

ポイント

ドメイン名→public_html→.htaccess
 

step
1
右クリックでダウンロードしましょう。

ダウンロード先は任意で良いです。(わかりやすい場所)
 
【アフィンガー5】モバイル表示速度スコアが30アップした3つの方法 2 .htaccessの場所
 

.htaccessへ追記

 
注意点が1つあります。
 

注意

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

step
2
.htaccessの一番下に追記します。

 

 
 

.htaccessをアップロード

 

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

元の場所
 

ポイント

ドメイン名→public_htm内
 
【アフィンガー5】モバイル表示速度スコアが30アップした3つの方法 4 .htaccessのアップロード
 
 
上書きして完了です。
念の為、自分のブログにアクセスできるのか確認しておきます。
 

WebPへ画像を変換

 
『WebP Express』というプラグインを使用します。
 

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

 
【アフィンガー5】モバイル表示速度スコアが30アップした3つの方法 1 webp express
 
 

step
2
設定タブから『WebP Express』の設定を開きます。

 
  • 『Alter HTML』にチェック
  • 『Replace <img> tags with <picture> tags, adding the webp to srcset』または『Replace image URLs』にチェック
 
【アフィンガー5】モバイル表示速度スコアが30アップした3つの方法 2 webp express
 
 

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

 
【アフィンガー5】モバイル表示速度スコアが30アップした3つの方法 3 webp express
 

まとめ

いかかでしたか?モバイルのスコアは上がりましたか?
ワードプレスを極める上で、FTP転送は避けては通れない道です。
 
 
操作方法さえ分かれば簡単です。
functions.phpや.htaccessへの追記も1,2回作業すれば慣れます。
 
 
仮にファイルを壊してしまった場合でも、コピー元ファイルさえあれば復旧は簡単です。
ブログ表示を軽くサクサクにして、ユーザービリティをアップさせましょう。以上です。
 
 
※本記事の内容で実行された結果について、筆者は一切の責任を負いませんので、ご了承ください。
必ず自己責任で実行してください。
兄弟ブログの『ぶろぐしる~』ですが、『ルクセリタス』→『SWELL』へテーマ変更しました。(2021年6月にテーマ変更)

 

1年以上かけて書いた記事は130記事以上・・・。
デザイン崩れを修正するのに1ヶ月かかりました。

注意ポイント

正直に言って、デザイン崩れを修正するのは大変な作業でした。

テーマ変更を決断するなら、早いほうが断然良いです。
私自身、テーマ変更に悩んでいた時間は無駄だったと感じました。

 

記事にまとめたので、『SWELL』が気になる方は要チェック!
→『【ルクセリタス→SWELL】レビュー!デザイン崩れ対処はどんな感じ?

\え?まだ、クラシックエディタ使いよん?もったいなw/

SWELL

SWELLのブロックエディタを体験しないのは損!

-アフィンガー5
-