wordpressスマホ対応サイト・wpプラグイン・検索体験最適化・SNS・ 動画・bgmやテーマ曲を駆使して、リアルビジネスへの集客を達成するためのコラム!

   

wordpress屋のマルチメディアコンテンツ制作読んどけ☆コラム

【ワードプレスサイト高速化プラグイン】Speed Up-JavaScript To Footerで、表示速度を速くする方法

      2018/04/05

こんにちは、管理人@SS_mshpです。

今回は、ワードプレスサイトの使い勝手(読者から見た)を向上させるプラグインを紹介いたします。

一般的には重いとされるワードプレスサイトで、表示速度対策は必須です。ここではオンにする前/後を比較し、『どのような効果があるか?ページ表示速度スコアは?』などをチェックしてみます。

■Speed Up-JavaScript To Footerとは?仕組みは?

Speed Up – JavaScript To Footerの説明ページ
https://wordpress.org/plugins/speed-up-javascript-to-footer/

上記のプラグイン紹介ページに説明がありますが、『スモールサイズ(2Kb)』で、『JavaScriptをフッター移動して読み込み速度を上げる』というものです。非同期読み込み系ですかね。

『wp_head』からスクリプトを『remove_action』して、『wp_footer』に『add_action』するという仕組みのようです。

■Speed Up–JavaScript To Footerを入れる前の、このサイトの状態

■フッター部分のhtmlソース


フッターhtmlソースを見てみます。『もうフッターにjavascriptがあるじゃん』となりそうですが、これはテーマ由来です。もともとの状態からフッターにありました。『最初はフッターにjavascriptが3つあった』と覚えておいてください。

■ページスピードスコア


googleページスピードスコアは『SP:60・PC:74』です。PC回線ならあんまり問題にならなそうですが、スマホ版が赤信号になっています。

体感的にスマホで5~6秒かかったりもしていたので、なるべく速くして、読者のストレスにならないようにしたいところ。管理人も、いつまでもサイトが表示されないと、ほかのページに行ったりしてしまいます。そういうわけで、このプラグインを導入しました。

■Speed Up–JavaScript To Footerをオンにした状態

■フッター部分のhtmlソース


先ほどのhtmlソースとの違いは『location protocol』と『google api jquery』がフッター部分にきたことです。

location protocolは、SSL化によるものです(httpsで表示)。googleホストのjquery(JavaScriptライブラリ)は、stinger5テーマではヘッダーにはかいてないんですけど『functions.php』内に読み込むような記述がありました(切り取ってフッターに移せばプラグインいらないんじゃ?笑)

■ページスピードスコアが向上!


googleページスピードスコアは『SP:74・PC:81』と向上しました。google api jqueryが95782文字あり(!)、ヘッダーで読み込むと時間がかかるようです。これが後ろにいっただけで、かなりのパフォーマンス向上となりました。スコアで10点・15点あげられると、数値だけでなく体感的にも速さを感じます。

■あとがき・まとめ

ちょっと仕組みをチェックしてみたところ『functions.phpいじれればプラグインいらないんじゃね?』と一瞬思いましたが、ダウンロードしてオンにするだけ・しかもファイルサイズが小さいということもあり、気軽に使えます。

テーマのhtmlソースをチェックして『ヘッダーにjavascriptがいっぱいあって重いなー』と感じている方は、ぜひ導入を検討してみてください。
(逆に、テーマをカスタマイズして、全部フッターで読み込んでいる場合は、特に入れなくても大丈夫です。管理人もやってみようかな、『プラグイン無しでも速い』みたいな笑

*お問い合わせフォームページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

■LINEできいてみる(アカウントがある方)

(タップ・またはqrでアプリを起動してください。回答できる内容には限りがありますが、なにか課題解決のきっかけができるかもしれません。)


【カテゴリ】 - webサイト高速表示, wordpressプラグイン(拡張)情報 【タグ】 -

Comment

  1. worpman より:

    便利な機能のプラグインがあるんですね。
    私ははかったことないですが、一度はかった方が良いのかもとは思っています。

  2. ssmika より:

    >worpmanさま
    管理人です。コメントありがとうございます。表示速度は特にスマホには重要ですが、一番大事なのは中身が面白いことです(^_-)

Message

メールアドレスが公開されることはありません。

  関連記事

ページ高速表示~正規URLとリダイレクトで、速度スコアが10点近く違う件

今回は、リダイレクト処理における、ページ表示速度の変化を検証します。 題 …

【ロリポwordpress高速表示でSP90超えろ】ロリポップサーバーで『コンテンツキャッシュ機能』提供開始・設定方法と効果のチェック

今回はサイトを高速表示するときに重要なポイントといえる『キャッシュ活用』 …

【wpプラグイン】ワードプレスサイトに、スマホで電話機能をつけられる『Really Simple Click To Call』

今回は、スマホで電話する機能を、ワードプレスサイトに実装できるプラグイン …

【ワードプレスサイト製作】俺の最低限なインストールプラグイン晒す 

今回は、ねた準備中につき雑談です。 管理人はワードプレス勢ですが、なるべ …

ワードプレスで絵や動画・オーディオのダウンロード販売しよう~Easy Digital Downloads使い方

今回は、ワードプレスプラグインを使って、『絵や動画・オーディオといったデ …

【wpプラグイン】スライドショー実装でwebサイトをリッチにする『Slider by WD』

今回は、ワードプレスでサイトにスライドショーを実装します。 名前は『Sl …

CSSを限界圧縮してヘッダーに書くと、表示速度は速くなるの?(fc2ぶろぐで実験)

今回は、サイトを高速表示するCSSの書き方についてです。 管理人が昔使っ …

データベース圧迫するワードプレス リビジョンを、安定稼動のため削除・制限する(プラグインとconfig.php)

今回は、ワードプレスの機能である『リビジョン』を制御したいと思います。 …

【WPプラグイン・サイト高速化】EWWW Image Optimizerで、画像をサクッと圧縮して表示を速くしよう

今回は、サイトの高速化で、画像を圧縮してくれるものを試します 画像サイズ …

【サイト表示速度】googleのスマホ向け速度チェックツールで、表示速度/秒数を計測

今回は、スマートフォンに特化した、サイトの表示速度チェックツールをご紹介 …