One the easiest overlooked aspects to a WordPress website is the optimization of its frontend assets. I cant count how many times I come across a great looking WordPress based site only to the find the page load times are horrendous. Not only is it bad practice to have a bloated website but its horrible for conversions and makes for a really bad user experience.
Studies have shown that 40% of users will click away from a website that takes longer than 3 seconds to load. Decreasing your WordPress websites page load times can drastically increase conversions and user click thru rates. Having a faster site can even help you rank better on search engines like Google.
Optimize Your WordPress Images
The most common aspect slowing down a website is usually its jpg images. Most people and developers take shortcuts and don’t optimize their images correctly which results in a pretty big page size and overhead, especially on first loads, even if the website is cached. A good practice is to use progressive encoding on your images and set the quality at a good compromise between speed and quality. If you use Photoshop you can progressively encode images right in the ‘Save for Web’ Interface.
Progressive image encoding basically allows a image to load in over time. What this means is that instead of the user seeing a blank placeholder or white box while the page loads, where the image should be; they will see a lower quality version of the image as the page loads. This results in a better user experience and progressively encoded images only add a small overhead to the overall file size of the image. Its really a no-brainer to use on your mainstay images like hero banners etc.
Another common huge issue is using the right image format. I wont go into much detail on image formats as thats a article in itself but I will say that the PNG format is not meant for large complex images. Save png images for simple small images, image sprites or images that require a transparent background. When you do need to use a png image be sure to run the png thru a compression api/service. I personally like to use Tinypng. Its simple, fast and anyone can use it. It simply works.
Running your png images thru compression like Tinypng and ensuring your jpg images are progressively encoded and optimized can result in huge decreases in load times.
Theres plenty of commercial WordPress modules like SmushIT that provide image optimization directly on WordPress. Having unoptimized images that are killing your site is really unnecessary and a sign of low quality craftsmanship.
Reduce WordPress HTTP Request
The next big WordPress killer is excessive http request. Http request are how many assets are requested and fetched from your web server to render your website. The higher the request count, the more assets needed to load your website and the longer the end user has to wait for everything to load.
A large factor to http request is using badly coded commercial WordPress themes out of the box and not attempting to optimize the themes. Here’s a local website example by a web development agency in Greenville South Carolina.
Combine WordPress Request
The easiest way to achieve this on WordPress is to use a extension or module that automatically merges these assets for you and has the ability defer scripts to your footer. Popular caching extensions like WP Rocket, W3 Total Cache, FastestCache have the ability to do this in a few clicks. These modules also come with the ability to merge CSS style sheet assets which can further reduce your http request.
Next on the list would be to combine static images into sprites to reduce the image overhead. Basically a image sprite combines multiple images into one and uses CSS to position the image where it looks like a single image. There’s no simple way to do this on WordPress but there are tools available that make it somewhat streamlined and straight forward.
A popular website responsive css sprites comes to mind as well as the SpritePad. Images like icons, background images and basically images that you dont plan on changing often are great candidates for image sprites.
Minify WordPress Assets
Enable Gzip Compression
Another no brainer on any WordPress website is to utilize Gzip compression. Gzip compression is a server side tech that basically smashes the bytes sent to your web browser which results in smaller overall file sizes. Which results in faster load times.
To enable WordPress Gzip compression you can either use one of the caching and speed optimization plugins mentioned above or you can add gzip directly to your htaccess file via Google.
One of my last tips to optimize your WordPress website is by using some form of page caching. WordPress caching modules will cache your web pages, post & images as static files. These files are then served to your end users which reduces the load on your webserver and can drastically improve page load times for repeat visitors.
Page Speed Testing Tools
Pingdom page speed is great and simple to use. A perk of this site is the ability to choose the testing server location and the simple easy to read interface. GTmetrix is the next on the list and it gives you the ability to compare multiple sites which is great if you want to size up the competition. Google Pagespeed Insights is great in the sense that it takes mobile into account and offers optimized assets as a zip file down load (use the assets at your own risk, the image optimizations are usually pretty good).
Not all Web Designers stack up
This post is meant to be just a basic guide to optimizing your WordPress website. There’s a lot more detail that goes into making a truly well optimized website. Be wary of agencies and web developers who ignore basic front end optimization techniques. These optimizations are basic front end development techniques and the only reason to not implement them is due to sheer laziness or incompetence.
A lot of agencies sub contract out their development work to 3rd world Indian based firms that work for pennies on dollar. When it comes to web development. You get what you pay for. A lot of agencies don’t even use these basic front end techniques on their own websites. If these agencies care so little about their own websites what makes you think they will care about yours? Case in point.
I ran a few local Greenville South Carolina AAgency websites thru GTmetrix and compared them to my own site Clemson Web Design.
All of these Greenville web design agencies offer “Quality WordPress Websites”. Not to my surprise. This is the result from GTmetrix.
Now – Which one of these web developers would you trust with your website?
I’m not saying anything bad about these businesses. I’m sure they are absolutely outstanding people. I’m simply pointing out the GTMetrix Results. Website optimization and speed has a direct impact on SEO and organic traffic. Every single website I build is optimized. You’ll never see a D grade on your Google Pagespeed query result!
If you are plagued by a slow website give me a call or email me. I do all of my work right here in the Upstate, Clemson South Carolina. I’m also proud to say that all of my websites are Made in America! I’ll be glad to assist you in getting your WordPress website working correctly and up to speed!