Meta Box Lite
Meta Box

Blog

The Fastest Way To Load Google Fonts In WordPress (Part 2)

The Fastest Way To Load Google Fonts In WordPress (Part 2)

Google Fonts is always a bottleneck for website performance. The Google Fonts' CSS is a render-blocking resource, which means that the browser won't render any processed content until the CSS is loaded. It also causes a blank space when the font is being loaded.

In the previous post of this series, I have shown you a way to get rid of these problems using a script from PerfPerfPerf. Since then, Google Fonts has some updates and the PerfPerfPerf's becomes outdated. And we need a better way to load Google Fonts now!

Google Fonts loading problems

Before going into the solution, let's summarize 2 issues, as they are the most important problems with Google Fonts. And these are the problems we're going to resolve in this article.

Google Fonts Render Blocking CSS

When Google Fonts is being loaded, no further content (text, images, CSS, JavaScript, etc.) is loaded. That means your whole page is blocked until Google Fonts finishes loading its CSS.

This problem is critical because it freezes your website when loading and increases the First Contentful Paint (FCP) of the page. FCP is an important, user-centric metric for measuring perceived load speed because it marks the first point in the page load timeline where the user can see anything on the screen—a fast FCP helps reassure the user that something is happening. It's a part of the Web Core Vitals and is an SEO factor. So if you have it high, your site might get a lower ranking.

Blank space while loading Google Fonts

The FOIT (Flash Of Invisible Text) effect that causes bad user experience and bad FCP (First Contentful Paint)
The FOIT (Flash Of Invisible Text) effect that causes bad user experience and bad FCP (First Contentful Paint)

Another problem with Google Fonts is that when it's being loaded, the text is completely vanished before your eyes. Only until it's finished loading, you can see the text. This effect is called FOIT (Flash Of Invisible Text).

That causes a really bad experience for your users. And if the loading time is huge, your users might think your website is broken (because they see nothing!).

And FOIT also affects the First Contentful Paint (FCP) as well, and thus might affect your search ranking.

How to fix Google Fonts problems

Load Google Fonts asynchronously

To solve the 1st problem of render-blocking, we need to load Google Fonts asynchronously. That means we'll load the Google Fonts' CSS without blocking loading or rendering other resources.

There are 2 solutions:

Preloading CSS with rel="preload"

preload is a mechanism to load resources without any effect on loading the other ones. It also puts a higher priority on the resources that are preloaded. That means these resources will be load before other resources. You can read more about this on MDN.

Let's assume you want to load Roboto font. Google gives you the HTML like this:

<link href="https://fonts.googleapis.com/css2?family=Roboto" rel="stylesheet">

To make the CSS preloaded, you need to change it to:

<link href="https://fonts.googleapis.com/css2?family=Roboto" rel="preload" as="style" onload="this.rel='stylesheet'">

The CSS is now preloaded. And when it finishes loading, it'll be applied.

The preload technique works well in all modern browsers.

Using media type

Another solution is using media type, which is supported by all browsers. This technique is created by Filament Group. The HTML markup is simple as follows:

<link href="https://fonts.googleapis.com/css2?family=Roboto" rel="stylesheet" media="print" onload="this.media='all'">

