7 Tips for WordPress Dev from a Senior SWE
Tags: webdev, wordpress, performance
Published: 2023-10-05 18:09:56


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](https://pagespeed.web.dev/) performance. Here are my seven tips for WordPress developers.

**Table of Contents**

[1️⃣ Remove jQuery Migrate](#remove-jquery-migrate)
[2️⃣ Use WebP Images in Your Theme](#use-webp-images-in-your-theme)
[3️⃣ Use Links When You Need A Link](#use-links-when-you-need-a-link)
[4️⃣ Minimize CSS with Tailwind](#minimize-css-with-tailwind)
[5️⃣ Preload Important Assets](#preload-important-assets)
[6️⃣ Don't Do Client-Side Rendering](#dont-do-client-side-rendering)
[7️⃣ Chrome Developer Tools](#chrome-developer-tools)

---

## 1️⃣ Remove jQuery Migrate

WordPress loads the [jQuery Migrate](https://github.com/jquery/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.

![jQuery migrate messages in console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3qxvf9az0hmz5pyixtnr.png)

Set [`SCRIPT_DEBUG`](https://wordpress.org/documentation/article/debugging-in-wordpress/#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.

```php
define( 'SCRIPT_DEBUG', true );
```

### How-to Disable jQuery Migrate

You can remove either by code or with a plugin like [Remove jQuery Migrate](https://wordpress.org/plugins/remove-jquery-migrate/) or via configurations of an optimization plugin like [Hummingbird](https://wordpress.org/plugins/hummingbird-performance/).

```php
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](https://developers.google.com/speed/webp) that is roughly 25% smaller while having the same features. If you are worried about browser support, [WebP is widely supported in browsers today](https://github.com/jquery/jquery-migrate).


![Screenshot of caniuse for WebP](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/24t8708lkmbrfxfa5163.png)

---

## 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.

{% codepen https://codepen.io/seamusleahy/pen/MWZqoQz default-tab=html,result %}

---

## 4️⃣ Minimize CSS with Tailwind

Optimize your custom WordPress website by using the [Tailwind CSS library](https://tailwindcss.com/). 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_
```css
.primary-menu > li {
	display: inline-block;
	vertical-align: middle;
	white-space: nowrap;
  }
```

_Element-centris CSS used in HTML_
```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_
```css
.inline-block { display: inline-block; }
.align-middle { vertical-align: middle; }
.whitespace-nowrap { white-space: nowrap; }
```

_Utility-centric CSS used in HTML_
```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](https://web.dev/critical-rendering-path-render-blocking-css/).

Resources for using Tailwind CSS in WordPress:

-   [CSS-Tricks](https://css-tricks.com/adding-tailwind-css-to-wordpress-themes/) has a detailed article
-   [TailPress](https://wordpress.org/plugins/tailpress/) is a plugin to integrate Tailwind into WordPress

---

## 5️⃣ Preload Important Assets

Add [`<link rel= "preload" href="…">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload) 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.

```php
<!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:

-   [WP-Optimize Premium](https://getwpo.com/)
-   [WP Rockets](https://wp-rocket.me/)
-   [Hummingbird](https://wordpress.org/plugins/hummingbird-performance/)

### 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:

-   [FlyingPress](https://flyingpress.com/)
-   [NitroPack](https://nitropack.io/)

---

## 6️⃣ Don't Do Client-Side Rendering

[Do server-side rendering for your website](https://web.dev/rendering-on-the-web/). 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](https://pagespeed.web.dev/) defaults to 3G speeds for evaluating your website. These evaluations are believed to impact your SEO ranking in Google.


![Screenshot of setting network emulation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3t8slk480wiwq76yn8bt.png)

1.  Open the Developer Tools
2.  Click on the Network tab
3.  Check "Disabled cache" and change "No throttling" to "Fast 3G"
4.  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.

1.  Open the Developer Tools
2.  Click on the Network Tab
3.  Find the file you want to block in the list
4.  Open the context menu on the file by right-clicking on the file's row
5.  Click on "Block request URL"
    ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/28l2gutncpzgche4sgj8.png)
6.  Reload the page

To remove the block on the URL:

1.  Open the "Run command"
2.  Type "show network request blocking" and click on the action of the same name
    ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ngd6ztnopsrt0u6lootv.png)
3.  From the bottom panel, you can remove the blocked URL
    ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x28ky69wt36wxd85bmdn.png)

### 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.

1.  Open the Developer Tools
2.  Open the "Run command"
3.  Type "show rendering and click the action of the same name
4.  In the Rendering panel, check "Layout Shift Regions"
    ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/57fki84xodifydxpjxa5.png)
5.  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](https://www.linkedin.com/in/seamusleahy/).**_

---