Picture this: You’ve crafted an incredible WordPress website complete with engaging content and a design that could win awards. But there’s a catch – your site takes ages to load, and your audience’s enthusiasm wanes with each passing second. The load speed of a website is not just a number; it’s the gateway to transforming visitors into loyal customers and brand ambassadors. When your site is a speedster, it lays out a red carpet for everyone to dive into what you offer. Even Google rewards such sprightly sites with higher rankings, thanks to its consideration of page loading speed and server response time in its algorithm.
However, sluggish server response times could spell doom. Don’t test the patience of your website visitors: they’ll just leave the site. Websites need to load fast to keep the audience riveted.
Let’s explore how to achieve some WordPress performance improvements to ensure your website is as swift while keeping any of the pizazz delivered by Javascript and CSS, keeping your audience captivated and Google happy. Let’s supercharge your WordPress website!
KASD (Keep A Simple Dom)
Similar to the KISS rule, the complexity of your HTML can make or break your performance. While HTML is usually the smallest part of your page payload, it’s the conductor: it’s orchestrates what happens on the page. All of those instructions have to be weighed in and reconciled. If they are too complicated, that distills into a performance loss. This is especially important for designers who chase the mobile experience. It’s easy for designers to repeat an element for the sake of the mobile experience. That adds more complexity and leans of the web browser to show and hide elements based on the screen size or device. Instead, try to have one element that is always present with its look affected by CSS. Also, don’t be afraid to second guess the HTML output by WordPress page builders. They sometimes build cumbersome HTML that gives web browsers a heart attack.
Image Optimization
Images can sometimes be unnecessarily large. For instance, an icon measuring 72×72 pixels might actually be utilizing a 1400×800 pixel image. There could be a possibility of a plugin malfunction which requests an image that is too large for optimal performance. A GTMetrix report is handy in such situations as it not only identifies the images in need of optimization but also generates the optimized versions for you. Replacing the problem images with these optimized ones can improve performance.
Understanding Image Formats. It’s crucial to discern between the different image formats like GIFs (pronounced with a hard or soft ‘G’– let’s not fight over this), JPEGs, PNGs, SVGs, and bitmaps. Each format has its own set of attributes, so choose the one that best suits the intended purpose within your presentation.
JavaScript Placement
Header Placement – Use With Caution. Placing JavaScript code in the header makes it execute before the rest of the content. However, this could also mean that the content display is paused until the JavaScript is fully executed, which is known as “render blocking.” For the end user, this is not desirable as they might end up staring at a blank screen for an extended period.
Consider Footer Placement. Certain codes can be placed in the footer without any issues, such as analytics code, auxiliary code, or code pertaining to the lower sections of the web page (like a dynamic footer).
Client-Side Caching
Enable Content Caching. WordPress often appends query strings to URLs and modifies these strings with each load to ensure that images, scripts, or styles are loaded afresh. While this guarantees that the content is up-to-date, it can be time-consuming from an end user’s perspective.
Modify Expiry Dates. By altering the expiry date, which is a metadata setting in the served assets, you can extend it to days or even months into the future. This allows the web browser to save some of the content on the user’s computer, which means it won’t have to re-download these elements each time the page is loaded. This takes advantage of browser caching, thus improving the loading speed for returning visitors.
Handling Third-Party Assets in WordPress
Third-party assets, though convenient, can adversely affect performance. It’s tempting to effortlessly integrate snippets from Instagram, Facebook, Google, Click-to-chat, or CRM tools into your WordPress site, but these can significantly slow it down.
Gain Control Over External Assets. Whenever possible, try to host assets on your own site or CDN. For instance, download Google fonts and serve them from your WordPress site or your CDN.
Serve Content via Server-Side Generated HTML. Instead of relying on Javascript to deliver or construct content, use server-side generated HTML, which is generally faster.
Choose Wisely. Carefully decide on the third-party assets you want to include on specific pages. If performance is paramount, be discerning when it comes to incorporating third-party applications.
GZIP Compression
Minimizing file downloads is essential for speed. If a file is smaller, it takes less time to move it. Optimizing the number of files requested and reducing their size is key. In WordPress, each plugin and theme you use is likely to add multiple CSS and JS files, which can quickly accumulate to over 20 CSS and 20 JavaScript file requests.
Use Plugins for consolidation. GZip Compression. Most web servers can serve files compressed with GZip, and almost all web browsers can decode them. Make sure this is enabled for your WordPress site for faster loading. WordPress plugins like WP Fastest Cache can combine CSS into fewer files and perform the same task for JavaScript.
Server Caching in WordPress
Cache Static Content. Store static versions of complex outputs, such as leaderboards, lists of recent posts, or stats, so that they don’t have to be regenerated every time.
Optimize Before Shipping. Ensure that code is optimized on the server-side before it is sent to the client.
Use Caching Plugins. Employ plugins like W3 Total Cache or WP Super Cache to enhance the caching capabilities of your WordPress site.
Tune Keep-Alive Settings. Some browsers may repeatedly establish a connection to your server for each file request. By adjusting the server’s Keep-Alive settings, this connection can be maintained, saving time.
Use Content Delivery Networks (CDNs) with WordPress. Integrating a CDN can alleviate the load on your server and provide faster content delivery by serving data from a location closer to the end user. In WordPress, this can be easily achieved by using plugins that facilitate CDN integration, such as WP Rocket.
Flush Your Content
Hang time is a killer when you’re waiting for a web page. This can be a side effect of the foundations of a website– PHP: the driver for WordPress and so many other website applications. By default, PHP can wait a long time before delivery of content back to the end user. It is possible to push it to begin earlier than otherwise. That sends content back to your audience faster. I do this by putting the flush() call at the top of the page.tpl.php file. If you’re about to output the themed data, you’re ready to deliver content, so I say push it out as soon as you can, even starting the process before the page.tpl.php is populated and served. One thing to note: flushing content may not be a tactic that plays well with GZip, so experiment.
Consolidate CSS and JavaScript Files
It’s highly beneficial to merge all your JavaScript files into a single file and do the same for CSS. Although content management systems like Drupal may inherently involve numerous supporting files, they often have the feature to aggregate JavaScript and CSS files. This consolidation can dramatically reduce the number of files from over 30 to just two or four. When using Wordress, add in a plugin like WP Fastest Cache to aggregate supporting files. While CSS can be aggregated with little jeopardy, aggregating JavaScript can lead to problems, so experiment before your deploy a change like that.
Build and Use CSS Sprites
CSS sprites allow you to use sections of a larger image to fulfill various graphical requirements on your web page. The concept of sprites is not new and has been used in video games for decades. However, its application in web design is relatively recent.
By combining multiple elements into one image and utilizing CSS to extract the necessary sections, you can decrease the number of file downloads, which is crucial for performance. To effectively use CSS sprites, it’s essential to understand the intended use of the image and be adept in handling CSS backgrounds. This involves mastering techniques such as cropping and controlling image repetition.
In WordPress, CSS sprites can be integrated into themes and plugins to enhance the loading speed and optimize graphical elements on your website.
Need help?
Part of what we do at Web321 is a set of performance improvements (aka a WordPress speed service). Do you want to talk about what we can do to improve your site speed?