What it does is loads the CSS for the print-based media. In other words, the CSS is applied only when the users try to print the page. The loading process is now asynchronous (since we're on browsers). And when it's done, the CSS is applied for all media (which includes browsers).

I've been testing this technique for a while and see a good improvement in font loading. You can test on MetaBox.io and docs.metabox.io websites to see how it works.

Using font-display: swap

To solve the 2nd problem with a blank is when loading fonts, we need to use font-display: swap. Basically, it allows us to display the text first with a fallback font family (usually serif or sans-serif). And when the font is loaded, it swaps the text into the wanted font. This effect is called FOUT (Flash Of Unstyled Text). Unlike FOIT (Flash Of Invisible Text), users still see the text while the font is loaded. So, the user experience is better. And also the FCP (First Contentful Paint) is lower.

The good news is Google Fonts now supports font-display: swap by default. You can see it in the font URL like this:

<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

Notice the display=swap in the URL. The CSS loaded for the font will have font-display: swap.

This technique works in all modern browsers, and it's safe to use.

Just a note that the solution in the 1st part of this series, which uses PerfPerfPerf script, tries to add font-display: swap to the Google Fonts' CSS. It's not needed anymore.

So the final code to load Google fonts now is either of these:

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="preload" as="style" onload="this.rel='stylesheet'">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet" media="print" onload="this.media='all'">

Apply Google Fonts loading techniques in WordPress

The best way to apply the techniques above is adding the code into your theme's header.php file. Or you can create a child theme and modify the header.php file. So your header.php file will look like this:

<!doctype html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
    <?php wp_head(); ?>
</head>
// Other code

I find it's harder to do this if you use page builders. You need to disable default Google Fonts and apply the code above. The only plugin I found that disables the Google Fonts is Autoptimize. Unfortunately, it removes our manual link tag, too.

The best solution for page builders is using Autoptimize to preload the Google Fonts. You can turn it on the settings page:

Preload Google Fonts in WordPress with Autoptimize
Preload Google Fonts in WordPress with Autoptimize

You can see it in action on GretaThemes website.

Conclusion

After applying the new techniques to our websites, I'm quite happy with the result. The loading speed is increased and the FOUT effect is minimal. Users probably don't notice the font change (swapping). And of course, the Google PageSpeed Insights score is higher than before (in my test for MetaBox.io's homepage, it has 100 scores for desktops).

I think optimizing the loading speed for Google Fonts is very important for both users and search engines. And you should do it now. Feel free to discuss this with us on the Facebook group, or leave a comment below.

How to Style Meta Box’s Custom Fields With CSS

How to Style Meta Box’s Custom Fields With CSS

Meta Box's custom fields have a default padding, color, border, font, etc. which may not fit your design in either back end or front end. So you may want to change how they display, making them more eye-catching. That's the moment you want to style them.

So do the custom fields created by Meta Box. You definitely can style every custom field created by Meta Box as you want. In this post, I will give you some ways to use CSS to style the fields.

Continue reading "How to Style Meta Box’s Custom Fields With CSS" →

How to Set Up Two-Factor Authentication for WordPress

How to Set Up Two-Factor Authentication for WordPress

It is important to take the security of our websites seriously because none of us wants to end up losing crucial site data or a scenario where the website dies forever.

Many factors can cause the security of your website to get compromised such as a hacker attack, data breach, Cross-site Scripting, SQL Injection, DDoS attacks, Backdoor Trojans, Ransomware, or anything as simple yet threatening as Internet fraud. The truth is that as a webmaster, any individual or team cannot afford the loss of value and integrity caused due to any such events to their website. Continue reading "How to Set Up Two-Factor Authentication for WordPress" →

How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend

How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend

In the first post of this series, we created a page showing all the hotel room’s information. It normally has a button or several call-to-action areas to go to the booking page which allows your customers to make an order. However, ‘cause some businesses have strong direct channels, they want their sales to make booking orders for their customers as well. Along with that, to have you imagine how to create a booking page in the frontend later (which is in the 3rd post), I made this post to show you how to create one in the backend. That is for internal users only.

Continue reading "How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend" →

Top Lead Generation Strategies That Will Continue in 2020

Top Lead Generation Strategies That Will Continue in 2020

Lead generation isn't a brand new concept. It's been around for many years now and will continue to be relevant even in the coming years.

As its name suggests, lead generation refers to the act of finding and creating leads for a business. This means new clients, new referrals, and new customers or traffic coming on your website.

Continue reading "Top Lead Generation Strategies That Will Continue in 2020" →

How to Build a Hotel Booking Website Using Meta Box - P1

How to Build a Hotel Booking Website Using Meta Box - P1

In this series, we would like to introduce a way to build a Hotel Booking website using Meta Box. Usually, a Hotel Booking page has 4 common pages as below:

  1. Room’s page where you show all the room information in the frontend;
  2. Booking page in backend for your internal using;
  3. Booking page in frontend for your customer’s using;
  4. Booking management page in the backend.

Continue reading "How to Build a Hotel Booking Website Using Meta Box - P1" →

The Best White Hat SEO Tactics in 2020

Best White Hat SEO Tactics

There have been massive changes in the game called SEO. Some hit some webmasters pretty badly while boosting others, resulting in some massive shifts in SERPs.

And while there still are some who use illicit techniques to boost their ranking, slowly but surely, white hat SEO tactics and methods are becoming the safest investment for both short and long-term growth.

So What Has Changed In SEO?

Once considered to be the slow way to the top, white hat techniques are slowly but surely becoming the best way to increase your site’s ranking.

The many changes and updates made to search engines in the past year have made them more adept at catching and sanctioning illegal behavior, which means less spammy and scammy sites in your search results.

Black hat techniques are not as simple to implement as they once were, meaning they are not as cost-efficient, which is good - as this is a big step in moving towards creating a level playing field for everyone.

Here are some of the bigger changes made to SEO:

  • Mobile Indexing Comes First For New Domains

That’s right. Google announced that as of May this year, all new domains will be indexed by default for mobile-first approach. Meaning, sites should provide 100% of the content to both desktop and mobile users if they want to get indexed.

  • SERP’s Diversification

In June this year, Google rolled out the Site Diversity Update which, put simply, guarantees more source website diversity on the first page. You won’t get more than two listings from one website.

  • Improved Content Presentation

As of January, Google has started to present some of the content of other sites right on the top of the search results. Why? Well, when the search engine finds data that is relevant to your search, it presents the most important bits of it. Content and data structure are more important than ever.

There have been many other changes that have left their mark, but the above three are considered to be the game-changers for this year.

With that said, let’s go through the best white hat methods that can make a big difference in 2020.

The Best White Hat SEO Tactics

There are lots of white tactics out there but the ones we’ll mention and explain here are considered to be the most promising and show the best results.

The Best White Hat SEO Tactics 2019

A Focus on Mobile

Let’s be honest here. Much of the surfing and browsing is done with smartphones, and if you haven’t already updated your site to be more mobile-friendly, your ranking will be lower. Why? Google tends to rate mobile-friendly sites higher.

Creating a mobile-friendly site is not that hard nowadays, and there are also a few apps that can help you test your site and suggest improvements.

High-Quality User Experience (UX) Is Crucial

An aspect that is becoming more and more important, due to the rising importance of bounce rates. A better UX means that a user won’t just leave your site immediately after visiting - they’ll stick around and check out more content.

A good UX build is something that requires a lot of work and research, as it covers almost every aspect of a site. Thankfully, there are a lot of guides on how to make a good UX, and the folks over at Google have even made one themselves.

If you are more confident with entrusting your website's UX design to more experienced professionals, consider hiring one of the top UX agencies on this list.

Appropriate Link Building

No links, no love. That’s how it is in SEO. If you want your site to rank higher, you will need links from authoritative sources added to your posts. You only need to keep in mind that there is a fine line between ‘enough’ and ‘too much, which is also a factor that can decide if this is a white hat or a black hat style link building.

Many go with Private Blog Networks (PBN), which is a gray hat method. This method involves creating a web of networks that will all link to your main site, and boost its rating. Although not illegal, this method is still risky. If you want to give PBNs a try, we suggest you also employ a good PBN hosting service, whose PBN hosting services will ensure there won’t be a trace that can lead Google’s search engine to discover your PBN.

SEO solutions

Increased Social Media Outreach

Social media platforms can hugely influence your site’s ranking. Getting your content in front of the massive audiences of Facebook and Twitter is paramount for the success of your online enterprise.

First, you find your audience, or better said, the audience with the highest chance of being interested in what you’re selling. Play nice with all who want to promote your content, and also be kind to return the favor when asked. Don’t be one of those people that writes to others only when you need help. Business partnerships are not just contracts. You also need to have good relationships with others. Creating good relationships with your audience and presenting your brand online the right way might be challenging sometimes. Getting help from a trusted branding agency is always a good option.

Good Keyword Research <=> Good Content

Keywords are not just words put here and there in order to satisfy a certain standard. They were in the past, but today keywords are a combination of words and phrases that are used in a certain niche. Good keyword research will give you a good direction in which you should design and create your content. Simply said, the better the research, the more keywords you will have, and the more you use them (in a relevant way), and the better your content is, the higher your site will rank.

Final Words

These tactics will not make your site #1, but they can help you set the foundation for long-term success. There is no shortcut to the first page on Google that is also sustainable in the long term.

While the rules and ethics of SEO change frequently, white hat SEO methods are what they are and will not change any time soon! What’s more, they are getting more and more effective - they’re the foundation for sustainable business growth. That's why most SEOs prefer completing periodic SEO courses online to improve their knowledge and strategies on a continual basis.