モバイルのweb表示速度を改善した方法4選

モバイルのweb表示速度を改善した方法4選

こんにちは!

プログラム学習中のdynaです。

この記事は、 WordPressを使っていて、自分のページの表示速度が遅い・・・・( ;∀;)(特にモバイル)

と悩んでいる方向けの記事です。 

 

このブログもひどかったよ( ^ω^)・・・
サイトスピードが遅いと、具体的に何が起こるの??

 

 サイト表示のスピードの重要性は2018年にGoogleでも以下のように記載されています。 

ページの読み込み速度をモバイル検索のランキング要素に使用します

サイト制作に関わるみなさまには、パフォーマンスがそのページのユーザー体験にどのように影響するかを広く考え、そしてさまざまなユーザー エクスペリエンスの指標を考慮することをおすすめします。

引用元: ウェブマスター向け公式ブログ

 

つまり、サイトの表示スピードが遅い(パフォーマンスが遅い)と、検索のランキング要素に影響してしまう、ということになります。

 

もし自分があるサイトをクリックしたときに、いつまでも読み込みせず、ずーーーとローディングしていたらどうしますか??

 

そのページ閉じて、違うサイト見に行っちゃうかも・・・・

 

そう、離脱しちゃいますよね・・・

つまり、サイトの表示スピードが遅いと、せっかく作ったサイトも、記事も、皆さんに見てもらえないのです。

 

そんな表示スピードを改善するために、四苦八苦して原因を探した記録です。

 私が実際に試して効果のあった方法を記載している ので、同じように悩んでいる方の解決の糸口になればと思います。

 

ちなみに試行した結果はこんな感じです。

モバイル表示スピード

サイトスピード改善

 

色々いじったり、サーバの具合だったりで今は70後半~90になっちゃいましたが、初期と比べたら全然マシ( ^ω^)・・・

 

前提
・Wordpressを使ってブログやサイトを運営している人
・テーマは無料テーマを使用してます
・計測は、PageSpeed InsightsとGTmetrixを使います

 

計測の説明から入るので、計測が終わっている方は、「いざ、改善。試したこと」からお読みください(^^)

 

 

まずは計測する

計測には、以下2つを使いました。

 

 

PageSpeed Insigh・・・Googleから提供されているツール。

改善できる項目」に記載されている部分で、どこが問題か判断できる。

 

PageSpeed Insig 例

 

Gtmetrix・・・PageSpeed Insighと同じような感じだが、タブで細かい内容まで見れる。

 

GTmetrix 例

 

測定結果

PageSpeed Insightsは 30~40 (モバイル)・・・・( ;∀;)

GTmetrixの方は写真撮り忘れたのですが、確か E でした・・・・( ;∀;)

 

※この画像は何回か改善試した後の数値で44なんです・・・・( ;∀;)

改善前

 

えっ・・・・・・・そんなに低いの・・・・・??

 

ショックでした( ^ω^)・・・

 

いざ、改善。試したこと

さあ、改善します。

物事にはなからず原因があるので、どうにかできるはず・・・・・!!!

私がPageSpeed Insightsで引っかかったのは、

 

オフスクリーン画像の遅延読み込み 

適切なサイズの画像

使用していない JavaScript の削除 

・・・この辺が問題でした。

 

改善案として以下を実施しました。

使っていないプラグインを停止・削除

Autoptimize(プラグイン)の設定見直し

➡JavascriptやCSSの最適化の再確認

Contact Form 7とreCaptchaの読み込みを限定的に変更 

➡ 使用していない JavaScript の削除対応 

画像の圧縮、サイズ変更

➡ 適切なサイズの画像対応

アドセンスの画像表示読み込み遅延※アドセンス導入している方のみ

この辺を実施して、かなり改善されました。

 

順番に見ていきます!
試しながら再計測して、ベストを見つけてください!!

 

使っていないプラグインを停止・削除

当たり前なのですが、これを実施しました。

使っていないタグ表示のプラグインや、人気の表示だけ取得するプラグインを停止、削除。

 

色々試しすぎで、プラグインで重い部分もあったのよね( ^ω^)・・・

 

Autoptimize(プラグイン)の設定見直し➡JavascriptやCSSの最適化の再確認

これは元々導入していたプラグインなのですが、少し設定を見直しました。

Javascriptオプションですが、私の場合は連結するとうまく表示されない現象をすでに確認していたので、「連結しないで遅延」にチェックを入れました。

 

Autoptimizeで最適化設定

 

CSSのオプションは「CSSコードを最適化」「CSSファイルの連結」のあと、「CSSのインライン化と遅延」を設定しました。

 

Autoptimizeで最適化設定 CCSS

 

CSSのインライン化と遅延
見えるページのCSSをHTML内に直接記載する形にして、その他のCSS読み込みを遅延する方法。

  

!!注意!!

この設定でCSSが崩れる場合もあるようです。
表示がおかしいなと思ったらチェックを外すのをお勧めします。

 

このCSSのインライン化と遅延の空白枠内に、トップページ、記事ページの最初に目につくであろうCSS部分を記載します。

