How to make the above the fold optimization?

  • One of the main web performance bottlenecks is the page rendering time. Thinking about it, I decided to do the “above above fold” optimization on my site, but then there’s the trouble…

    How does “above the fold” process work?

    – Rudely, You must add the css inline and download asynchronously the “rest” of the css.

    This applies perfectly to a singlepage’s site. But on sites with multiple pages where css “above the fold” is different not.

    Ex:
    Home – layout and css “X”
    Page – layout and css “Y”
    Single – layout and css “Z”

    As far as I know, the “above the fold” optimization is done for all pages. As WordPress works using the SAME <HEAD> (<?php get_header ();?>) for ALL pages, if I do the “above the fold” optimization, all the pages in my site will download the inline css. A css that is only useful on the homepage, soon an unnecessary css, soon I will be downloading unnecessary files.

    There are this plugin but I want make it direct in code. Without plugins.

    So how can I do the “above the fold” optimaztion in WordPress? How do I do this?

    Someone can help me?

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hello Santosluiz,

    Thanks for the question about making above the fold optimization WITHOUT plugins. Make no mistake, this is definitely an advanced subject and you MUST be familiar with everything loading with your WordPress site. My answer to you is based on a post by a web developer named Mr. Stefan Ledin (The WordPress Performance Challenge, part 7: Success is found above the fold).

    His premise is that you can’t make a WordPress website perform quickly without these three things:

    • Load stylesheets asynchronously
    • Insert critical, above the fold CSS into < head >
    • Move scripts to the bottom and load them asynchronously

    His article details his research into the issue and how he used plugins to resolve the problem resulting in a lighting fast page. As per your request, your are looking for optimization above the fold without plugins. So, I looked for coding solutions for these 3 basic steps. Believe it or not many people have looked at this issue and a few have published their findings.

    The first option was to load stylesheets asynchronously. This link goes to a Github page which provides code for modification of the functions.php and loadcss.js that enable you to load the stylesheets in the order to that you specify. You will need to determine what you are loading and how to add them into the code to load asynchronously.

    The second step deals with the CSS. This post by Joe Watkins details his approach in determining the critical CSS that needs to be loaded above the fold. His goal is also geared towards creating a high-performance WordPress site. He uses a tool called gruntcriticalcss in order to pick out the styles needed to be loaded in the above the fold optimization. Note that he also uses plugins in his efforts towards a solution for speeding up WordPress.

    Finally, the last step has to do with moving scripts that do not need to be loaded in the above the fold optimization. You would need to move them so that they load AFTER everything has been loaded with your above the fold optimization.

    You mentioned that the above the fold optimization solutions need to apply to multiple pages. If you are trying to apply the optimizations with different pages, then you would need to identify the different page “heads” that you want to optimize. In general, the optimization for “above the fold” applies to the central page loaded on a website and that “head” may stay with most pages. However, depending on your theme, you may see a different header and you would need to apply your optimization according to what is loaded in those pages. You should be able to identify these different headers in the theme used with your WordPress site. If you require further help with the theme code, I highly recommend speaking with the theme developer(s).

    I know I speak very vaguely in some instances regarding what has to be moved, but it will all depend on your WordPress installation and what you are loading. As I’m sure you know, the complexity of all these tasks may be better resolved with plugins, but that will be a decision you will need to make. I hope that this summary from several different sources provides the information you seek. If anything, it provides you with other resources in optimizing your WordPress site.

    Regards,

    Arnel C.

    • This reply was modified 8 years, 2 months ago by Arnel C.. Reason: added thoughts on multiple page optimization
    • This reply was modified 8 years, 2 months ago by Arnel C..
    Thread Starter santosluiz

    (@santosluiz)

    You mentioned that I must identify the different page “heads” that I want to optimize. But this is the trouble. The WordPress uses the SAME head for all pages. The file header.php.

    As WordPress uses the same head for all, when I made the critical css, this css will be of my homepage, main page. If I open the “Contact” page the user will download the critical css the “above the fold” of homepage/main page and after will download the css of “contact” page.

    Yeah, this is a complex subject to work, but I’ll find it more deeply, study the plugins code that do this and learn how it works from start to finish.

    Thank’s a lot for you reply.

    I really liked the links you sent. I will read them all carefully.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to make the above the fold optimization?’ is closed to new replies.