I didn't expect to be back developing in WordPress after nine years. I spent much of my time away from WordPress, working on large web apps. One web app was so large that they gave up on making it run locally.
I was back with WordPress, specifically, to optimize PageSpeed Insights performance. Here are my seven tips for WordPress developers.
Table of Contents
1️⃣ Remove jQuery Migrate
2️⃣ Use WebP Images in Your Theme
3️⃣ Use Links When You Need A Link
4️⃣ Minimize CSS with Tailwind
5️⃣ Preload Important Assets
6️⃣ Don't Do Client-Side Rendering
7️⃣ Chrome Developer Tools
1️⃣ Remove jQuery Migrate
WordPress loads the jQuery Migrate JavaScript file on every page. You can likely remove it with no negative impact. When jQuery 2 was released ten years ago, it made changes that broke many existing scripts using jQuery, hence the reason for the jQuery Migrate script. Today, very few jQuery scripts require the migrate script (even with jQuery 3.x updates).
You very likely don't need the jQuery Migrate script. So far, I've only found a single plugin that required the migrate script to not break. Stop making your users download a file that is of no use to anyone.
Can You Safely Remove jQuery Migrate?
You could remove jQuery Migrate to see what breaks. A better alternative is to have jQuery Migrate tell you when it is required. The un-minified version of jQuery Migrate will report to the console anytime a deprecated method is used.
Set SCRIPT_DEBUG to true in your wp-config.php so WordPress loads the non-minified version of jQuery Migrate and the other core JavaScript files.
define( 'SCRIPT_DEBUG', true );
How-to Disable jQuery Migrate
You can remove either by code or with a plugin like Remove jQuery Migrate or via configurations of an optimization plugin like Hummingbird.
function dequeue_jquery_migrate( $scripts ) {
if ( ! is_admin() && ! empty( $scripts->registered['jquery'] ) ) {
$scripts->registered['jquery']->deps = array_diff(
$scripts->registered['jquery']->deps,
[ 'jquery-migrate' ]
);
}
}
add_action( 'wp_default_scripts', 'dequeue_jquery_migrate' );
2️⃣ Use WebP Images in Your Theme
Slim down the size of your theme images by switching from JPEGs and PNGs to WebP. WebP is a newer image format that is roughly 25% smaller while having the same features. If you are worried about browser support, WebP is widely supported in browsers today.
3️⃣ Use Links When You Need A Link
Use <a href> for linking to other pages. Don't use <button>s with JavaScript to add a link. Don't add JavaScript to a <div> to make it a link. It hurts your SEO and delays the time to interact with the page. Most WordPress websites do not do this, but a surprising number do. Keep an eye out for it on a website you are developing on.
4️⃣ Minimize CSS with Tailwind
Optimize your custom WordPress website by using the Tailwind CSS library. The hardship all websites face is endlessly growing CSS files. More CSS means more bytes to download and more effort the browser needs to keep track of all the CSS rules.
One answer to this is utility-centric CSS instead of element-centric. The element-centric is what you are familiar with, where the selectors in your CSS-specific element, like the search bar or navigation items.
Example of element-centric CSS
.primary-menu > li {
display: inline-block;
vertical-align: middle;
white-space: nowrap;
}
Element-centris CSS used in HTML
<ul class="primary-menu">
<li><a>...</a></li>
Utility-centric inverses the selectors as they are not for the element but for a single style. To style an element, you add multiple classes to the element for each styling you want.
Example of utility-centric CSS
.inline-block { display: inline-block; }
.align-middle { vertical-align: middle; }
.whitespace-nowrap { white-space: nowrap; }
Utility-centric CSS used in HTML
<ul>
<li class="inline-block align-middle whitespace-nowrap”><a>...</a></li>
It does increase the size of the HTML, but this is more than offset by the benefit of reducing the CSS blocking time; the browser pauses rendering the page while waiting to download and parse a CSS file.
Resources for using Tailwind CSS in WordPress:
- CSS-Tricks has a detailed article
- TailPress is a plugin to integrate Tailwind into WordPress
5️⃣ Preload Important Assets
Add <link rel= "preload" href="…"> at the top of the <head> for assets you want the browser to get to downloading right away. You don't want to put every asset for the page in a preload, just those you want to move to the front of the queue. Here are some recommended assets you may want to move to preload.
Examples of assets to preload:
- Primary CSS file
- Icon font
- Hero image
- Background image
It is beneficial for preloading assets that are loaded from other assets. For example, the browser without preload hints would have to download and parse the CSS before knowing the font files to download. With the preload hints, the browser can download the font files parallel to the CSS file.
Add Preloads in header.php
In your theme's header.php file, add the preload <link> elements near the top of the <head>. The preload hints should appear as soon as they can in the HTML. The only element it needs to be before is the <meta charset="…"> as that must be the first element in the <head>. I would recommend placing the viewport and title before the preloads if possible.
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="preload" href="<?php echo get_theme_file_uri( 'css/main.css'); ?>" />
<link rel="preload" href="<?php echo get_theme_file_uri( fonts/icons.woff); ?>" />
<?php wp_head(); ?>
Use a Plugin to Add Preloads
Many optimization plugins support preloading assets. Some require manual configuration or additional services.
Here are a few popular plugins:
Use an Optimization Service for Preloads
There are a handful of services that will process and optimize the HTML and assets for your WordPress website. They will automatically detect important assets and add the preload code to what is sent to your visitors.
Here are a few popular services:
6️⃣ Don't Do Client-Side Rendering
Do server-side rendering for your website. You are very likely doing server-side rendering as it is the WordPress way. The easiest way to test is to disable JavaScript and reload the page. If you see the text content, your website is rendered on the server.
Client-side rendering has its place. In fact, a lot of my work has been client-side rendering. It is a good choice for web apps while a poor choice for content websites.
Web Apps
- Social media: Facebook, Instagram, Twitter
- Productivity: Google Docs, Microsoft 365, Trello
- Banking accounts
Content Websites
- Marketing
- Blogs
- Help Centers
- News
- Store products
The two reasons for server-side rendering for content websites are:
- Users see the content faster, making them less likely to abandon the page.
- Google's search bot can scan more of your website in the time it spends on your website.
7️⃣ Chrome Developer Tools
Learn how to use the diagnostic tools of Chrome's Dev Tools. Here are three features you can start using today.
Emulate Slow Networks
Test your website with 3G emulated speeds. Google's PageSpeed Insights defaults to 3G speeds for evaluating your website. These evaluations are believed to impact your SEO ranking in Google.
- Open the Developer Tools
- Click on the Network tab
- Check "Disabled cache" and change "No throttling" to "Fast 3G"
- Reload the page
Block Network Requests
One of the easiest ways to troubleshoot which JavaScript or image file is slowing down the website is to block those network requests. This means Chrome will skip downloading the file.
- Open the Developer Tools
- Click on the Network Tab
- Find the file you want to block in the list
- Open the context menu on the file by right-clicking on the file's row
- Click on "Block request URL"
- Reload the page
To remove the block on the URL:
- Open the "Run command"
- Type "show network request blocking" and click on the action of the same name
- From the bottom panel, you can remove the blocked URL
Highlight Layout Shifts
When optimizing the above-the-fold loading, you'll want to minimize the number of times the visual pieces move about as assets are loaded. An easy way to see this is with the Rendering panel. This works best when emulating 3G speeds.
- Open the Developer Tools
- Open the "Run command"
- Type "show rendering and click the action of the same name
- In the Rendering panel, check "Layout Shift Regions"
- Refresh the page
Conclusion
I hope this motley list of tips helps you level up your WordPress development skills.
👋 Hi there! My name is Seamus Leahy, and I am a software engineer specializing in front-end web development. My ultimate goal is to use my skills to build a better world and to lift up those around me. If you want to work together, message me on LinkedIn.
Top comments (0)