title: PageSpeed is Showing Confusing Results for Prioritizing Above the Fold Content
body: <p>I tested two separate pages on my websites, twice. Once with Pagespeed and another with GTmetrix. My main concern is that Pagespeed is telling me to priorities visible content on one page but not the other. Here's where it gets confusing:</p>
  
  <p><a href="https://i.stack.imgur.com/nvFIz.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nvFIz.jpg" alt="pa"></a></p>
  
  <p>On this page PageSpeed says, "only about 53% of the final above the fold content could be rendered with the full HTML response."</p>
  
  <p>The image below is about the second page. On this page 'prioritize visible content' isn't triggered by PageSpeed. 
  <a href="https://i.stack.imgur.com/gcLUD.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gcLUD.jpg" alt="ff"></a></p>
  
  <p>The funny thing is that both pages have the same layout, and the page that doesn't have the "prioritize above the fold" warning is actually 4.1KB larger than the page that doesn't have that same warning.</p>
  
  <p>The image below shows the size of the page that doesn't trigger the 'above the fold content' warning.
  <a href="https://i.stack.imgur.com/4lht9.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4lht9.jpg" alt="g"></a></p>
  
  <p>The image below shows the size of the page that triggers the 'above the fold content' warning.
  <a href="https://i.stack.imgur.com/pGsGA.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pGsGA.jpg" alt="enter image description here"></a></p>
  
  <p>The page sizes above are for the whole page and not just for the above the fold. The image on the page that triggers the warning is also larger than the image on the page that doesn't. The CSS required to the render the above the page conent is inlined and it's the same style for both pages. Both pages have the same resources and roughly about the same amount of text above the fold.</p>
  
  <p>If both pages have the same layout and about the same text above the fold, how is it possible that the page with the smaller size image triggers the 'above the fold' warning and the one with the larger image doesn't? This is all too confusing.</p>
  
  <p>Another crazy thing that blows my mind is that if a use a 3kb image, with out scaling it up with css, on both pages none of the pages trigger the 'above the fold' warning, but if I use those same images and scale them up with css from 200px wide to 300px wide than both pages trigger 'the above the fold' warning. How is that possible considering that the size of the images is still 3kb?</p>
  
  <p>I would have had more clear results if I knew how to measure the size of the html that is above the fold.</p>