Prioritize Visible Content Wordpress - php

Question

I am running a Wordpress site and created a custom theme.
Now I'm stuck with optimizing it for Google PageSpeed. It shows the following for the Mobile page:
Consider Fixing: Only about 63% of the final above-the-fold content could be rendered with the full HTML response
This appears since I've included the Featured Image above my posts on the index.php with the code:
<p>
<?php if ( has_post_thumbnail() ) : ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail(); ?>
</a>
<?php endif; ?>
</p>
How can I fix the issue? It doesn't seems to me that I'm loading something like a sidebar before the featured image, apart from the logo of the site. For a deeper comprehension, here the complete code of my index.php
<?php get_header(); ?>
<div id="main">
<div id="content">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<p>
<?php if ( has_post_thumbnail() ) : ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail(); ?>
</a>
<?php endif; ?>
</p>
<h1>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
<?php the_title(); ?>
</a>
</h1>
<p>
<?php the_content(__(' <br /> <br /> Weiterlesen →')); ?>
</p>
<hr>
<?php endwhile; else: ?>
<p>
<?php _e('Sorry, no posts matched your criteria.'); ?>
</p>
<?php endif; ?>
<?php if (show_posts_nav()) : ?>
<div class="pagination">
<?php echo paginate_links(); ?>
</div>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
</div>
<div id="delimiter">
</div>
<?php get_footer(); ?>
Can someone help me with this issue? What am I doing wrong?

Answer 1

As someone who holds a 100/100 pagespeed score, I can tell you that over-optimizing for speed is probably not worth the frustrations you're going to run into fixing the problems. Case in point, run a Pagespeed test on Wikipedia or YouTube. These are top sites and YouTube only has a score of 50, for example. The real reason you'd want to improve these numbers is to provide a better experience to users because they don't have to wait for the page to load.
Your above the fold content is simply what is allowed to be displayed while waiting on additional resources to load:
Your page has 4 blocking script resources and 2 blocking CSS resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
Remove render-blocking JavaScript:
/…-includes/js/jquery/jquery.js?ver=1.11.3
/…s/jquery/jquery-migrate.min.js?ver=1.2.1
/…ghtbox/jquery.touchwipe.min.js?ver=1.4.6
/…ightbox/jquery.lightbox.min.js?ver=1.4.6
Optimize CSS Delivery of the following:
/wp-content/themes/1000PB/style.css
/…ghtbox/styles/lightbox.min.css?ver=1.4.6
Your efforts are best spent optimizing the delivery of these, (using async or defer for scripts and stylesheets) since those will lower your overall pagespeed score and hurt your search engine rankings.
To answer your question, though, you can inspect elements that are towards the top of your page, generally anything that can be seen without scrolling down, to see their css. Example:
img.attachment-post-thumbnail {
border: 1px solid #e6e6e6;
padding: 3px;
}
So that stuff is best included in an inline <style> element in the header, as then the browser won't have to wait for style.css to load before it can show the page to users.
If you need help with hacking your Wordpress theme to do certain things to make it faster, such as minifying scripts, making scripts asynchronous, using defer, disabling emoji, and so on, just ask in comments or submit another question and we will be glad to help.
I recommend testing on other sites to get a better idea of what's going on. I recommend Webpagetest.org and using a Waterfall chart will tell you which resources are taking the longest:
You can also use tools to help with this:
CSS Tricks: Authoring Critical Above-the-Fold CSS
Critical-path (Above-the-fold) CSS Tools