Wordpress Visible Content Priority

Question

I am launching a Wordpress site and creating a special theme. Now I am fixated on optimizing for Google PageSpeed . The Mobile page shows the following:

Consider a fix: only about 63% of the final content on top can be displayed with full HTML response

This appears since I included Featured Image above my posts in index.php with 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 problem? It does not seem to me that I am loading something like a sidebar in front of the selected image, except for the site logo. For a deeper understanding, here is the full 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 problem? What am I doing wrong?

Answer 1

As someone who has 100/100 pages in speed, I can tell you that over-optimizing for speed is probably not worth the frustration that you will encounter troubleshooting. For example, run the Pagespeed test on Wikipedia or on YouTube. These are the best sites, and on YouTube, for example, only 50 points. The real reason you would like to improve these numbers is to provide users with a better experience, because they don’t have to wait for the page to load.

Your above collapsible content is just what is allowed to display, waiting for additional resources to load:

Your page has 4 blocking script resources and 2 blocking CSS resources. This causes a delay in the rendering of your page.
None of the above content on your page can be loaded without waiting for the following resources to load. Try deferring or loading blocking resources asynchronously, or embed critical parts of these resources directly in HTML.

Remove JavaScript visualization lock:
/...-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:
/wp-content/themes/1000PB/style.css
/...ghtbox/styles/lightbox.min.css?ver=1.4.6

It’s best to spend your efforts on optimizing their delivery (using async or defer for scripts and style sheets), as they will reduce your overall page rank and damage the ranking of your search engine.

To answer your question, you can check the elements that are at the top of the page, usually everything that can be seen without scrolling down to see their css. Example:

 img.attachment-post-thumbnail { border: 1px solid #e6e6e6; padding: 3px; } 

So the material is best included in the embedded <style> element in the header, as the browser does not have to wait for style.css to load before it can show the page to users.

If you need help hacking a Wordpress theme to do certain things, to make it faster, for example, mini scripts, asynchronous scripts, using defer , disabling emoji, etc., just ask in the comments or send another question and we will happy to help.

I recommend testing on other sites to better understand what is happening. I recommend Webpagetest.org and using the Waterfall chart I’ll tell you which resources take the longest:

You can also use tools to help with this:
CSS tricks: authorial critical over-fold CSS
High Quality CSS Tools (Above)