静的サイトに一部WPを導入したが、読み込みが遅すぎる

Question

前提

既存の静的なサイトにブログ機能を追加することなり、部分的にWordPressを導入し、
静的サイトのトップページにWordPressから持ってきた、ブログのフィードを表示させました。
WordPressは、Themaforestで購入した、以下のテンプレートです。
https://themeforest.net/item/cleanstart-clean-multipurpose-business-theme/8981419

部分的にWordPressを導入

ネットの情報をもとに以下のように記述しました。

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script>
     $.ajax({
          url: 'https://example.com',
          type: 'get',
          dataType: 'xml',
          timeout: 10000,
          success: function (xml, status) {
               if (status === 'success') {
                    var row = 0;
                    var data = [];
                    var nodeName;
                    var date =
                         $(xml).find('item').each(function () {
                              data[row] = {};
                              $(this).children().each(function () {
                                   nodeName = $(this)[0].nodeName;
                                   data[row][nodeName] = {};
                                   attributes = $(this)[0].attributes;
                                   for (var i in attributes) {
                                        data[row][nodeName][attributes[i].name] = attributes[i].value;
                                   }
                                   data[row][nodeName]['text'] = $(this).text();
                              });
                              row++;
                         });
                    $('#rss').wrapInner('<ul style="list-style:none;"></ul>');
                    for (i in data) {
                         var update = data[i].pubDate.text;
                         var date = new Date(update);
                         var update = dateFormat(date);
                         $('#rss').find('ul').append('<li><div class="border-line"><a href="' + data[i].link.text + '">' + update + '　　　' + data[i].title.text + '</a></div></li>');
                         if (i >= 4) {
                              break;
                         }
                    }
               }
          }
     });

function dateFormat(date) {
var y = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate();
var w = date.getDay();

m = ('0' + m).slice(-2);
d = ('0' + d).slice(-2);

return y + '/' + m + '/' + d;
}

</script>
<section id="blog">
  <div class="container" style="margin-top:50px;">
       <h2 class="section_header fancy centered">blog<small>ブログ</small></h2>
 <div class="blog-center" class="margin:0 auto;">
 <div id="rss"></div>
</div>
</div>
<div class="wp-more" style="text-align:center;">
<a class="btn btn-primary" href="https://comunica.co.jp/news/wp/">BLOG LIST</a>
</div>
</section>

発生している問題

表示はできているのですが動作が重たく、サイトが読み込まれてから、ブログのフィードを表示するまで、3秒ほど遅れてしまいます。
何回かに一回、全く表示されないこともあります。ブラウザのコンソールをみてもそれらしいエラーは見つかりません。
コードを改善する箇所はありますでしょうか？
ご教授いただけると幸いです。

試したこと

そもそもWordPressが重たいことも考え、わかる限り不要なデータはサーバーから削除しました。
また、jsではなくPHPで部分的に読み込むようにも試しましたが、やはり重たくサイトを表示するのに5秒ほどかかってしまいました。

サーバーを変えることも考えております。

Answer 1

遅いだけでは様々な原因が考えられるので何とも言えませんが、
気になるのはAjaxで取ってきたRSSフィードと思われるXMLをjQueryでそれなりに加工していることが原因の可能性もあるので、
一度加工せずにそのまま表示してみたりしてjQueryによる加工が原因で表示に時間かかっているのるかどうか確認してみてはどうでしょうか？
それですぐ表示されるようでしたらサーバーを乗り換える前にREST APIにしてJavaScriptで加工しやすくするとかフィード表示用固定ページを作ってWP側で加工するとか工夫の余地が出てきます。

jQueryの加工が原因じゃないとすれば(WPが動いている)サーバー乗り換えるかCMS乗り換えるかくらいしかない可能性が高そうです。

Answer 2

ブラウザ開発ツール（F12）で「ネットワーク」のタブを見れば「何に時間がかかっているか」が分かるので、そこから辿っていけば解決方法も見えてくるかもしれません。
１０回くらいは数値を取りたいところですね。あとブラウザ別も。

ただ、そもそも他者サーバにリクエストを投げている時点でそれなりに時間はかかることになるし、
JavaScriptでHTMLを生成するのもそれなりにコストがかかる処理となります。
（ゆえに、自サーバ内でのリクエストでは組みあがったHTMLそのものを返すものも結構あると思います）

Answer 3

                     if (i >= 4) {
                          break;
                     }

4記事表示させたいんですね。
このJavaScriptは記事の取得と、その後のHTML生成までやってるみたいですが
データの取得数は制限してないですね。
4記事のデータだけで良いところを、何十件、何百件と取ってきた後に全て加工し、
最後に先頭の4件だけ出力しているように見えます。

今実装されているようなAjaxで取ってくる処理を行うとき、データの取得数制限というのは今回で言うとWP側でやります。

WPは詳しくないですが、データ取得先のURLにパラメータを付けるなどして件数を絞れるんじゃないでしょうか。
なければ受け側(WP側)で、?limit=4というアクセスが来たら4件だけ返すなどの仕込みが必要です。