WordPressレスポンシブサイトを作成するもモバイルのみで表示速度が大変遅く困っています。(再アップ)

  • karaage23

    (@karaage23)


    5年、 9ヶ月前

    質問をご覧になって頂きありがとうございます。
    現在公開しているWordPressのウェブサイトがモバイルでのみ表示速度が大変遅くなってしまって困っています。

    WordPressでレスポンシブのサイトを制作いたしました。オリジナルテーマで(Underscoreがベース)作成し、サイトバーにFacebookページプラグイン(お問い合わせページのみサイドバーはなしです)を配置しております。

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

    
# cacheを有効にする
Header set Cache-Control "max-age=2628000, public"

# cache設定
<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>

# file_compresse
<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(http://www.giftofspeed.com/gzip-test/)などで確認

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

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

    モバイルの改善できる項目としてはテキスト圧縮の有効化とのことですが、内容をみるとFBページプラグイン関連のようです。 → ..js(static.xx.fbcdn.net)という記載についてテキスト圧縮の有効化がいいと判断されています。

    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>タグ直前に入れていますが、一度<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ぐらいで安定する方法ご教示ください。
    ぜひよろしくおねがいします。

    現在サイトの速度に関するプラグインとしては
    ・Autoptimize
    ・BJ Lazy Load
    ・EWWW Image Optimizer
    が導入されております。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • npssl

    (@npssl)

    5年、 9ヶ月前

    teratailでは解決済みになってますけど
    https://teratail.com/questions/159299

    トピック投稿者 karaage23

    (@karaage23)

    5年、 9ヶ月前

    お世話になります。
    teratailで当初質問させていただいたのですが、質問の内容がWordPress関連だったので、こちらでより詳しくお伺いしようと思いました。
    マルチポストを避けるために削除依頼をかけたのですが、terataiｌさまの方針で削除リクエストが拒否されてしまったので、解決済にさせていただき、このフォーラムでより詳細に現状を記載し、質問させていただいております。
    大変困ったおりますので、アドバイス頂戴できるかたがいらしたら大変ありがたいです。

    モデレーター Okamoto Hidetaka

    (@hideokamoto)

    5年、 9ヶ月前

    画像サイズは確認しましたか？
    ボトルネックになるのは画像がPC向けのまま配信されていることが多いですので、一度確認してみてください。

    トピック投稿者 karaage23

    (@karaage23)

    5年、 9ヶ月前

    @hideokamoto さま
    ご回答を頂きありがとうございます。おっしゃるように画像サイズが適切でないのかもしれないです。Heroイメージの部分をpicture要素、srcset要素で画像を出し分けているのですが、スマホの画像の部分が大きいように思います。

    一人で作業をしておりますのでこの問題に対してかなりハマってしまったのですが、おかげさまで光明が見いだせた気がします。
    アドバイス頂戴しまして本当にありがとうございます。
    実際に@hideokamoto様のアドバイス通り作業を終了させて頂いてから、こちらのトピックを解決済みにしたいと思っております。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「WordPressレスポンシブサイトを作成するもモバイルのみで表示速度が大変遅く困っています。(再アップ)」には新たに返信することはできません。