Wordpress loops efficiency - php

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"><?php echo sprintf( __('Load more posts from %s', 'mida'), $cat_name ); ?></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"> <?php the_title() ?> </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.