How to add Preload key requests in Yootheme Pro

One of the points of the Google PageSpeed Insights test is to check the presence of preload queries for fonts. Yootheme Pro does not support this option yet, but we will fix it.

The classic method is to create a child theme and modify the header.php file. But I don't use this technique to avoid being tied to a child theme and get updates without fear. To add the desired tag to the HEAD we will use the plugin.

You need download and install the HeadTag plugin.

Go to the plugin settings, activate plugin and enable the Process Content Tags option

We start testing the site and look at the recommendations

All 3 fonts are local copies of Google Font.

Font names are constant and do not change when the theme is updated.

When 'Process Content Tags' is enabled, this plugin searches for the following tags in content areas (articles, category descriptions, modules - anywhere content plugins are enabled to run):

Your declarations and custom tags may span multiple lines.

To install togs, we need to add a block of code to all pages of the site. The easiest way to do this is to add a new item to the site Footer.

The path to the font file I copy directly from Google PageSpeed Insights (right click > copy link address).

Check the page code and run a second test.

Test passed!

NOTES

After adding tags, be sure to clear the theme cache, site cache, and CDN cache (if used) to display all changes.

If you want to learn more about the techniques of optimizing the loading speed of the site to get higher scores in the PageSpeed Insights test subscribe to my newsletter and read other articles on the tag on my site.

You can order separately preload customization for your site for [one][/one] or full optimization for maximum results.

Get help

How to add Preload key requests in Yootheme Pro

NOTES

Subscribe to Our Newsletters

Newsletter Yootheme tricks

Newsletter for developers