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

  • 質問をご覧になって頂きありがとうございます。
    現在公開している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件中)
  • teratailでは解決済みになってますけど
    https://teratail.com/questions/159299

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

    モデレーター Okamoto Hidetaka

    (@hideokamoto)

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

    karaage23

    (@karaage23)

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

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

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • このトピックに返信するにはログインが必要です。