Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • July 25, 2018 at 2:52 pm #989723
    tixxpff

    Hi there,

    I just finished optimising a website of mine for best performance and while my Google Pagespeed Insight rating for the Desktop version of my website is at 92, the mobile version gets rated a 66. And after a bit of testing I figured out that the color section at the top of my page is causing the bad rating.

    Let me explain: On my homepage I have a color section set to a height of 100% at the very top of the page (it’s the 1st element). In that color section I have 2x 1/2 colums with a bit of text and an image in them. Now, when I test my homepage with Google PSI I get the following result:

    Prioritize visible content
    Your page requires additional network round trips to render the above-the-fold content. For best performance, reduce the amount of HTML needed to render above-the-fold content. Only about 36% of the final above-the-fold content could be rendered with the full HTML response.

    I know this can have many different causes, but I’ve definitely narrowed it down to the color section. When I completely remove it and only leave the 2 1/2-colums my rating jumps up to 90. I’ve also tried removing the background color and any custom settings for the color section and the rating still won’t get higher than 65. This leads me to believe that the color section itself is the problem and not the settings I’ve chosen.

    Now, I’m quite experienced with optimising website performance and I am absolutely aware that getting to a Google PSI rating of 100 is neither realistic nor desirable. But the visible content problem is definitely something I want to fix.

    TL;DR What do I have to do, so my website won’t need additional round trips for the content inside the color section to be loaded? Removing the color section is not an option by the way.

    Thanks guys!

    • This topic was modified 5 years, 10 months ago by tixxpff.
    July 26, 2018 at 8:07 am #990099
    Ismael

    Hey tixxpff,

    Thank you for using Enfold.

    There’s an article in our archive page that is related to optimization, which might help. It was specifically created to guide users on how to optimize the theme and have the site score higher on the speed test.

    // https://kriesi.at/archives/scoring-100-100-in-google-pagespeed-insights-gtmetrix-pagespeed-and-yslow

    Best regards,
    Ismael

    July 29, 2018 at 6:56 pm #991168
    tixxpff

    Hi Ismael,

    thanks for your reply, but that doesn’t answer my question at all. Like I said, I’m not struggling with getting a good performance score in general, I know how to do that I was asking about a very specific element (the color section) and its effect on the Google PSI score and if there was a way to improve the pagespeed/reducing the number of roundtrips needed to load the content inside the color section.

    Thanks

    July 30, 2018 at 4:57 am #991371
    Ismael

    Hi,

    What do you mean by “roundtrips”? The theme automatically loads the required css and scripts for the “above-the-fold-content”. Please provide a link to the site so that we can test it.

    Best regards,
    Ismael

    July 30, 2018 at 3:21 pm #991539
    tixxpff

    Hi Ismael,
    by “roundtrips” I was referring to what Google PSI shows me in its report. Apparently it takes one request to load the color section and then another one to load the content inside it.
    There’s a link to the Google PSI report (and my website) in the box below so you can check for yourself. I’m referring to the “Prioritize visible content” bullet point in the mobile section of the report.

    Thanks!

    July 31, 2018 at 8:52 am #991830
    Ismael

    Hi,

    Thanks for the info. Looks like the html is minified and I don’t see the critical css styles that are supposed to be generated by the theme. Are you using a plugin to compress the html? Did you enable the theme’s Performance > Compression features?

    Best regards,
    Ismael

    August 2, 2018 at 7:53 pm #992972
    tixxpff

    Hi Ismael,
    yes I did and yes I do use additional minification plugins. I’ll disable everything now, so you can take a better look at it.

    Regards

    August 3, 2018 at 11:22 am #993187
    Ismael

    Hi,

    Thanks for the update

    According to the documentation, if the amount of the data above the fold exceeds 14.6kB, it will require additional round trips between the server and the user’s browser to render the whole content. The “laptop” image alone is 37.1KB so I don’t think you can’t get around or passed this criteria without removing the image, or using a smaller and compressed version of that image.

    If the amount of data required exceeds the initial congestion window (typically 14.6kB compressed), it will require additional round trips between your server and the user’s browser. For users on networks with high latencies such as mobile networks this can cause significant delays to page loading.

    // https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent

    Best regards,
    Ismael

    August 3, 2018 at 7:39 pm #993348
    tixxpff

    Hi Ismael,
    thanks for clearing that up. That’ll help me to fix it.

    August 4, 2018 at 7:48 am #993435
    Rikard

    Hi,

    Thanks for the feedback. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    August 4, 2018 at 3:56 pm #993520
    tixxpff

    Hi Rikard,
    feel free to close it. My issue has been resolved :)

    August 5, 2018 at 7:50 am #993624
    Rikard

    Hi,

    Great, thanks for letting us know. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Color Section affecting Google Pagespeed Insights Rating’ is closed to new replies.