title: Why is my admin-ajax so slow compared to other sites that also use it?
body: <p><a href="http://staging.keebs.com/" rel="nofollow noreferrer">Here is my site.</a></p>
  
  <p>If you hover over one of the projects and click the plus icon, the Ajax call goes out and the response returns in 1-4 seconds on average. I'm not understanding why it's so slow compared to a <a href="http://onioneyethemes.com/yin-and-yang/" rel="nofollow noreferrer">similar site</a> that also uses <code>admin-ajax.php</code> (try hovering/clicking on one of the projects on that site to compare). All of the images called by Ajax are optimized. I also optimized my database tables. I'm not sure what else I can do.</p>
  
  <p>Here is a comparison of the response time of <code>admin-ajax.php</code> from both sites. As you can see, the other site takes 480ms while mine takes 2s:</p>
  
  <p><img src="https://i.stack.imgur.com/ic4mn.jpg" alt="enter image description here"></p>
  
  <p>Here is how I have my Ajax call set up. Sorry, I didn't simplify the code because I think maybe the reason for the delay can only be found in the full code. The actual Ajax call is about halfway down.</p>
  
  <pre><code>(function($) {
  
      // Function to allow an event to fire after all images are loaded
      $.fn.imagesLoaded = function () {
  
          var imgs = this.find('img[src!=""]');
  
          // If there are no images, just return an already resolved promise
          if (!imgs.length) {
              return $.Deferred().resolve().promise();
          }
  
          // For each image, add a deferred object to the array which resolves when the image is loaded
          var dfds = [];
          imgs.each(function(){
  
              var dfd = $.Deferred();
              dfds.push(dfd);
              var img = new Image();
              img.onload = function(){dfd.resolve();};
              img.src = this.src;
  
          });
  
          // Return a master promise object which will resolve when all the deferred objects have resolved
          // IE - when all the images are loaded
          return $.when.apply($, dfds);
  
      };
  
      // Function for additional styling
      function projectStyles() {
  
          // Check the first slide input
          $('#slider input:first').attr('checked', 'checked');
  
          $('#project-wrapper').addClass('activated');
  
          // Make the articles grey again after activation
          $('article.project').addClass('grayscale grayscale-fade').css('opacity', '0.4');
  
          // CSS effects
          $('.post-container').addClass('fadeInUp');
          $('.close-button').addClass('fadeInDown');
  
          // Remove pesky, sticky 'hover' class
          $('article.project').removeClass('hover');
      }
  
      // Make the max-height of the container exact for a smoother transition
      function matchContainerHeight() {
          var heightHandler = function() {
              var containerHeight = $('#project-container').outerHeight();
              $('#project-wrapper.activated').css('max-height', containerHeight);
          };
          setTimeout(heightHandler, 100);
          $(window).on('resize', heightHandler);
      }
  
      // Open the project container
      function openProject() {
  
          var post_id = $(this).data('id'), // data-id attribute for .post-link
              ajaxURL = site.ajaxURL; // Ajax URL localized from functions.php
  
          // Add a loading icon
          $('&lt;span class="loading-icon"&gt;&lt;/span&gt;').insertBefore(this);
  
          // Add the 'active' class to make sure the div stays dark while loading
          $(this).closest('article.project').addClass('active hover-sticky');
  
          // Make all the articles grey when an article is clicked
          $('article.project').addClass('grayscale grayscale-fade grayscale-sticky').css('opacity', '0.4');
  
          // No hover on images while a project is loading
          $('article.project img').addClass('nohover');
  
          // Remove all corner ribbons
          $('article').removeClass('current');
          $('.corner-ribbon').remove();
  
          // Add a corner ribbon to note the current activated project
          $(this).closest('article.project').removeClass('active').addClass('current');
          $('&lt;div class="corner-ribbon"&gt;Current&lt;/div&gt;').prependTo('article.current');
  
          // Call Ajax
          $.ajax({
              type: 'POST',
              url: ajaxURL,
              data: {'action': 'load-content', post_id: post_id },
              success: function(response) {
  
                  // Wait until all images are loaded
                  $('#project-container').html(response).imagesLoaded().then(function() {
  
                      // Fire again to rearrange the slide in the DOM
                      resize();
  
                      // Remove all 'hover' classes
                      $('article.project').removeClass('hover-sticky grayscale-sticky');
                      $('article.project img').removeClass('nohover');
  
                      // Remove the loading icon
                      $('.loading-icon').remove();
  
                      // If the user has scrolled...
                      if ($(window).scrollTop() !== 0) {
  
                          // First scroll the page to the top
                          $('html, body').animate({
                              scrollTop : 0
                          },400, function() {
  
                              matchContainerHeight();
                              projectStyles();
  
                          });
  
                      // If the user has not scrolled...
                      } else {
  
                          matchContainerHeight();
                          projectStyles();
  
                      }
  
                      return false;
                  });
              }
          });
      }
  
      // User event
      $('#content').on('click', '.post-link', function(e) {
          e.preventDefault();
  
          var projectTitle = $(this).data('title'), // data-title attribute for .post-link
              projectSlug = $(this).data('slug'); // data-slug attribute for .post-link
  
          // Calls openProject() in context of 'this' (.post-link)
          openProject.call(this);
  
          $('head').find('title').text(projectTitle + ' | Keebs');
      });
  
  })(jQuery);
  </code></pre>
  
  <p>Here is the Ajax response file. I'm using the ACF plugin, but I tried the response without any of the ACF fields and the wait time was the same. I also tried removing everything within the <code>my_load_ajax_content()</code> function but the wait time was still the same as well. So I'm guessing something else is causing the long wait time. I also tried GET instead of POST but the response time was around the same:</p>
  
  <pre><code>&lt;?php
  /**
   * Ajax functions
   */
  
  // Return the post content to the AJAX call
  function my_load_ajax_content () {
  
      $args = array(
          'p' =&gt; $_POST['post_id'],
          'post_type' =&gt; 'projects'
          );
  
      $post_query = new WP_Query( $args );
      while( $post_query-&gt;have_posts() ) : $post_query-&gt;the_post(); ?&gt;
  
      &lt;div class="post-container"&gt;
          &lt;div id="project-left-content"&gt;
              &lt;?php the_title( '&lt;h1 class="entry-title"&gt;', '&lt;/h1&gt;' ); ?&gt;
              &lt;?php the_content(); ?&gt;
  
              &lt;?php if( get_field('client') ): ?&gt;
                  &lt;div class="client"&gt;
                      Client(s): &lt;?php the_field('client'); ?&gt;
                  &lt;/div&gt;
              &lt;?php endif; ?&gt;
  
              &lt;div class="project-cats"&gt;
                  &lt;?php
                      $cat_names = wp_list_pluck( get_the_category(), 'cat_name');
                      echo join( ', ', $cat_names );
                  ?&gt;
              &lt;/div&gt;
  
              &lt;?php if( get_field('url') ): ?&gt;
                  &lt;div class="project-link"&gt;
                      &lt;a class="first after" href="http://&lt;?php the_field('url'); ?&gt;" target="_blank"&gt;&lt;?php the_field('url'); ?&gt;&lt;/a&gt;
                  &lt;/div&gt;
              &lt;?php endif; ?&gt;
          &lt;/div&gt;
          &lt;div id="project-right-content"&gt;
  
              &lt;?php if( have_rows('slides') ): ?&gt;
  
                  &lt;div id="slider"&gt;
  
                      &lt;!-- Slider Setup --&gt;
                      &lt;?php if( have_rows('slides') ):
                          $slideNumber = 0;
                          while ( have_rows('slides') ) : the_row();
                          $slideNumber++;
                      ?&gt;
  
                          &lt;input type="radio" name="slider" id="slide&lt;?php echo $slideNumber; ?&gt;"&gt;
  
                      &lt;?php endwhile;endif; ?&gt;
  
                      &lt;!-- Slide --&gt;
                      &lt;?php if( have_rows('slides') ): ?&gt;
                          &lt;div id="slides"&gt;
                              &lt;div id="overflow"&gt;
                                  &lt;div class="inner"&gt;
  
                                      &lt;?php if( have_rows('slides') ):
                                      while ( have_rows('slides') ) : the_row();
  
                                          $slideImage = get_sub_field('slide_image');
                                      ?&gt;
  
                                      &lt;article&gt;
                                          &lt;img src="&lt;?php echo $slideImage; ?&gt;" alt="&lt;?php the_title(); ?&gt;"&gt;
                                      &lt;/article&gt;
  
                                      &lt;?php endwhile;endif; ?&gt;
  
                                  &lt;/div&gt;&lt;!-- #inner --&gt;
                              &lt;/div&gt;&lt;!-- #overflow --&gt;
                          &lt;/div&gt;&lt;!-- #slides --&gt;
  
                      &lt;?php endif; ?&gt;
  
                      &lt;!-- Controls --&gt;
                      &lt;?php if( have_rows('slides') ):
                          $slideNumber = 0;
                      ?&gt;
                          &lt;div id="active"&gt;
  
                              &lt;?php while ( have_rows('slides') ) : the_row();
                                  $slideNumber++;
                              ?&gt;
                                  &lt;label for="slide&lt;?php echo $slideNumber; ?&gt;"&gt;&lt;/label&gt;
                              &lt;?php endwhile; ?&gt;
  
                          &lt;/div&gt;&lt;!-- #active --&gt;
                      &lt;?php endif; ?&gt;
                  &lt;/div&gt;&lt;!-- #slider --&gt;
              &lt;?php endif; ?&gt;
          &lt;/div&gt;&lt;!-- #project-right-content --&gt;
      &lt;/div&gt;&lt;!-- .post-container --&gt;
  
      &lt;?php
      endwhile;
      wp_die();
  }
  
  add_action ( 'wp_ajax_nopriv_load-content', 'my_load_ajax_content' ); // when the user is logged in
  add_action ( 'wp_ajax_load-content', 'my_load_ajax_content' ); // when the user is not logged in
  </code></pre>
  
  <p>Does anybody see something that I should be doing differently?</p>