ブログ作業編

【サイト高速化手順】 使用していない JavaScript の削減を改善

とら

1987年生まれサラリーマン。20歳より超絶ブラック企業に勤め/がむしゃらに朝から朝まで働き大出世/部下を約200名持ちプチホワイト化/人生1度きりという言葉を強く考え、30代で脱サラに向け行動を決心/これからは自由に生きるべく全力で挑戦し収益化を目指す。同じような想いを持つ方へ勇気ときっかけを与えられると嬉しいです。

PageSpeed Insights
で速度計測してますか?

表示速度が遅い原因として
『使用していない JavaScript 』
が大きく割合を占めています。
特にモバイル速度が劇的に遅い方が多いです。

今回はプラグインで簡単に改善をする
設定手順を公開していきます。

表示速度を上げて
サイト評価をUPさせよう!

JavaScript??難しい…
みけ

とら
簡単手順を公開するよ!

この記事でお悩み解決!

  • 表示速度が遅い原因
  • サイトスピードの重要性
  • スピードスコアの確認方法
  • 遅い原因の詳細確認方法
  • サイトスピード改善方法
  • 『プラグインFlying Scripts』の特性
  • 専門知識不要!初心者も簡単高速化
  • スピードテストのモヤモヤ改善

\ 当ブログ使用テーマ /

AFFINGER6公式サイト

表示速度高速化
サイトの評価UP

ブログを始めて少し慣れてきた頃
気になり始めるのが

サイトスピードの評価

Googleが提供している
PageSpeed InsightsにURL入力で簡単計測

大抵の方はモバイルが低評価のはず。
私は最低点数の時は20点台がありました…

とら
気になって何もできない!

即改善に向けて行動ね♪
みけ

原因:使用していないJavaScript

PageSpeed Insightsを見てみると、
ご丁寧に改善できる箇所の記載があります。

その中で速度が遅い要因として

『使用していない JavaScript の削減』

が大きな割合を占めています。

初心者は何言っているか分からないですよね。
私も最初は見て見ぬふりをして諦めていました。

あ、あきらめるしか
みけ

とら
大丈夫!初心者もできるよ♪

JavaScriptって?

JavaScriptとは…
Webページに複雑な機能を付与する
プログラミング言語です。

例えば…

  • 画像を拡大表示
  • Googleマップを組み込む
  • 送信フォームのチェック処理
  • アナリティクスのアクセス解析

非常に多くの動作を組み込めます。

基本はWordpressの各設定を行うと、
自動で組み込まれるものばかりです。

詳しくJavaScriptを学べば
様々なカスタマイズができます。

とら
もっと深い話だけど、
本記事ではここまで!

サイト高速化のメリット

当然速いほうが良い
サイトスピードですが、
明確な理由もあります。

サイト高速化

  • 表示速度向上!
    検索エンジンへの評価UP
  • 離脱率の改善によるSEO対策
    (回遊率UP、PV増加)

速いにこしたことはない

検索順位が上がることを
約束するものではありません。

ただし、表示速度が遅い事によって
評価のdown読者離れが起きます。

みけ
表示速度は重要ね!

遅い原因の特定
改善前のチェック

実際にはサイトごとに
表示速度改善をする内容が異なります。

PageSpeed Insightsから
改善できる項目を確認していきましょう。

①サイトのURL入力

とら
トップのURLを入力しよう

②点数が表示される

モバイルから点数が表示されます。
大抵は20-40点くらいでしょうか。

③改善できる項目を確認

改善できる項目の
・『使用していない JavaScript の削減』
が赤く表示されていると思います。
表示速度低下の大きな原因です。

『〇〇.js』の部分がJavaScript
ここを改善する必要があります。

へ~教えてくれるのは便利!
みけ

Googleが最大の原因?

Google関係が
大きく影響していた

  • Googleアドセンスを導入
    『show_ads_impl_fy2019.js』
    『adsbygoogle.js』表記
  • Googleアナリティクスを導入
    『gtag/js?id=UA-〇〇』
    『gtag/js?id=G-〇〇』表記