どのCSSを使っているか探すの・・・???
大変じゃない・・・(-_-;)

 

なんと、無料で使っているCSSをまとめてくれるツールがありました(^^)

 

クリティカルパスCSSジェネレーター

これを使って、初期表示部分のCSSを抽出します。

 

 

クリティカルパスジェネレーター

1 .1に自分のURLを入力します。(TOPページ)

2 .2にWordpressのテーマから、style.cssをコピーして貼り付けます。

子テーマや、CSSをカスタマイズしている場合はそちらも貼り付けます。

3 .3のボタンを押します。

4 .クリティカルパスが作成されるので、先ほどのAutoptimize、CSSのインライン化と遅延に貼り付けます。

※style.cssは 管理画面の外観 ⇒ テーマエディター ⇒ 右側にstyle.css のファイルがあります。


トップページを貼り付けたら、1に記事ページのURLを入力して、2.3.4を繰り返します。
(ここはお好みで!!やってもやらなくてもいいかと思います)
私は検索キーワードでアクセスしたときに、CSS崩れるの嫌だなと思ったので、記事ページも実行しました。


ここまでできたら、プラグインAutoptimize「変更の保存とキャッシュの削除」を押します。

Autoptimizeで最適化設定後、変更の保存

 

ここまでで再度スピードテストしてみたら変わってるかも!!
私は1つ実施するごとに何が効いてるかな~と確認しながら進めました!

  

reCaptchaの読み込みを限定的に変更➡使用していない JavaScript の削除

「使用していないJavaScriptの削除」に上がってきたのが、どうやら「Contact Form 7」と「reCaptcha」のscriptっぽい・・・

使ってるしな~(-_-;)と思っていたところ、調べてみたら、 どうやらトップページ等、使ってないところでも読み込んでいるよう。 

個人的には問い合わせフォームに適用だけで問題ないので、その設定をします。

 

 ※reCaptchaはサイト全体(ログイン画面、コメントなどにも)適用できるので、必要な方はそのままの方がいいと思います。 

 

私はセキュリティ系プラグインを入れていたので、お問い合わせのみ適応しています。 

 

このコードを、子テーマ(ない場合は親テーマ)のfunctions.phpの最後の方に貼り付けます。

if ( ! is_page( ‘contact‘ ) ) { のcontactは、自分のお問い合わせのページのパーマリンク(URL)にしてください。

ここね!!↓

パーマリンクの場所

ちなみに、固定ページにお問い合わせ作っている人は、if ( ! is_page、投稿ページはif ( ! is_single~となります。

functions.phpを触るときは注意!バックアップは必ず取っといた方がいいです。

  

これで、お問い合わせページにreCAPTCHAのマークがあればOKです!

参考にさせてもらったサイトはこちら

 https://mirai-creators.com/6033/

 

実は、これが一番効果あったかも・・・!!!

 

画像の圧縮、サイズ変更 ➡ 適切なサイズの画像対応

これは、プラグインじゃなくて無料ツールで実施しました。

測定で引っかかった画像を圧縮して差し替えます。

 

使ったツールはこの2つ。

https://www.iloveimg.com/ja 一括で画像編集できるすべてのツール

https://tinypng.com/ 画像圧縮ツール

私は一括で画像編集できるすべてのツールを使う方が多いです。

.png ⇒ .jpg への変換画像の圧縮画像の向きの変更画像サイズの変更を複数枚、一括でできるのでめっちゃ便利。

便利なんですが、ちょっと画質が落ちる感があるので、画質が落ちないtiny.pngも併用して使っています。

 

開発者さん、ありがとう・・・!!!

 

こんな感じで少しずつ改善されていることを願います・・・( ;∀;)

  

アドセンスの遅延読み込み

これはアドセンスを表示している方に限られるのですが、これも効果があったので記載します。

!!注意!!

たまーに広告が表示されない時があります・・・
この辺は調査していい方法を調べていきます( ;∀;)

アドセンス広告のscriptに含まれる、

コレ!!! このコード。

なんと上のサイトを参考にさせてもらったところ、毎回JSを読み込んでいるらしい・・・

 

だから遅くなっちゃうのね( ;∀;)

 

このコードを、広告内から一旦すべて削除します。

 

上記サイトを参考に、</body>直前に以下のコードを貼り付けます。

私はfooter.phpのところに貼り付けました。

こんな感じ↓

アドセンス読み込み遅延コード記載場所

 

スクロールしたら読み込ませてるのね・・・・!!なるほど・・・!!

 

 

保存を押して、またスピードテスト実施・・・!

 

改善結果
改善結果2

 

やったーーーー!!\(`∇\)(/`∇)/

 

改善されました!!!!( ;∀;)

参考サイト様様です・・・( ;∀;)!!

色々苦しましたが、とりあえず今のところ納得いったので、備忘録として記載しました!

 

もし同じような方がいたら参考になれば幸いです。

 

ここまで読んで下さりありがとうございます。

 

参加中(`・ω・´)

このエントリーをはてなブックマークに追加 ブログランキング・にほんブログ村へ
FC2ranking