WordPressサイドバーにFacebookページプラグインを記述するとモバイルで確認したときに読み込みが大変遅くなります。

質問に目を留めて頂きありがとうございます。
#スマートフォンでのみWordPressサイトの速度が大変遅くなってしまって困っています。

■WordPressでレスポンシブウェブサイトを制作いたしました。WordPressのオリジナルテーマを作成し、サイトバーにFacebookページプラグイン(お問い合わせページを除く全ページが2カラムです)を配置しております。

サイトの読み込みをより早くさせるたため、ルートの.htaccessに

# キャッシュを有効にする
Header set Cache-Control "max-age=2628000, public"

# キャッシュ設定
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>

# ファイル圧縮設定
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
</IfModule>

との記載をデフォルト記述の#BEGIN WordPressより前にしております。

webサイト自体は圧縮の可否を確認したところ問題ないとのことです
gzip-test

#PageSpeed Insightsだとデスクトップとモバイルの差が極端に出ます。

PCがスコア80~~85に対して、モバイルがスコア36~~40となっております。

モバイルの改善できる項目としてはテキスト圧縮の有効化とのことですが、内容をみるとFBページプラグイン関連のようです。

Facebookページプラグインは読み込みが大変遅いのですが、どうしたも実装せねばなりません。

もともと遅いのがわかっていたので、本来<body>タグ直下に入れる

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.async = true;
  js.src = 'https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v3.1&appId=xxxxxxxxxxxxxxx&autoLogAppEvents=1';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- END //facebook page plugin -->

をfooter.phpの</body>タグ直前に入れています。

<div class="fb-page" data-href="https://www.facebook.com/hogehoge/" data-tabs="timeline" data-width="500" data-height="350" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
<blockquote class="fb-xfbml-parse-ignore" cite="https://www.facebook.com/xxxxxx/"><a href="https://www.facebook.com/hogehoge/">hogehoge</a></blockquote>
</div>

の部分はウィジェットに記載しております。

#WordPressにFBプラグインを導入してもモバイルの速度がmediumぐらいで安定する方法ご教示ください。
ぜひよろしくおねがいします。間違いの指摘などもございましたらお願いします。

退会済みユーザー

2018/11/20 09:14 編集

サイトにjQueryなど読み込み順で問題が発生するものがなければ非同期読み込みを検討してみても良いかとおもいますが、試されましたか？

yomomimi104snow

2018/11/20 09:31

早速のご回答ありがとうございます。Facebookの非同期読みこみについて理解が浅いため、こちらのページ https://requlog.com/self-branding/wordpress/facebook-fast-display/ に記載の方法をとっております。デスクトップでは効果があってスコアも早いのですが、モバイルのみが遅くなっております。

行動規範の内容に同意します

回答1件

自己解決

ご質問読んで頂きありがとうございました。yoshi0819さまにご指摘頂いたように非同期読み込みの設定について該当のプラグインのみでなく、他のcss,jsにも対応させるようhtaccessを少しいじってみたいと思います。
質問に回答寄せてくださったyoshi0819さま、ほかにも閲覧してくださったかたに感謝申し上げます

投稿2018/11/21 01:52

yomomimi104snow

総合スコア16