Best WordPress Plugin for Custom Fields & Meta Boxes
Having an FAQs page on your site will help the visitors to find the information they want easily. This also leads to a higher SEO ranking owing to the better user experience. There is an easy way to add questions and answers using custom fields. So, in this practice, we’re going to add FAQs to a page using Meta Box. And, we’ll use Elementor to build the page.
Continue reading "How to Create an FAQs Page - P1 - Using Meta Box and Elementor" →
Any website owner knows that analyzing website content for SEO is very important. To do it, people usually use SEO plugins. Among these plugins, Yoast SEO is one of the most well-known and popular. It’s undeniable that this plugin has done its job incredibly. However, it still has a minus point which is the lack of custom fields' content analysis. To solve this problem, Meta Box has launched a free extension called Meta Box for Yoast SEO. Without any further ado, let’s spend the next 5 minutes reading to know how to set up SEO analysis for contents in custom fields created by Meta Box.
Continue reading "How To Analyze Content in Custom Fields for SEO - Using Yoast SEO and Meta Box" →
A couple of days ago, Meta Box released a brand new free extension: MB Rank Math Integration and received great attention from the Meta Boxer and Rank Math communities. The integration between Meta Box and Rank Math helps you to add custom fields’ value generated by Meta Box to Rank Math's SEO analysis. As a result, you will know more exactly about how your website and posts are optimized for SEO.
Using this integration is also very simple. Just follow the instructions below to add the content from custom fields to the content analysis of Rank Math.
Continue reading "How to Analyze Content in Custom Fields for SEO - Using Rank Math and Meta Box" →
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!
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.
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.
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.
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:
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.
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.
font-display: swapTo 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'">
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:
You can see it in action on GretaThemes website.
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.
In 2020, 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.
Yoast SEO plugin allows you to set dynamic variables for its meta tags, such as %%title%% for post title or %%excerpt%% for post excerpt. If you're advanced WordPress users, who use custom fields to storing data or custom content, you might want to add these custom fields to Yoast SEO meta tags. How to do that with normal custom fields and Meta Box custom fields?
Continue reading "How to Add Custom Fields to Yoast SEO Meta Tags" →
Although Gutenberg is the default editor in WordPress, not everyone wants to use it because of the bad editing experience. And Gutenberg loads CSS files and lots of inline styles on the front end, which will affect your website loading speed. This article will guide you on how to disable Gutenberg with a simple code without using plugins.
Gutenberg is the new editor added in WordPress 5.0. This editor promises to bring a whole new change and experience to users.
Nevertheless, after launching, it received plenty of criticism (more than praises) as it caused some problems for users, such as:
Therefore, while Gutenberg is not really stable, it should be disabled. Otherwise, if you are using other plugins and you have conflicting problems, you should disable it and go back to the old editor interface.
Besides, Gutenberg outputs a lot of CSS and inline styles in your website's <head>. Here is a screenshot:
Disabling Gutenberg can help you have a better writing experience, and also increase the performance and loading time of your website by removing unused CSS. At the end, it will give your users a faster website, and might help to increase the search rankings.
It’s simple to disable Gutenberg, all you need to do is add the following code into the functions.php file in your theme:
// Disable Gutenberg on the back end.
add_filter( 'use_block_editor_for_post', '__return_false' );
// Disable Gutenberg for widgets.
add_filter( 'use_widgets_block_editor', '__return_false' );
add_action( 'wp_enqueue_scripts', function() {
// Remove CSS on the front end.
wp_dequeue_style( 'wp-block-library' );
// Remove Gutenberg theme.
wp_dequeue_style( 'wp-block-library-theme' );
// Remove inline global CSS on the front end.
wp_dequeue_style( 'global-styles' );
// Remove classic-themes CSS for backwards compatibility for button blocks.
wp_dequeue_style( 'classic-theme-styles' );
}, 20 );
The snippet does these the following things:
<head>. That will decrease your website performance and slow it down.If you want to disable Gutenberg for a specific post type, use the code below:
add_filter( 'use_block_editor_for_post_type', function( $enabled, $post_type ) {
return 'your_post_type' === $post_type ? false : $enabled;
}, 10, 2 );
There are other ways to disable Gutenberg that are suitable if you're not familiar with adding snippets to your theme. We recommend the plugin Falcon - an optimization plugin from us (eLightUp) to disable Gutenberg. It offers a lot of optimization tweaks like:
And much more. It's very lightweight and requires little configuration. Here is the plugin screenshot:
If you haven't used Falcon yet, we'd suggest trying it. It's simple, fast and very easy to use. Coded by us, so we guarantee about the coding quality and the performance.
In conclusion, we think disabling Gutenberg is a good way to write posts in WordPress. At Meta Box, we completely disable Gutenberg and all the related stuff with Falcon. It helps us have a better writing experience and not have to fix unpredictable bugs with the block editor. It also helps us have a better performance on the front end by removing unneccessary CSS, which is a pain point in optimizing the website for pagespeed.
