Intermediate | Web Training Wheels

Preconnect to Required Origins in WordPress

Preconnect to required origins is a PageSpeed recommendation that you may see if your site loads files from external domains. It can be satisfied by adding either preconnect or dns-prefetch directives to your page.

preconnect and dns-prefetch are types of “resource hints” which are used to try and speed up the loading of files hosted on 3rd party domains.

Resource hints are small pieces of HTML that are added to the page, to communicate to the browser to start specific tasks as soon as possible.

This is what resource hints look like in the HTML of a page:

<link rel='dns-prefetch' href='//fonts.googleapis.com' />
<link href='https://fonts.gstatic.com' crossorigin rel='preconnect' />Code language: HTML, XML (xml)

Don’t get this confused with preload, another type of resource hint, which is used for specific files.

In this article I’ll explain the difference between preconnect and prefetch, which you should use, and how to add these to your site.

How to Serve Static Assets with an Efficient Cache Policy in WordPress

Audience: Beginners, Intermediate

Speed Optimization

The Google PageSpeed recommendation to serve static assets with an efficient cache policy is all about browser caching. It’s usually pretty straightforward to fix on WordPress sites.

“Static assets” means the files on your site: CSS, JavaScript, images, fonts, videos (and other media files).

“Efficient cache policy” means that they have a long enough browser caching value so that they do not have to be downloaded by your site visitors frequently. Usually 4 months or longer is enough to satisfy Google and other tools.

Reduce Unused CSS in WordPress

Audience: Beginners, Intermediate

Speed Optimization

Addressing PageSpeed’s recommendation to Reduce Unused CSS improves your site’s overall score, along with the First Contentful Paint (FCP) and Largest Contentful Paint (LCP) metrics.

Removing unused CSS is closely tied with removing render-blocking resources, and the plugins available will often let you achieve both things at once:

Load only the exact CSS needed for any given page
Make sure that CSS is not render-blocking

What is zxcvbn.min.js in WordPress?

Audience: Beginners, Intermediate

Tutorials

Whenever a user creates a password for their account in WordPress, by default you see a meter telling you how strong your password is:

You may see this both on the backend, for example in the Edit User screen, and on the front end, for example when WooCommerce customers create an account in your shop.

This password strength meter feature is handled automatically by a few files, one of them being: zxcvbn.min.js

How to Migrate from DesktopServer to Local

Audience: Developers, Intermediate

Tutorials

Now that DesktopServer has sadly closed down, it’s time to move to another tool for working with WordPress locally. I’m going to be using Local (formerly Local by Flywheel) for now.

Fortunately it’s easy to migrate from DesktopServer to Local.

Local has an import tool and it just requires a zip file with your site files and your database.
This is exactly how DesktopServer’s export feature creates backups.

So first we’ll use DesktopServer to create the backup file. Then we’ll import it into Flywheel.

How to Sync WooCommerce Products Between Sites

Audience: Intermediate

Tutorials

When you are working with a WordPress development or staging site in conjunction with a live site, there are often times when you just want to migrate a couple of products, for example, from staging to live, without re-migrating the whole site. Or you may be looking for a way to keep products synchronized between your sites.

While there are some tools, like WP Migrate DB (pro), that let you sync databases pretty easily, that can be overkill for some situations, and they tend to be more developer-centric.