If you are into WordPress and want to speed up your site, setting up Above The Fold is a must.
Τι σημαίνει Above The Fold και γιατί η Google το θεωρεί σημαντικό;
Above The Fold is the half of the front page of a newspaper or website that often contains an important story or photo. The websites they do not appear whole to the visitors of a site and usually only the upper half is visible.
So what Google is asking websites to do is prioritize the CSS on the top half of the site, so that it loads faster.
FooterSomewhere here we will talk about the add-on Autoptimize.
With Autoptimize we will collect the CSS of your page, and we will make Above The Fold.
The following picture shows you the settings for CSS
But what code do you use in the last box Inline "abobe the fold CSS"?
Find the style.css file that your chosen theme uses. Located at wp-content/themes/iguru where iguru is the name of your theme.
Attentionor, the post is about WordPress self-hosted installations, not sites hosted by WordPress.com.
Open the file with your favorite editor (notepad ++ or geany on Linux) and copy all the code it contains.
Immediately after, open the following page (it contains an automated tool that will detect the Above the fold code for you).
Write the url of your website, and below the large box paste the code you copied from style.css.
With a click on 3. Create Critical path CSS, you will be shown the code to copy and paste into Autoptimize's Inline “abobe the fold CSS” box.
Save your settings in Autoptimize and you're ready to go. Immediately after you can test the result in GTMetrix. You must first delete all cached files.
Stay tuned for higher speeds!