0

My website has a 3-column design.

I am sticking on Prioritize visible content of google PageSpeed Test

It said "None of the final above-the-fold content could be rendered even with the full HTML response."

Sometime when I edit the code, the msg will change to "xx% of the final....".

How does the % count? And what I have to do to solved this problem?

Here is my testing site: https://yudans.net/index2.php

and the PageSpeed Report: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fyudans.net%2Findex2.php&tab=desktop

What I did :

  • toke off all the render blocking elements,
  • put ths css of above-the-fold content in tag,
  • well resized of all imgaes used,
  • no external javascript/css used and
  • passed AMP HTML (validator.ampproject.org/#url=https%3A%2F%2Fyudans.net%2Findex2.php)

What can I do else? Thanks!

Vadim Kotov
  • 8,084
  • 8
  • 48
  • 62
Jackson Chan
  • 1
  • 2

1 Answers1

0

Since browsers render things in sequence. If you have 3 columns, it will have to render the entire 1st column all the way to the bottom to get to the second. And the entire second column to get to the third.

So you're basically rendering the entire page just to show what's above the fold (visible on page load).

To make page speed insights happy, You will want to make it 6 columns. The top 3 columns are above the fold, and the other 3 would be below it.

you can then style them to look like a regular 3 column layout. BUT, now the html for above the fold gets rendered first, and you can also put just the css for only for the top 3 columns in the head.

enter image description here

Skäggiga Mannen
  • 984
  • 7
  • 16
  • Before i ask this question, the index2.php was pretty lack of content. With all 3 columns was having just one picture(thats means all of them are above the fold), the error msg is still there. How and why this come out? – Jackson Chan Mar 07 '17 at 18:34
  • Another question: as u can see in my column 1, it is infinite ajax scrolling content, and the height of browser is vary. How can i determine the "line" of the "above the fold"? – Jackson Chan Mar 07 '17 at 18:40
  • The "prioritize visible content" issue is saying it wants to render only what's 'above the fold' first. and yes, being above the fold is somewhat arbitrary since monitor sizes/resolutions and window sizes alter what is visible. The html is rendered from top to bottom. so they would prefer a layout like:
    – Skäggiga Mannen Mar 08 '17 at 21:33
  • Also, it may not be possible to actually fix that error at this time anyway, it's prevalent, and even sites with pretty much nothing on them, everything inline, no external files.. still get that warning. I would wager that it is inaccurate, and requires some google dev time to improve. – Skäggiga Mannen Mar 09 '17 at 14:17