WordPress: Set Up Above The Fold for Better Speed

If you are into WordPress and want to speed up your site, setting up Above The Fold is a must.Above The Fold

Τι σημαίνει Above The Fold και γιατί η το θεωρεί σημαντικό;

The PageSpeed ​​Tools of Google, repeatedly mention Above The Fold as a very important factor that can give more speed or slow down the web you.

Above The Fold is the half of the front page of a newspaper or website that often contains an important story or photo. The 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.

Along with this CSS it would be good not to have any javascript at the top of the page, but make sure they load at the end, near the footer.

The following images show the source code in the header and footer of iGuru.gr. You will notice that there is no javascript in the header, just as there is no CSS in the footer.

Header
Above The FoldFooterSomewhere 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 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-/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).

https://jonassebastianohlsson.com/criticalpathcssgenerator/

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 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!

iGuRu.gr The Best Technology Site in Greecefgns

Subscribe to Blog by Email

Subscribe to this blog and receive notifications of new posts by email.

Written by giorgos

George still wonders what he's doing here ...

Leave a reply

Your email address is not published. Required fields are mentioned with *

Your message will not be published if:
1. Contains insulting, defamatory, racist, offensive or inappropriate comments.
2. Causes harm to minors.
3. It interferes with the privacy and individual and social rights of other users.
4. Advertises products or services or websites.
5. Contains personal information (address, phone, etc.).