In this guide, we’ll look at various front-end optimization techniques for WordPress to improve its performance. Anything that is entirely performed by the browser from the client’s end, including CSS, JavaScript, graphics, and so on, is considered front-end. This involves looking at the external services that are loaded on your site and the ways they affect the total load time.
In terms of front-end optimization, the following are two of the most important goals to set:
- Minimizing the total size of your web page: It’s essential to consider the size of your JavaScript, CSS, and image files. A website that is 4 MB in size will generally load much slower than one that is 1 MB. However, it’s critical to double-check that the effect of page size on load time isn’t the only thing you measure, as this might be deceptive.
- External services and HTTP requests are being reduced: Numerous requests and responses can now be transmitted simultaneously over a single TCP connection with HTTP/2. While this is great for performance, lowering HTTP requests might still make your WordPress site run faster. Minimizing the overall number of external services and requests is also part of this. TLS connections, DNS lookups, and network latency all add to the overall delay.
Establish a Benchmark by Speed Testing Your WordPress Site
It’s always a fantastic idea to start with a benchmark when refining your website’s front-end. A speed test is the best way to establish a benchmark. When speed testing, keep the following points in mind:
Choose and Commit to a Single Tool
Pingdom, WebPageTest, GTmetrix, Chrome DevTools, and PageSpeed Insights are among our favorite tools. However, being consistent is more crucial than which speed tester you use. They all have their unique methods for gauging and assessing speed, so choose one and commit to it for all your tests and adjustments.
Don’t Get Hung up on Achieving a Perfect Score
Several tools, like Google PageSpeed Insights, provide a performance score. It’s vital to keep in mind that the score isn’t always as essential as the speed of your WordPress site and the user’s perception of its performance. The goal of the score is to let you determine how well you’re doing. However, stressing over a perfect score may be a pointless exercise in some situations. Larger websites with plenty of external scripts and ads will never achieve a perfect score, which is fine.
Your Test’s Location Is Crucial
When speed testing, it’s crucial to be careful in picking your location. This is because it all depends on the data center’s location. All these factors play a role, including TTFB and network latency. As a result, conduct your speed test from both a close and a long distance from your data center. This will also show you how much of a difference a CDN can make on your site.
Caching Requires Multiple Tests
If the cache on your WordPress server or CDN has just been deleted or has expired, the HTTP header will be set to “MISS,” as we previously discussed in the chapter on caching. This indicates that your site or resource is not being served from cache.
To get an accurate picture of your site’s performance, everything from the cache, your home page, and all resources must record a “HIT.” This may involve performing your speed test several times. Once finished, calculate the average.
Let’s look at some front-end adjustments you can apply to your WordPress site.
Eliminating Query Strings
Speed test programs frequently display warnings or recommendations towards eliminating query strings. What exactly does this mean? The file version is usually appended to the end of the URL for CSS and JavaScript files, like https://yourdomain.com/file.min.css?ver=4.5.3, for example. Query strings cannot be cached by some servers or proxy servers. As a result, eliminating them can boost your caching performance.
You can use a paid plugin like Perfmatters to eliminate query strings with a single click. You can also manually insert the code below to the functions.php file of your theme. Using a free plugin such as Code Snippets for adding the code might be a better option. By doing this, you won’t have to touch your theme directly.
function remove_query_strings() {
if(!is_admin()) {
add_filter(‘script_loader_src’, ‘remove_query_strings_split’, 15);
add_filter(‘style_loader_src’, ‘remove_query_strings_split’, 15);
}
}
function remove_query_strings_split($src){
$output = preg_split(“/(&ver|\?ver)/”, $src);
return $output[0];
}
add_action(‘init’, ‘remove_query_strings’);
However, before you start removing query strings from your site, it’s crucial to understand why they’re needed. WordPress developers frequently employ file versioning to circumvent caching issues.
If a plugin developer makes an update that modifies the style.css from version 4.6 to version 4.7, it will be viewed as a completely new URL that will not be cached. When query strings are removed and a plugin is updated, the cached version may continue to serve. In rare circumstances, this may cause your site to malfunction until the cached resource has expired or the cache has been flushed completely. Query strings can also be cached by some CDNs.
Remove Render-Blocking Javascript and CSS
If you have files stopping your website from loading as quickly as possible, an alert on render-blocking CSS and JavaScript may pop up. Certain JavaScripts and CSS are conditional, which means they aren’t always required to display content above the fold. You can keep them from becoming render-blocking using the defer and async attributes.
To get rid of render-blocking JavaScript and CSS, follow these steps:
Remove JavaScript off the Critical Rendering Path
Adding the async or defer attributes to the script HTML elements that access JavaScript resources is a common way to move JavaScript off the critical rendering path.
- The async attribute instructs the browser to begin downloading the resource immediately rather than delaying HTML parsing. HTML parsing is halted to allow the resource to be loaded once it is accessible.
- The defer attribute instructs the browser to wait until HTML parsing is finished, before downloading the resource. Following the completion of the HTML, all deferred scripts will be downloaded and rendered by the browser in the order in which they are listed in the document.
Improving CSS Resources Delivery
CSS delivery optimization is primarily concerned with preventing render-blocking.
- Determine which styles are needed to render content above the fold and provide them consistently with the HTML.
- On devices, only use CSS conditionally when it’s necessary.
- Asynchronously load the remaining CSS.
Achieving all of these might be a difficult task that requires some tinkering depending on the scripts you have loaded on your site. Here are a few free WordPress plugins that may be useful:
Combine External JavaScript and CSS in WordPress
When you use a CDN or an external domain to host your CSS files, you may receive a combine external CSS warning. Concatenating or combining your CSS files so they load in one request was an easy hack in the past.
However, if you’re using HTTPS and a host that supports HTTP/2, this warning isn’t as significant as it once was. Several CSS files can now be processed simultaneously over one connection, thanks to HTTP/2, which is supported by more than 86% of browsers.
But that doesn’t rule out the possibility of further optimization. We’ve observed that this helps WordPress sites perform better in several cases, but is dependent on the file size and quantity. As a result, we advise that you continue to test this optimization on your website.
The free Autoptimize plugin is among the most straightforward techniques to combine your external JavaScript and CSS files. After you’ve combined them, you’ll have a file called “autoptimize_xxxxx.js” or “autoptimize_xxxxx.css.” It also allows you to load them from a CDN. You can also use WP Rocket to accomplish this.
Use HTML, JavaScript, and CSS Minification
By minifying HTML, JavaScript, and CSS resources, we can cut down on the quantity of data that the browser needs to download. Minification is the removal of extraneous characters from source code, such as whitespace and comments. These characters are incredibly beneficial during development, but they have no bearing on how the browser renders the page.
You can effortlessly minify your files with Autoptimize or WP Rocket.
Make Use of Domains That Don’t Have Any Cookies
In most cases, an HTTP cookie is unnecessary when delivering content like images, CSS, or JavaScript because it adds overhead. Once a cookie has been set for a domain, the cookie must be included in all future HTTP requests. This warning is frequently displayed on sites that receive a substantial number of requests.
You can usually disregard this warning because new protocols like HTTP/2 have rendered it obsolete. A new connection is generally more expensive than transmitting everything through the existing one.
A straightforward solution is to utilize a CDN provider that can disregard and strip cookies, effectively preventing the client from getting the Set-Cookie HTTP response header. This function is available from some CDN providers, including KeyCDN. By default, the cache cookies and strip cookies options are enabled. This is a quick resolution to migrating and modifying your website to distribute static files from a different subdomain.
If you use Cloudflare, you can’t deactivate cookies on resources provided by Cloudflare’s network. CloudFlare’s unique security cookie is included in your header. These cookies are pretty small, and their impact on performance is negligible. However, if you utilize Cloudflare, you won’t be able to avoid this warning.
Another option is re-configuring your WordPress site to serve static files from a different domain or subdomain.
Turn Off Embedding in WordPress
The oEmbed feature was brought into the basics when WordPress 4.4 was published. It enables users to quickly embed YouTube videos, tweets, and other content on their websites by simply putting a URL into the visual editor, which WordPress translates into an embed and displays in real-time. WordPress has now become an oEmbed provider because of the update.
This function is beneficial to many people, so you may wish to keep it switched on. However, this implies that your WordPress site will receive an extra HTTP request to retrieve the wp-embed.min.js file. This also applies to the entire site. And even though this file is tiny, details like this will pile up over time. Sometimes the request is more significant than the size of the downloaded content.
Turn Off WordPress Emojis
Emoji support was added to WordPress 4.2’s base for older browsers, the same as embeds. The main problem with this is that it makes an extra HTTP request to retrieve the wp-emoji-release.min.js file on your WordPress site. This also goes for the entire site. Although this file is small, it’s worthless if your website does not use emojis.
Accelerate or Disable WordPress Comments
A cluttered comments thread on a website can wreak havoc on its speed. Consider the resources required in loading the comment section:
- Existing comments are retrieved from a database.
- A visitor’s browser receives and processes comments and comment metadata.
- For every new comment, a database entry is generated.
- Requests, downloads, and loading of external resources, like Gravatars, are made (triggering a new DNS lookup).
- To ensure that the commenting mechanism functions correctly, substantial jQuery and JavaScript resources must be downloaded and processed across many instances.
Here are four things you can do to make WordPress comments load faster:
Disabling Comments
If your website isn’t generating lots of comments or you believe they’re not providing any value, you might want to turn them off completely. Keep in mind that comments can affect your SEO because Google treats them as additional content, so only accept those of high quality.
Native WordPress Comments Optimization
The core WordPress comment system can be optimized as an alternative. One option is to limit the number of comments that are loaded when the website first loads.
- In the WordPress admin dashboard, navigate to Settings, then Discussion. Other comment settings can be found here.
- Click the box beside “Break comments into pages with” and enter the number of comments you wish to see when the page loads for the first time.
You can also use your CDN to host Gravatars. Whenever WordPress comments are displayed, each Gravatar needs an HTTP request by default. So, if a page has fifty comments from fifty individual users, downloading all those Gravatars will need fifty HTTP requests. As you may expect, this will affect the speed of your page. It’s also worth noting that the external DNS lookup for gravatar.com has been known to lag and even timeout in some instances.
Make Use of a Third-Party Commenting System
Using a third-party commenting system is your third choice. If your website is hosted on a low-cost, resource-constrained shared server, adopting a third-party comment system can help pages with plenty of comments load faster. This is a similar idea to offloading image optimization. On the other hand, using a third-party comment system won’t help your site load quicker and may even slow it down if you’re already with a decent web host.
Always run a speed test on any third-party commenting system you’re considering using. Examine all the different requests it creates. Even though the bulk of these queries are loaded asynchronously, you may observe some extra loading time.
Lazy Load Comments
The fourth approach is lazy loading the comments so that rendering the first page will not be slowed down. Here are a few plugins worth looking into:
- Disqus Conditional Load: This is an essential plugin for lazy loading comments if you utilize the Disqus comment system.
- Lazy Load for Comments: This plugin enables the lazy loading of native WordPress comments.
Disabling RSS Feeds on WordPress
You can deactivate the WordPress RSS feeds if you aren’t utilizing the blogging component on your website. Even though this will have a minimal effect on performance, every little bit counts. It also means you have one less issue to be concerned about.
Using Prefetch and Preconnect
Prefetch and Preconnect are two resource hints and directives that can help WordPress run faster under the hood.
Prefetch
DNS prefetching enables you to resolve domain names prior to a link being clicked by a user, enhancing page performance. This can be accomplished by attaching a rel=”dns-prefetch” tag on the WordPress website’s header.
<link rel="dns-prefetch" href="//domain.com">
DNS prefetching is commonly used for CDN URLs, Google fonts, and Google Analytics, among other things.
<link rel="dns-prefetch" href="//cdn.domain.com/"> <link rel="dns-prefetch" href="//fonts.googleapis.com/"> <link rel="dns-prefetch" href="//www.google-analytics.com">
Most recent browsers also allow prefetching.
With something like the Perfmatters plugin, you can quickly set up DNS prefetching. Go to the Perfmatters plugin’s “Extras” section and add domains.
Preconnect
Preconnect enables the browser to establish early connections prior to making an HTTP request, reducing round trip latency and saving time for users.
It’s accomplished by placing a rel=” preconnect” tag in your WordPress website’s header.
<link rel="preconnect" href="//domain.com">
Google Fonts or your CDN URL are two examples of where you would want to use this for.
<link rel="preconnect" href="https://cdn.domain.com"> <link rel="preconnect" href="https://fonts.gstatic.com">
Apart from Opera Mini, Safari, and iOS Safari, most mainstream browsers support Preconnect. With something like the Perfmatters plugin, you can quickly use Preconnect for your page. Go to the Perfmatters plugin’s “Extras” section and add domains.
Turn Off Scripts for Individual Pages or Posts
Another practical approach in optimizing WordPress is to examine each request being processed on your pages and posts. You’ll almost certainly discover scripts that shouldn’t be loading across your entire site.
You can utilize a paid plugin like Perfmatters, which has a built-in “Script Manager.” With a simple click, you may deactivate scripts, like JavaScript and CSS for individual pages and posts, or even throughout your site.
You can use this on the following instances:
- Every page and post automatically launches the renowned Contact Form 7 plugin. You may turn it off everywhere with a single click and only activate it on the contact page.
- Plugins for social media sharing should only be used on your posts. It’s simple to turn it off altogether and load only on specific or custom post types.
- Each page and post includes a Table of Contents (TOC) plugin. You can effortlessly choose where it loads using the scripts manager.
Why Are Certain Plugins Developed in This Manner?
Why don’t all plugin developers load their scripts once the plugin is identified on the page? The reasoning behind this is a bit complex. If you have something like the Contact Form 7 plugin, you can use shortcodes to place it wherever. It’s also possible to use it in a widget. When dequeuing scripts in WordPress, requesting data from plugins is far more complicated than querying data from the post or page metadata.
As a result, usability problems are frequently to blame. The lower the risk of a plugin breaking, the fewer tickets and help they’ll need. And with so many plugins available on the market, there are techniques to get past this and work towards efficiency. However, the sheer volume of users and downloads sometimes make usability a top concern when coding.
How To Use the Script Manager
Now, let’s go over the Script Manager. After you click on it in your toolbar, you’ll see a list of all the scripts currently loading on that URL, including CSS and JavaScript files. After that, the following choices are available to you:
- Status On: The default configuration
- Status Off – Disable everywhere: You can then select which post types and URLs you want it to be enabled for
- Status Off – Disable current URL: This is an excellent option for your homepage
- Status Off – Exceptions: You can choose between current URL, post type, or archive
The name of the theme or plugin groups everything together. This makes disabling an entire plugin very simple. Both JavaScript and CSS files are usually included in a WordPress plugin. Moreover, it’s not uncommon for a WordPress theme to contain ten or more files.
Make sure to click “Save” at the bottom once you’ve selected or modified the settings. The scripts should no longer be loaded on the post or page, which you may check using a website speed tool. Before you start, keep in mind to clear your cache. If something goes wrong with the appearance of your site, it’s always possible to go to settings to re-enable it and get things back to normal.
In a speed test conducted by workup, they made pages load faster by 20.2%. They were able to minimize the number of HTTP queries on their homepage from 46 to 30. Their page size decreased as well, from 506.3 to 451.6 KB.
Examining the Performance of Third-Party Services
Anything you access from your site that isn’t internal has an impact on load times. Worse yet, few of them only lag on occasion, making it even harder to pinpoint the problem.
A third-party service is anything that interacts with your site from a server other than your own. These are some of the examples we encounter all the time:
- Conversion pixels or widgets from social media platforms like Facebook, Instagram, and Twitter
- Third-party advertising networks such as Google Adsense, BuySellAds, Media.net, and Amazon Associates
- Scripts for website tracking and analytics including Google Analytics, Hotjar, Crazy Egg, and AdRoll
- Tools for split-testing such as Optimizely, Unbounce, and VWO
- WordPress commenting systems including Disqus, Facebook comments, and Jetpack
- Tools for data protection and back-ups like Sucuri, VaultPress, and CodeGuard
- Tools for social sharing including SumoMe and HelloBar
- CDN networks like CDN77, Amazon CloudFront, StackPath, and KeyCDN,
- Javascript on a remote server
How much do third-party services influence site performance? They can increase page loading times by 86.08%, according to a study.
The results of Ghostery’s analysis of Alexa’s top 500 domains in the United States were remarkable, albeit not shocking to us. When scripts weren’t blocked, websites took twice as long to load. As such, third-party scripts are among the leading causes of delayed page load times.
Using third-party services on your WordPress site requires extreme caution. Your entire site could be timed out due to a single poor third-party API call! True, it shouldn’t happen like that, yet it does in many circumstances. As such, it’s critical to look into the external resources loaded by any new plugin or feature you add to your site. Less is more!
And there you have it on how to speed up your website with front-end optimization. At ShiftWeb, we offer various services, including web design and SEO. Contact us by sending a proposal of the exact service you need help with.