アフィンガー5

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

スポンサーリンク

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

本記事の内容

  • 実際にモバイルのスコアが30アップした方法を3つご紹介
 
それでは、本題に入ります。
 
 
 
修正前(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 FTP Clientのインストール方法

ダウンロードページからダウンロードします。

step
1
Windows32bitの方は、『Show additional download options』をクリックしてください。

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

step
2
Windows32bitの方はこちらです。

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

step
3
もし、自分のパソコンのbit数がわからない場合は、PCを右クリック→プロパティ。

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

step
4
この画面でbit数を確認できます。

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

step
5
ダウンロードした、アプリケーションファイルを実行します。

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

step
6
『I Agree』をクリックします。

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

step
7
デフォルトのままで、良いです。

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

step
8
デスクトップアイコンを作成する場合はチェックしてください。

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

step
9
デフォルトのままで良いです。

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

step
10
インストールします。

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

step
11
インストール完了です。

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

FileZilla FTP Clientを起動

 
お手元に、エックスサーバーのFTP接続情報をご用意ください。
契約時にメールで下記を頂いているはずです。
 
  • ftpホスト名(ftpサーバー名)
  • ftpユーザー名
  • ftpパスワード
 
この情報を入力して、FTP接続します。
 
 
FileZillaの起動画面です。

step
1
左側が、ローカル(自分のパソコン)で右側が、リモート(エックスサーバー)です。

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

step
2
サイトマネージャーを開きます。

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

step
3
『新しいサイト』をクリックして、新規サイトを作成します。

名前は、ご自身で分かりやすい名前にしてください。
 
【アフィンガー5】モバイル表示速度スコアが30アップした3つの方法 13 filezillaインストール
 
 

step
4
エックスサーバーから頂いている、下記を入力します。

  • ②ホスト名
  • ④ユーザー名
  • ⑤パスワード
 

step
5
①プロトコルと③暗号化は下記を選択します。

  • ①プロトコル=FTP-ファイル転送プロトコル
  • ③暗号化=使用可能なら明示的なFTP over TLSを使用
 
【アフィンガー5】モバイル表示速度スコアが30アップした3つの方法 14 filezillaインストール
 
 

step
6
転送タブ内にある転送モードをパッシブにします。

  • 転送モード=パッシブ
 
 
【アフィンガー5】モバイル表示速度スコアが30アップした3つの方法 14.5 filezillaインストール
 
 

もし、接続エラーする場合

 

step
7
暗号化を平文のFTPのみを使用する(安全でない)に変更します。

 
  • 暗号化=平文のFTPのみを使用する(安全でない)
 
 
【アフィンガー5】モバイル表示速度スコアが30アップした3つの方法 15 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
 

まとめ

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

スポンサーリンク

イチオシのワードプレステーマ

アフィンガー5

画像の説明文

ばらもん。
当ブログもアフィンガー5です

アフィリエイト×SEOに特化したテーマ

豊富な装飾が揃っているアフィンガー5

誰でも簡単にオシャレブログを実現可能!

アフィリエイトブログを作るならコレっきゃない!

-アフィンガー5
-

© 2021 ブログ汁