私が実際に対処したのは上記4点です。

アドセンスは導入有無が分かれますが、
アナリティクスはほぼ導入してますよね?

これらのJavaScriptの読み込み
表示速度に大きく影響していたのです。

JavaScriptの見分け方

  • 『使用していない JavaScript の削減』を選択
    『〇〇.js』と記載あるものがJavaScript

Flying Scripts
プラグインで改善

本題の改善方法は

プラグインFlying Scripts』を使用。

表示速度が遅くなる1つの要因として、
最初の表示される際に
JavaScriptの読込が行われることです。
それを改善するプラグイン。

Flying Scriptsとは?

特定のJavaScriptを
一時的に読み飛ばすプラグインです。
操作がない一定時間処理しないことで、
表示速度を劇的に改善しています。

不具合が生じる場合には、
設定解除ですぐに改善できる。

すぐ戻せるなら安心♪
みけ

とら
単純に読み飛ばすだけだからね

Flying Scriptsを導入

早速プラグインを導入しましょう。

正式名称は
『Flying Scripts by WP Speed Matters』

導入したら有効化を忘れずに!

読み飛ばし設定

設定画面の説明

  • Include Keywords
    該当のJSのキーワードを書く
  • Timeout
    無操作の間何秒読み込まないか
  • Disable on pages
    ページで無効にするは無記入

今回は上2つを簡単に設定していきます。

該当項目を確認

まずはPageSpeed Insights
改善できる項目を再度確認。

ポイント

  • 〇〇.js部分を選んでいく
  • 設定画面にはキーワードでOK

Flying Scriptsに貼付

確認ができたら設定画面に貼付

  • アドセンス関係
    syow_ads~.js
    adsbygoogle.js
  • アナリティクス関係
    gtag(2つ同時除外)
  • ブックマーク関係
    bookmark_button.js

ブックマーク関係は
最近カスタマイズして追記しました。

とら
何か起きても消せば元通り

読み飛ばし時間

コチラはお好みで調整しよう

3秒~5秒の間で調整がオススメ。

設定をしながらサイトを見て、
確認をしながら決定していこう。
私は最終的に4秒に落ち着きました。

saveで完了です。

決めるポイント

  • PageSpeed Insightsを見る
    点数が高い設定を探る
  • 設定後はサイトを見る
    表示に問題がないか確認

一連の流れは

設定⇒キャッシュクリア⇒確認

点数が変わると面白い
みけ

とら
一目瞭然だからね♪

実際の効果とは?

サイト高速化には
複数の改善が必須です。

私は今回の
Flying Scriptsが一番効果有!
※個人差あります。

更には何か不具合があれば

  • 設定でキーワードを消す
  • saveで保存

これで簡単に戻せます。
コード改変ではなく、
読み飛ばしをしているだけだからです。

モバイル
ビフォーアフター

複数改善策を盛り込んだ結果です。

全然違う!!
みけ

とら
まだまだ改善の余地有

Flying Scriptsで
サイト高速化!

Flying Scriptsでサイト高速化

  • 表示速度が遅い要因の1つ
    JavaScriptを読み飛ばす
  • 読み飛ばす事でサイト高速化
  • 表示速度向上でサイト評価UP
  • PageSpeed Insightsで速度確認
  • Flying Scriptsで簡単高速化
  • 不具合起きてもすぐ改善
  • 劇的効果がすぐでる
    ※個人差有

いかがでしょうか。

実際にサイト高速化!!
と聞くと難しく感じるかもしれません。
ですが、私も最初は何も分からず
手探りでやっても簡単に行えました。

暫く記事を書いてきて、
様々な設定が気になってきたころに
躓きやすいのがサイトスピードです。

本ブログでは別記事でもサイト高速化に
役立つ情報を載せています。

表示速度を上げて
ライバルと差をつけましょう!

みけ
これで安心して記事かける♪

PVアクセスランキング にほんブログ村

-ブログ作業編