我正在运行WooCommerce在线商店，并且创建了一个带有产品类别标签的菜单。单击它们后，产品即会加载到页面上。

               <div class="w3-container">
                <div class="w3-bar w3-black">
                  <ul>
             <li class="catproducts"><button class="w3-bar-item w3-button tablink w3-red" 
             onclick="openProducts(event,’flowers’)”>
            <img src="flowers.png" />
           Flowers</button></li>

         <li class="catproducts"><button id="bt2" class="w3-bar-item w3-button tablink" 
          onclick="openProducts(event,’christmas)”>
          <img src="christmas-tree.png" />
           Christmas</button></li>
           </ul>
            </div>
          <div id="flowers" class="w3-container w3-border cat">
            [products category="flowers"]</div>
     <div id="christmas" class="w3-container w3-border cat" style="display: none;">
        [products category="christmas"]</div>
         </div>


// Javascript 
  function openProducts(evt,prodCat) {
  var i,x,tablinks;
  x = document.getElementsByClassname("cat");
  for (i = 0; i < x.length; i++) {
  x[i].style.display = "none";
  }
  tablinks = document.getElementsByClassname("tablink");
  for (i = 0; i < x.length; i++) {
  tablinks[i].classname = tablinks[i].classname.replace(" w3-red","");
  }
  document.getElementById(prodCat).style.display = "block";
  evt.currentTarget.classname += " w3-red";
  }

问题在于，由于所有产品都正在页面上加载，因此页面加载缓慢。我如何通过仅加载特定类别的产品并将其他woocommerce短代码与产品存储在外部的其他地方来加快页面速度？我应该使用AJAX吗？请帮助我