ブログ作業編

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

使用していないJavascriptの削減でサイト高速化

使用していないJavascriptの削減
不具合なしで簡単改善

PageSpeedInsights
で速度計測してますか?

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

使用していないJavaScriptの削減
2022年現在も非常に有効です。

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

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

モバイルスピード90点以上
PCスピード100点

JavaScript??難しい…
みけ

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

この記事でお悩み解決!

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

\ 当ブログ使用テーマ /

AFFINGER6公式サイト

サイト高速化
『使用していないJavascriptの削減』

使用していないJavascriptの削減で評価アップ。高速化は最高。

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

サイトスピードの評価

Googleが提供している
PageSpeed InsightsにURL入力で簡単計測
※2021年11月にアップデート!
更にわかりやすくなっています。

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

モバイル点数がやばい

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

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

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

難しい言葉。ジャバスクリプトって?

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

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

 

使用していない JavaScript の削減

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

 

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

あ、あきらめるしか…
みけ

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

JavaScriptって何?

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

例えば…

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

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

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

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

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

サイト高速化のメリット

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

サイト高速化

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

速いにこしたことはない

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

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

表示速度は重要ね!
みけ

原因の特定
使用していないjavascriptの削減

遅い原因とは一体なんだ?

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

PageSpeed Insightsから
改善できる項目を確認していきましょう。
※2021年11月にアップデート!

『使用していない Javascript の削減』
この項目を見ていきましょう。

 

①サイトのURL入力

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

 

②点数が表示される

点数表示。モバイルを改善しよう。

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

③改善できる項目を確認

使用していないJavascriptの削減から詳細をチェック。Google関係が多い

改善できる項目の
・『使用していない 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

Twitterの埋込もかなり重い


記事の作成に慣れてくると

  • Twitterのツイート埋込
    『twitter.com/widgets.js』

これをよく行うようになります。

特に口コミ評判の埋込にもってこい。
ただし、通常通り埋込を行うと
めちゃくちゃページ速度が重くなります。

これらも読み遅らすことで
ページスピードの改善に繋がります。

Twitter埋込する人は注意!
みけ

Flying Scripts
プラグインで改善

Flying Scriptsでとても簡単に改善ができる

本題の改善方法は

プラグインFlying Scripts』を使用。
(flying scripts by wp speed matters)

このプラグイン1つで簡単に
『使用していない Javascript の削減』
この項目が改善し表示速度が上がります。

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

 

Flying Scriptsとは?

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

 

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

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

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

Flying Scriptsを導入

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

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

Flying Scripts by WP Speed Matters

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

読み飛ばし設定。
使用していないJavaScriptの削減

『Flying Scripts』設定画面

設定画面に該当ワードを入力していく。中断は何秒無操作にするか。下段は未入力。
  • Include Keywords
    該当のJSのキーワードを書く
  • Timeout
    無操作の間何秒読み込まないか
  • Disable on pages
    ページで無効にするは無記入

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

使用していないJavascriptの確認

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

使用していないJavascriptの削減項目を選択していく

ポイント

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

Flying Scriptsに貼付

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

削減したいJavascriptのキーワードを入力
  • アドセンス関係
    syow_ads~.js
    adsbygoogle.js
  • アナリティクス関係
    gtag(2つ同時除外)
  • ブックマーク関係
    bookmark_button.js
  • Twitter関連
    twitter.com/widgets.js
    ※2022年2月追記

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

 

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

読み飛ばし時間

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

初期は5s

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

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

saveで完了です。

『使用していない Javascript の削減』が解決!

決めるポイント

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

一連の流れは

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

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

とら
一目瞭然だからね♪

使用していないJavaScriptの削減の効果

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

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

使用していない JavaScript の削減』です。

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

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

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

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

ビフォー21点

モバイルも91点

めちゃくちゃ改善しました!!

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

 

全然違う!!
みけ

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

不具合①jquery.minは設定しない


表示された全てのJavascript
除外したい気持ちは分かります。

私はあるJSを設定した際に
1部不具合が生じました。

『jquery.min.js?ver=〇〇〇』です。
(〇〇はバージョンです)

調べてみると他にも不具合が、
出ている方が複数名見当たりました。

  • TOPボタンが効かなくなる
  • スムーススクロールボタンの不具合
  • 一部リンクが反応しない

そのため、『jquery.min.js』は
設定しないようにしましょう。

私はそれでも

  • モバイル91点
  • パソコン100点

こちらのスピードを実現しました。


仮に不具合があっても

設定から消せばすぐ元通り

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

Twitterの読み飛ばしは重要


2022年2月追記

使用していないJavascriptの削減
重要項目の1つとしてTwitter埋込がある。

記事単体の表示速度が劇的に下がるので、
しっかりと設定して読み飛ばしが必要です。

  • 口コミ・評判Twitter埋込
    ⇒ページスピード50台へ低下
  • Javascript読み飛ばし設定
    『twitter.com/widgets.js』追記
  • サイトスピード90台に復帰

このように改善されました。

Twitterの埋込は記事評価に必要だからこそ、
使用していないJavascriptの削減をしましょう。

とら
これで気にせずTwitter埋込できる!

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

Flying Scriptsで「使用していない Javascript の削減」を簡単に改善。

Flying Scriptsで
サイト高速化

  • 表示速度が遅い要因の1つ
    使用していないJavascriptの削減
  • 使用していない Javascript の削減
    解決方法は非常に簡単
  • 読み飛ばす事でサイト高速化
  • 表示速度向上でサイト評価UP
  • PageSpeed Insightsで速度確認
  • Flying Scriptsで簡単高速化
    ①twitter.com/widgets.js
    ②syow_ads~.js
    ③adsbygoogle.js
    ④gtag
    ⑤bookmark_button.js
  • jquery.min.jsは指定しない
    不具合起きてもすぐ改善
  • Twitter埋込も改善可
  • 効果がすぐでる
  • Google関係
    ・アナリティクス
    ・アドセンス
  • Twitter関連
  • ブックマーク関連

これらを読み飛ばせばOK!


実際にサイト高速化!!
と聞くと難しく感じるかもしれません。
ですが『Flying Scripts』で簡単改善。

一番の高速化手順は
『使用していないJavaScriptの削減』

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

不具合無しで簡単に設定ができます。

表示速度を上げて
ライバルと差をつけよう。

 

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

 

PVアクセスランキング にほんブログ村
  • この記事を書いた人
  • 最新記事

とら

ブログ2か月目で5桁収益達成|1987年生まれサラリーマン|20歳より超絶ブラック企業勤め|朝から朝まで働き大出世|30代で脱サラに向け行動を決心|自由に生きるべく全力で挑戦中|同じ想いを持つ方へ勇気ときっかけを与えたい

-ブログ作業編