Wordpress loops efficiency

Question

I build this site with wordpress: http://mida.org.il/

As you can see, homepage takes a lot of time to load. I'm trying to fix this - there are five custom loops in that page, three of them using posts_per_page and cat to query posts, and posts_per_page set to 3. My question is, if the loop gets to the third post, it stops and and breaks out, or its keep looping until it gets to the last post? If the second is correct, no wonder that it's so slow, this site holds thousands of posts.

The code for the loops:

if ( $first_special_cat ){
    $args = array( 'cat'=>$first_special_cat, 'posts_per_page'=>3, 'orderby'=>'date', 'post__not_in'=>$sticky );
    $cat_name = $first_special_cat;
    $cat_id = get_cat_ID($first_special_cat);
}else{  
    $args = array( 'cat'=>50, 'posts_per_page'=>3, 'orderby'=>'date', 'post__not_in'=>$sticky );
    $cat_name = get_cat_name(50);
    $cat_id = 50;
}
$the_query = new WP_Query($args);


echo '<div class="special-proj-main-title">';
echo '<div class="homepage-blueline-title"></div>';
echo '<h4 class="special-cat-name"><a href="' . esc_url( get_term_link($cat_id) ) . '">' . $cat_name . '</h4>';
echo '</div>';

?>
<div class="row">
    <div class="col-sm-4">  
        <?php if ( $the_query->have_posts() ): ?>
            <?php while ( $the_query->have_posts() ) : $the_query->the_post(); //Setting the three posts to the right: ?>                                   
                    <h2 class="special-project-title"><a class="special-proj-title-link" href="<?php echo esc_url( get_the_permalink() )?>"><?php the_title()?></a></h2> <br/>
                    <div class="post-meta special-project-meta"><?php mida_post_meta()?></div><br/>
            <?php 
                endwhile; 
                wp_reset_postdata(); ?>
                <span class="to-all-posts"><a href="<?php echo esc_url( get_term_link($cat_id) )?>"><?php echo sprintf( __('Load more posts from %s', 'mida'), $cat_name ); ?></a></span>
                <?php 
                else:
                    echo "You put wrong id";
            endif;
            ?>                          
    </div>      
    <div class="col-sm-8 home-background-img">
        <?php 
        if ( $first_special_post )
            $args = array('name' => $first_special_post, 'posts_per_page' => 1  );
        else 
            $args = array('cat'=>50, 'posts_per_page' => 1, 'orderby'=>'date'   );

        $the_query = new WP_Query( $args );
        if ( $the_query->have_posts() ):
            while ( $the_query->have_posts() ) : $the_query->the_post(); ?>         
                    <?php 
                    $first_special_img = get_field('rectangular_image');
                    if ( $first_special_img )
                        $first_special_img_src = wp_get_attachment_image_src( $first_special_img['id'], 'full' );
                    else 
                        $first_special_img_src = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' );
                    ?>
                    <div class="special-project-section" style="background: url('<?php echo $first_special_img_src[0]; ?>');background-size: contain;"> 

                        <a href="<?php echo esc_url( get_the_permalink() )?>" title="<?php the_title() ?>"><span style="
                            position:absolute;
                            width:100%;
                            height:100%;
                            top:0;
                            left:0;
                            z-index: 1;"></</span>
                        </a>                            
                        <?php 
                        echo '<div class="special-cat-on-img">';
                        echo $first_special_text ? '<h5><div class="special-cat-name-img">' . $first_special_text . '</div></h5>' : '<h5><div class="special-cat-name-img">' . __('Special Project', 'mida') . '</div></h5>'; ?>    
                         <h6 class="speical-cat-title-img"><a href="<?php the_permalink()?>"> <?php the_title() ?> </a></h6>                
                        <?php echo '</div>'; ?>
                        <div class="blue-line"><?php echo '<div class="special-proj-ex">' . $first_special_cat_ex  . '</div>'; ?></div>

                    </div>
                    <?php           
             endwhile;
             wp_reset_postdata(); 
         endif;
         ?>         
    </div>
</div>

X3.

every loop query different categories ( $first_special_ are custom fields, input from the user ).

So can anyone help me optimize this code (and answer the above question)?

Thanks!

Answer 1

You problem is NOT in your loop but rather in the page itself. Total page size is a whopping 11.8MB! This looks primarily due to a ton of images. You might try a little image optimization (use jpg's for post thumbs/images) and make sure images are sized correctly. Honestly, lazy loading might be a good solution here! There are plenty of options out there to make it easy to implement.