Visible content is, as defined by Patrick Sexton, ‘the portion of a web page users see on their screen before they scroll’, and is also known as ‘above the fold’ content.
As this is the content the user sees first, prioritising this to load fastest is important so that users get to view content from the page as soon as possible. This in turn makes them more likely to stay on the page, and by extension prompts Google to look upon the page more favourably when ranking.
Here we will look at a few ways you can prioritise your visible content so users get the best possible experience of your web page (and help with your ranking along the way)!
Re-ordering HTML content
When your browser loads a page, it does so in the order the HTML is written. So, for example, if the sidebar section is placed before the content section in the HTML, the sidebar will load first.
If you keep this in mind, then you can reorder your HTML content so that the most important parts load first. If we look at the example above, it would probably be useful to load the main body of visible content first, as this gives your user something to read whilst other sections like sidebars (which tend to contain your adverts and buttons, which the user doesn’t need so immediately) load afterwards. By prioritising the content in the HTML, you are prioritising what reaches users first.
This is part of the reason why the code for footers, which often contain buttons, links, and possibly photos, are placed at the bottom of the page in most WordPress themes. By keeping them at the bottom of the page, they can be placed further down the HTML and loaded after the main body content, which is the priority.
Separating visible content
If you want to prioritise visible content, this is easiest if it is separate from the rest of the content on the page.
This doesn’t mean that the page has to look visibly split into two parts when seen by users – so if there is a sidebar that runs along the whole page, both above and below the fold, it should look like one seamless sidebar throughout. However, in the HTML you could have them structured under a different layout (so in this same example, the sidebar could be split into an above the fold and below the fold sidebar in the HTML). Once this is done, you can arrange the sections of content in the way described above so that the visible content is the priority.
Combining and inlining CSS files
The more external CSS files a page has to load, the longer it will take to do so. Thus, if there is a CSS file that is relatively small and page specific (so it would not need to be loaded for any other pages), then it may be worth inlining it within the HTML (remembering to keep it in the HTML head and using style tags). This means that when the browser looks through the HTML, it will not have to take the extra time loading an external CSS resource, so visible content will load more quickly.
In a similar vein of thought, other CSS files that can be combined into one external file should be, so that the browser only has one external file to download and look through when loading the page, increasing page speed even further. Minifying the CSS files you have combined can help even further by getting rid of the blank space the browser will need to go through as it reads your CSS file.