优先考虑pagespeed中的可见内容

Question

I'm working on the item Prioritize visible content. I've moved styles related to the top window in the head. What happened you can see on the following screenshot:

After I wrote a simplified test code to figure out what was going on.

<style type="text/css">
    .test1 {
        width: 60px;
        height: 60px;
        margin: 5px;
        border: 1px solid #123;
        color: red;
        background:url(http://upmovie.biz/wp-content/themes/movie2/img/movie.png);
    }
    .test2 {
        width: 60px;
        height: 60px;
        margin: 5px;
        border: 1px solid #123;
        color: red;
    }
    .test3 {
        width: 60px;
        height: 60px;
        margin: 5px;
        border: 1px solid #123;
        color: red;
    }

    .test4 {
        width: 60px;
        height: 60px;
        margin: 5px;
        border: 1px solid #123;
        color: red;
    }   
</style>


<div class="test1">
    test 1
</div>
<div class="test2" style="background:url(img/movie.png);">
    test 2
</div>
<div class="test3" style="background:url(http://upmovie.biz/wp-content/themes/movie2/img/movie.png);">
    test 3
</div>
<div class="test4">test 4
    <img src="http://upmovie.biz/wp-content/themes/movie2/img/movie.png">
</div>

In the screenshot number 5, the browser displays the site before downloading the main style file. And you can see what happened in the end:

The browser displays images, and the Google service does not display images. I've come to a standstill. What else can I do?

Answer 1

The image loading is causing the text to reposition after the image load. That means the user cannot effectively read all the content showed in the screen till that image load.

Google PSI would like that the text is in its final position before any image have to load.

The effect of the image is really obvious, but it also happens with the other content that after loading, push or pull the content down.

For you to solve this, you have to handle the Skip to content link, the font icon loading, and the image.

For the image

You have three options:

1 Move the image below, so it does not show in the "above the fold" (the initially visible) content. The text after the image will still be reposition when the image load, but that won't be an issue for the reader, as will be done when he is reading the content "above the fold".

2 Create a div that contains the image and has the same size. So the text be positioned from the beginning. Without waiting to load the image. This would have to be carefully implemented if you want your site to be responsive

3 Create a div with a defined size that shows the image has a background.

In the solution 2 and 3, you could also put a background colour for the DIV, so the image will be loaded in top of that afterwards. Something like this:

For the font icon

Don't let the icon font push everything down. Set the height of the button and box beforehand.

For the Skip to content link

You could put that link off screen, above. Just do not hide it via JS later. Hide it from the beginning, or keep it there.