50+ Ways to Speed up WordPress

Home » WordPress Blog » 50+ Ways to Speed up WordPress
How To Speed Up WordPress

Website speed and performance is incredibly important in this day and age with heavy use of mobile phones on slow connections and peoples attention spans only able to last a couple of seconds. It is now more important than ever to have a fast loading website and to speed up WordPress. Even Google has said time and again that you need a fast loading website if you want to rank well in their search engine.

Nearly half of the internet expects your site to load in 2 seconds or less. If you want your WordPress website to generate more sales, leads & conversions, having your site load quickly is absolutely critical.

This guide is your number one aid to help speed up your WordPress website. It demonstrates 50+ actionable ways to make your WordPress site load faster and tips on how to optimize your WordPress themes design for speed. It also details how to write better performing code and much, much more…

Speed up WordPress Video Tutorials
If you would prefer to watch the steps on how to optimize and speed up your WordPress website then this is the playlist for you.

This guide is broken into 3 sections.
Hosting Media Code & Technical
Some of the tips in this guide are more suited for WordPress designers and developers. If that is not you then you will want to pass those tips to your WordPress designer or developer to keep them accountable and help you make your site faster.

Why should you speed up WordPress?

If you own a WordPress website that takes longer than two seconds to load, you must follow this guide. Your website will rank better in search engines, your site will be easier to navigate and people will stay on your site longer.

If your time is limited then we recommend you focus your efforts on the lowest hanging fruit first. Most typical websites draw 80% of the total website traffic from only 20% of all the pages in the website. For example, a conventional website would draw around 80% of the website’s total traffic from the home pages and services/product or contact page.

If you do not have enough time to optimize all the pages in your website, then you should focus the pages that draw 80% of your traffic. If you are unsure what these pages are, check Behavior Flow from within your Google Analytics account.

Let’s start optimizing!

Hosting Performance Optimizations

Good WordPress hosting is so important if you want a fast loading and reliable website. There are hundreds of reputable WordPress hosting providers.

Good WordPress hosting is like the foundations of your house. You need to lay good foundations otherwise your house may fall over or collapse. If you have good WordPress hosting from a provider like WP Engine then a lot of the hard work of having a well optimized website will be done for you.

If you have good website hosting then it is just a matter of checking over this section to ensure your hosting is actually up to scratch. If you find your hosting is all good then the next two sections will be of more use to you and good job for laying the right foundations.

If you do not have good hosting then I recommend you choose the right hosting yourself or simply start using WP Engine.

Lets see how optimized your WordPress hosting is.

1. Invest in fast hosting
Having your WordPress website built on top of a proper WordPress web host is like building a house on top of a strong foundation. If you have your WordPress website built on top of free or a cheap, flimsy shared hosting service, your website will suffer. It will suffer not just from performance problems, but from security and scale-ability issues as well.

The best way to avoid these problems is to invest in a quality dedicated WordPress web host like WP Engine.

WP Engine WordPress Hosting
WP Engine is our preferred Managed WordPress Hosting Provider.

Investing in proper WordPress hosting can save you time and money in the long term too. For example, WP Engine hosting automatically deploys WordPress websites onto MaxCDN and caches it at the same time.
This way you don’t have to worry about purchasing or wasting time setting up these technical aspects. They just work for you.

Action
Item
Get your WordPress site on a dedicated WP host. Check out WP Engine. We use WP Engine for all our agency websites and couldn’t recommend them more.

2. Deploy your WordPress site on a content delivery network (CDN)
If you don’t plan on using a managed website host like WP Engine then you will want to at least make use of a content delivery network. One of the easiest ways to speed up your website’s load times is to use a content delivery network or CDN.

A content delivery network stores the static files that make up your website (in most cases styles, images and website scripts) in a server located in major cities around the world.

This means that when a site visitor from say, New York, accesses your Australian hosted website, the static files are served from the New York CDN server rather then having to travel all the way from Australia. Although this travel time is in the milliseconds, it can add up when you have a content heavy site with lots of visitors.

Maxcdn
MaxCDN is our preferred content delivery Network provider.

Check out MaxCDN to see why having a CDN is good for your website performance. If you are using WP Engine or similar managed WordPress hosting then they will automatically provide MaxCDN for you at no extra cost.

Action
Item
Deploy your WordPress site on a CDN. Check out MaxCDN and supercharge you website loading speeds.

3. Choose website hosting close to your target audience
Deploying your website on a CDN is a great way to decrease the load times, especially if your website draws in traffic from all over the world. However, CDNs will only store & serve your website’s static file types. They will not store & serve your website’s dynamic file types like PHP and MySQL database.

What your aim here is to choose a datacenter or hosting provider that gives the lowest latency to your customers. This basically means you are trying to reduce the delay it takes to transfer your websites data from one location to another by reducing the distance.

If most of your website users are coming from a single geographic region, then choose a data center as close as possible to that region. For example, if WP Absolute was a local business where its main source of traffic and customers came from Australia, we would try and get a hosting server in Australia.

Having the server in the same region as your customers reduces the amount of distance that your website files need to travel compared to if they were being hosting on the other side of the world.

Server Location Map
It is important to host where your users are.

All good hosting companies will have multiple server locations. WP Engine has several hosting servers across America, Europe, Asia and Australia so it makes choosing a server close to your customers a lot easier.

Action
Item
Host your site on a server that is close to where the majority of your site viewers are geographically located. If the server is not in the same location consider finding an alternative closer.

4. Install a caching plugin
One of the quickest and easiest ways to speed up your WordPress website is to install a caching plugin. There are dozens available on the WordPress plugin directory and the best ones have millions of installs.

Caching is what helps remove the need for the server to generate the same content from the database each time it requests it. Instead, it grabs the generated page and stores a static copy of it as a file on the server. When a user accesses your website, it sends the user this cached version instead.

This can significantly improve your website’s load time because it does not need to do the several requests back and forth to the database to generate the page.

Some caching plugins will also help you do much more than just cache your website to decrease load times. They may also help you connect your server to a CDN as well as compressing the files that make up your website too.

Cache Banners
W3 Total Cache and WP Super Cache are our recommended caching plugins.

The two top caching plugins we recommend to install are W3 Total Cache or WP Super Cache. WP Total cache is a lot more feature rich allowing for macro setting changes whereas WP Super Cache is made to be simpler and more of a set-and-forget solution. It is best to review the plugins documentation and read our tutorial to help you get the most out of optimizing your setup.

Note: If you are hosting your website on a managed WordPress provider like WP Engine, they have their own optimized caching plugin and you do not need to add another as they do it properly for you already.

If you are using WP Engine or other managed hosting provider that does not allow these caching plugins or you simply want to get even more out of your caching then we highly recommend WP Rocket. WP Rocket is a caching plugin but also helps to compress your static files among other speed improvement features too.

Action
Item
Install either W3 Total Cache or WP Super Cache to your WordPress site to reduce load times & boost performance.

5. Measure speed and performance with proper tools
Before you begin optimizing your websites speed and performance, you should run your website through speed profiling tools to create a benchmark on the areas where you should improve. Your first step to decreasing your website’s load times is to get a snapshot on how long it takes your website to load.

These collection of tools will give you a good understanding of the technical aspects slowing your website down.

Pingdom Website Speed Test
Use Pingdom Speed test to see how your website ranks.

Use Pingdom Website Speed Test
Pingdom’s Website Speed Test is an industry leading tool for quick analysis on your website’s performance and allows you to discover the bottlenecks slowing your site down.

When testing with Pingdom, it may return erratic results so it is best to run your website through the speed test a couple of times to get an average test score. Also, makes sure that you set the server settings to be as close to your server’s location as possible. i.e if your website is hosted in Australia, you would choose Melbourne, Australia as that is the closest location.

The speed test tool will give your website speed performance grade between 0 and 100 giving you a benchmark to work towards improving. It will show you in seconds how quick it took your website to load and how fast your website compares against other websites in your region.

Web Page Test
Web Page test will give you a more technical analysis.

Use WebPageTest
WebPagetest is a bit more of a technical tool that will provides a number of insights to help you see where you can improve your website speed. If you are savvy with web development, then WebPage Test can give you a technical detailed breakdown of your website’s performance.

It will display the graphs and waterfalls of how your website loaded and will give you an optimization checklist.

WebPageTest allows you to test from a large range of geographic locations. It also allows you to test from specific browser types to gauge performance. That way you can simulate how your website will load on a mobile device for example.

The information that it provides can be overwhelming to someone that isn’t web savvy, so best use this tool if you are comfortable with understanding the technical jargon.

gtmetrix
GTMetrix is another great tool to profile your website speed.

Use GTmetrix
GTmetrix is a simple tool that aggregates a number of insights to provide valuable information on how to improve your websites speed. This tool will help you see exactly which areas of your website can be fixed to improve load times.

There are many different online tools that can help you with this. We prefer GTMetrix’s tool because it gets information from PageSpeed, YSlow and your website and then provides actionable recommendations on how to optimize it.

Once you have run a scan, you’ll have a ranked list of suggestions on how to make your website load faster. It also provides two performance scores to help you benchmark your speed improvement efforts.

You will want to prioritize fixing the lowest graded suggestions to gain the biggest performance benefits. Work your way through the list until your have reached your load time goals. Follow along on the rest of this guide to improve all areas.

Action
Item
  1. Use Pingdom’s speed test tool to get a quick overview of your site’s performance.
  2. Use WebPageTest for a detailed overview of your site’s performance.
  3. Use GTmetrix to see which areas of your website can be better optimized for faster load times and performance.

6. Reduce HTTP Requests
In general, the more content and media your website has on it, the more times it will need to go between your web browser and the hosting server to retrieve the content and to render your website. The more times this happens, the longer it will take to load your entire website.

Browser Waterfall
You can see your HTTP requests by viewing the network tab in your browsers developer tools.

Each JavaScript, image, video and CSS file typically requires one HTTP request to download into your web browser for your website to display. Modern browsers will be able to group similar media types and retrieve multiple files at once. It usually takes several trips backward and forward to get all of the contents to make up your website.

The goal is to combine, compress or if possible remove these HTTP requests so that load times are decreased. More specific techniques to achieve this will appear later in this guide.

The first step is to find out how many HTTP requests your website is making and how long they are taking to load. You can use either the timelines/network tab in your browsers developer tools or simply use the results from one of the tools mentioned in the previous step.

The diagram that shows how all your media is loaded is called a waterfall. A web pages waterfall will show you all the HTTP requests your website is making and how long they each take to download.

Note: There are newer technologies such as HTTP2 that tries to fix the shortcomings of HTTP requests. For example HTTP2 can retrieve multiple non-combined CSS files faster than one big combined CSS file.
This technology is relatively new though so chances are your server wont have this feature as it needs to be added by a hosting server administrator – not by WordPress. You can check if your website is using HTTP2 by running a test.
Action
Item
Use Timelines /Network panel in your browsers development tools or by using one of the tools mentioned in the previous step to see how many HTTP requests your site is making. Check to see if you can combine, compress or remove any requests.

7. Install a minify plugin
The quickest way to reduce your WordPress website’s HTTP requests as well as how big the files are that you are downloading is to install a minifying plugin in WordPress. We recommend either Autoptimize or BWP Minify to get the job done.

Autoptimize
Autoptimize is the plugin we use on WP Absolute to minify our assets.

Minifying plugins combine and compress your website’s JavaScript, CSS and cached static content files. Compressing and combining static content will reduce the amount of HTTP requests and decreases page load times.

A word of warning when using minifying plugins, you need to test your website once you have applied any minification as it can sometimes break the layout of your website when files get over-optimized.

The best way to ensure you do not break anything is to apply these tests on a development/testing server away from your live site. Once you have tested and can ensure there are no issues then you can apply the minification to your live site.

Action
Item
Use a minifying plugin like Autoptimize or BWP Minify to reduce HTTP requests and compress your JavaScript & CSS files.

8. Clean your Database
Over time, your WordPress website picks up and holds on to a lot of unnecessary junk. Spam comments, trashed posts, spam trackbacks and pingbacks all add weight to your WordPress website’s database.

WP-Optimize Plugin
We use WP-Optimize to periodically clean up our database.

WP-Optimize solves this problem by cleaning up your website’s database to remove any unnecessary junk. Think of it like changing the oil in your car.

WP-Optimize keeps your website running at its peak performance in the background so you don’t have to worry about it.

Action
Item
Periodically remove the performance-sapping junk that builds up in your site’s WP database. Use WP-Optimize.

Compress and Control your Media

You will often find that although there are lots of performance optimization and techniques, the biggest improvements that you can make is by compressing your media, specifically you image files. In a typical web page, images are what make up the largest part of your websites size.

You will find media-rich websites are in the most need of the following image compression techniques but these steps should be applied to any website with images on it. There are a number of techniques you can use to compress, reduce and combine your websites media. The following section covers the best techniques.

9. Compress JPG Images
There are a number of tools available to compress JPG images. Our preferred method is to use Adobe’s Photoshop save for web feature and then further compressing in another tool called ImageOptim.

Save For Web
Adjust the quality settings to compress jpg images in Photoshop.

When saving an image for web in Photoshop, you should always apply the 70/30 image compression rule to JPG or JPEG images. Open your image and choose the save for web option. In the dialog window, slide the image quality slider to 30%.

Look closely and if you do not see any noticeable picture quality loss or pixelation from the file, save it. If you do see noticeable loss in image quality at 30%, then incrementally increase the quality up to a maximum of 70% until there is no noticeable quality loss.

Most images do not noticeably degrade at or above 70% quality. The goal is to strike a balance between small file size and quality image by decreasing the images quality.

Note: If you do not have Adobe Photoshop then you can use either tinyJPG or Compressor. If you would prefer a set and forget method then you can use a WordPress plugin called Smush though if you want to ensure the highest quality and compression then nothing beats manual compression methods.
Tip:
  1. If your image has a low varying amount of colors then it might be better to use the PNG file format instead. PNG images can compress smaller than JPG if they are the right type of image.
  2. If you are a Mac computer user, you can compress JPG (and GIF) images in ImageOptim too. See step 9 for more information.
  3. You should also incorporate Step 13 (Properly size images) into this step as it is best to avoid editing JPG images multiple times to retain maximum quality in the image.
Action
Item
Try saving your website JPGs or JPEGs at 30% quality to reduce file size. If the image quality is bad, incrementally increase quality up to 70%.

10. Compress PNG Images
Since you cannot change the quality level of normal PNG files like you can JPG, the 70/30 image compression rule does not apply. This doesn’t mean you cannot reduce the file size of PNGs though. There are a handful of great free tools like ImageAlpha and ImageOptim that can do just that.

If you are a PC user, then PNGGauntlet removes unneeded image data from your .PNG files. Place all your website’s PNGs into PNGGauntlet, run the program, and replace the old PNGs with the optimized PNGs to decrease page load times.

Image Alpha Compression
Use ImageAlpha to compress PNG images.

If you are on Mac user, then ImageAlpha and ImageOptim are the apps you need to compress image files for web. ImageAlpha should be used before ImageOptim.

ImageAlpha converts the PNG file from a lossless PNG-24 format to the lossy PNG-8 format. PNG-8 formatted images allow you to control the amount of color values used in the image. The smaller amount of color values, the smaller file size the PNG file will be.

Though you have to be careful.

Having too few color values in some images can result in your PNG images losing detail resulting in an unpleasing image. So, it is best to compress your PNGs image colors with care and attention to quality. Image alpha controls the amount of colors in the image so it is a matter of sliding the color slider until you get the quality you are after.

Finally, you can change the compression format between Median Cut, Posterizer & Dithered. Each compression format suits various types of images and will allow you to get a better quality image if compressed correctly. You can test to see which settings reduces the file size the most without noticeable quality loss.

ImageOptim Compression
Use ImageOptim to squeeze out even more file size savings of all your image formats.

Once you have compressed the image in ImageAlpha, you will want to further decrease the filesize of the image using ImageOptim. ImageOptim functions exactly the same as PNGGauntlet, but for Mac users. Just like PNGGauntlet, ImageOptim is a free and open source app by the same developer that removes unneeded image data from your website’s PNGs. This reduces file size, helping your website’s pages to load faster.

There is a tick box in ImageAlpha that lets you open images straight away into ImageOptim when saving to save time.

TIP: Open up ImageOptim’s Preferences and enable all of the compression algorithms as well as adjust the quality sliders to your liking. You will be able to compress good quality images very highly if you enable Guetzli Compression at the expense of it taking a much longer time to compress. It is well worth it if you want the smallest file size.

TIP: Avoid using PNG files for images with a lot of detail such as a photograph. Those types of images are better served as a JPG.

Action
Item
  1. If you are a PC user, use PNGGauntlet to reduce the file size of your site’s PNGs without sacrificing image quality.
  2. If you are a Mac user, use ImageAlpha and then ImageOptim to reduce the file size of your website’s PNGs to compress the file size of your website’s PNGs.

11. Compress SVG Images
SVG (or Scalable Vector Graphics) images are great for web because they are relatively small in file size and can be infinitely resized without losing quality. Although SVG’s have been around for almost two decades, support across all major browsers are still relatively new compared to jpg or png support.

SVG images are made using XML markup. This means that they can be edited in a text editor as well as drawing software. It also means that it can be compressed.

The trick to compressing SVG images for the web is to reduce the complexity of the image and only have the parts that are needed to display the image. If you open an SVG image in Adobe Illustrator or similar software, you will be able to see all of the points and curves that make up that image. By reducing the amount of points and curves in the SVG, the smaller the SVG file will be.

SVG images often carry more information than is necessary to display the image on the web. The second aim is to remove the parts that do not need be in the file to display the image. You can open up the SVG image in your text editor and see the markup that makes up the image.

When you make a change to the file, make sure you review your changes before closing the file so you can undo any changes you make if needed. You can review your changes by opening the image in your web browser to ensure you didn’t break anything.

Once you have reduced the amount of points manually, you can run the SVG file through a number of other modifications by using the open source tool called SVGOMG. Toggle each of the optimization options until you have the highest compression without sacrificing the display of the image. Once you are done, click the download button to save your new compressed SVG image.

Action
Item
Reduce the amount of points/curves/information in the SVG file to reduce file size. Run your SVG through SVGOMG to compress it.

12. Create CSS Image Sprites
CSS image sprites are created to help reduce the number of individual HTTP image download requests your website needs to make.

A CSS image sprite reduces HTTP requests by combining many images into a single image file. The images are then used as background images in your websites stylesheet. You display certain parts of the image on your website using CSS positioning elements which allows you to hide the other non essential parts.

Although they are not as common as they used to be because of the higher use of SVG images, icon fonts and the fact that creating them requires a lot of time and technical skill. Something of which can be a negative effect for a fast evolving website. CSS image sprites are still a very good way to save on those HTTP requests if your website uses images in styling and user interface design.

Slider controls or website user-interface controls are common candidates for CSS sprites. You will find very large websites that rely heavily on speed for the success of their business will use CSS image sprites.

To create your own CSS Sprite, you can use the online tool Sprite Cow. The tool will generate the CSS image Sprite positioning code for you. Its then just a matter of integrating that code into your websites theme.

Action
Item
Consider combining your user interface images into CSS Sprites to reduce page load times. Use Sprite Cow to generate CSS Sprites.

13. Properly Size Images
A simple and easy way to reduce page load time is to make sure that all your website’s images are not larger in dimensions then they need to be.

The smaller the physical size of the image, the smaller the images file size will be.

When you take a photo on a camera, the image will likely be much larger than the size of the area you need the image to sit in on your website. You do not want to be serving a huge megapixel image if you are only using the image as a tiny thumbnail.

You can see exactly how big the area on your site in pixels it is by using your browsers developer tools. Inside your browser right click on the area you want to identify the dimensions for and select Inspect. You will be able to hover over the area in the developer tools area to see its width and height.

If the image is much larger than where it is on the page then you can use the Media Editor inside WordPress to resize the image.

Better yet, you can use Photoshop to save for web just like in step 9.

This way, only the actual size of the image displays on your website, saving file size and reducing page load time. WordPress has gotten a lot better at handling large image sizes upon upload so chances are your websites images are already sized efficiently. But it cant hurt to have pixel perfection!

TIP: You should also incorporate step 9 and step 10 into this step. It is especially important for lossy images like JPG as the more you edit them, the more information/quality is lost in the image.

Note: Make sure you consider the size of the image for retina displays. A good rule of thumb is to find the size requirement of the image and then double it so that the image will account for high density displays that have twice as many pixels. WordPress handles the output of the sizing in images automatically for you.
Action
Item
Avoid having images that are larger in dimensions than they need to be on your website. If they are, resize in WordPress or Photoshop.
[latest_deal length=”full”]

14. Specify image dimensions for images
A method to increase rendering time when your page loads is to specify correct image dimensions on all of your images. By doing so, your browser does not need to download the image before it creates the correct space for your image on the page. It can just read the length and width that was set on the image and continue laying out the other parts of your page.

Fortunately WordPress will automatically add a width and height attribute to all images that you insert via the editor. If there are other images around your site that you have manually added for example in the sidebar or footer, you should make sure your images are correctly sized with the right length and width image dimensions.

Setting custom image widths in WordPress
Another thing you should make sure to utilize is WordPress’s custom image sizes. This method is useful for situations where you cannot control the media sizing that is uploading to the website.

WordPress will resize the image to the specified size before the user downloads the image. This reduces page load times.

As an example, if you have a custom post type with a featured image size of 400px by 250px, you can specify these dimensions in your themes functions.php file. Then where the featured image is being output, make sure you are using the custom image size you created. This way, WordPress will handle the image resizing for you and you do not need to utilize a larger image size just so that it fits the area in your theme that you specified.

The WordPress Codex outlines which image types you can specify certain dimensions for. It also outlines a variety of different hooks you can use in your functions.php file to increase performance.

Action
Item
Make sure that all images loaded onto your page has appropriate image sizes set to increase page layout speed.
You can specify image dimensions in your functions.php to stop larger than necessary images from slowing down your site.

15. Use SRCSET to serve properly sized and retina images
Having crisp high quality images on your site is always a must to ensure a positive user experience. With a lot of modern computing devices now including a retina or high-density pixel display, you will want to make sure you maximize the experience for these users.

Until recently, there has been no universal solution for serving high-density pixel per inch (HDPI) or retina-ready images from your website. This has changed with the recent introduction of the SRCSET element which allows you to handle HDPI images natively from the browser.

SRCSET is not only for retina images though. It is perfect for displaying a certain size image depending on the size of the browser.

For example if you have a page that is about 1000px wide on desktop then the image would be much bigger than what is required on 400px wide mobile. It allows you to only download the image size that is required to fit the space.

When we first wrote this guide, only a select number of browsers used the SRCSET attribute. Now all modern browsers use it and even WordPress automatically adds this information into your image markup for you. It will only do this if the image has been inserted from the editor or image widget though.

The first implementations of this used either CSS or JavaScript techniques to achieve the same result. Since SRCSET does not need additional CSS or JavaScript to work, your website makes less HTTP requests. This helps to speed up your website’s load times.

Opera’s developer documentation explains how to integrate the SRCSET element into your WordPress website.

If you have created an image manually outside of the editor, make sure you are using the SRCSET attribute in your image markup to make sure the appropriate sized image is being displayed.

Action
Item
Use the SRCSET image attribute to serve the appropriately sized images for your website.

16. Create perfectly sized favorite icons
This is not necessarily going to make your website load quicker but it is still important to have ALL your images compressed and sized correctly. It will make downloading your favicon that bit faster though.

When creating favicons and touch icons, you want to make sure they are correctly sized to avoid large image files.

Icon Slate is an excellent affordable app that allows you to create a set of web-ready favicons and touch icons in one click. The app ensures that the icon size is correct so that your icons are not larger than they need to be.
Icon Slate also saves you time with it’s one-click create all feature.

Since WordPress version 4.3, they have implemented a site icon feature that makes the need to create a favicon.ico file much less important. Now you only need to have an image that is 512px in dimensions. WordPress will take care of the rest. Make sure the image is compressed using the methods above.

Action
Item
Icon Slate makes it easy to create perfectly sized favicons & touch icons in one click. Its now easier to use the WordPress site icon feature.

17. Utilize CSS for design over images
CSS3 allows web designers to take advantage of many design elements that used to be only achievable using image files.

The most common of these are gradients, patterns and shadows. If you are using these design elements in your website, then you should aim to achieve the design using CSS3 rather than images.

This is because design elements created using CSS3 do not need to download an extra image file, which means it will decrease page load times.

There are many online tools, like CSS3 Generator, that can help you create your own gradients and shadows easily. Follow the prompts to generate your own CSS3 elements by completing all of the requested fields.

Action
Item
Use CSS3 over images for gradients, patterns and shadows on your website to reduce load times.

18. Use patterns and repeat instead of one large image
A trick to consider that can decrease page load times is recreating simple background image patterns to Base64 code strings and embedding it into your CSS. The Patternify website tool can convert image patterns to Base64 code. You can include the Base64 code into your website’s stylesheet.

The reason why you would do this is because Base64 code string is compatible with CSS allowing you to remove the additional image download. This allows the browser to process and render the pattern while the CSS file is being downloaded compared to downloading an additional image file.

Be aware that recreating images as Base64 code string is only recommended for basic patterns and images. More complex images can result in a very long code string. This would add a lot of weight to your stylesheet and slow your website down.

Note: This technique is not recommended for websites that are using the new HTTP/2 protocol.
Action
Item
Use patternify.com to convert your basic image patterns to Base64 code to help to decrease page rendering time.

19. Use Icon Fonts for basic images
If you are using image icons for user-interface elements across your website, then you should consider replacing them with font icons.

The advantage is your browser only needs to download a single font file as opposed to many image files. By making less HTTP requests, your website will load faster. The font file can be much smaller than multiple images.

IcoMoon is an excellent app that collects the best font icons from around the world into a single resource.

One of the most versatile and flexible icon fonts is FontAwesome by Dave Gandy. You can download and integrate FontAwesome from IcoMoon along with many other icon fonts.

Action
Item
Consider replacing icon based images with an icon font like FontAwesome to help decrease your website’s load times.

20. Remove icons that are not being used
A simple way to further decrease load times by using a font icon is to limit the amount of icons in the font file to only what you need.

A large font icon like FontAwesome has over 900 individual icons in its font file. If you are using only 5 icons in your website, then it is unnecessary for your users to download a font file containing all 900 icons.

The IcoMoon app allows you to select only the font icons that you want to use in your website, and outputs them in your own custom icon font file.

The result is a smaller icon font file, which helps to decrease font file download times.

Action
Item
Reduce your website icon font file size by including only the icons you need – use the IcoMoon app.

21. Reduce font files size
As with compressing icon fonts, the same technique can apply to your custom @fontface enqueued font files. Popular font files usually include a Latin, Hebrew & special characters in addition to the standard alphanumeric characters. If you know that your website will never be needing extra characters beyond the standard alphanumeric characters of the English language, then remove them to reduce the file size of the font.

FontPrep is an awesome Mac app that allows you to remove unneeded characters from your website’s custom font files.

If you do decide to compress your font files, check each page on your website to ensure there are no text-rendering errors. If your website’s content changes a lot, it may be better not to remove characters to reduce the risk of potential errors.

Also make sure that you are serving up the most efficient custom font file format that you can. Fonts that are used on your computer will usually be in the format of .ttf or .otf.

There are better font file formats for the web. Most notably the .woff2 file format. Converting your custom font file to a .woff2 format will greatly reduce the file size of the font making it quicker for your users to download.

You can convert your fft and otf font files to woff2 using the font file converter application called fontplop. Font plop is made by the same people that make Fontprep.

Action
Item
Reduce your @fontface font file size by removing unused special characters, etc. FontPrep app can help you do this.
Ensure your font file format is in the right format. Convert font formats using Fontplop.

22. Reduce the amount of non-native fonts used
Google Fonts has allowed for a lot more variety when it comes to typography on the web. With 800+ fonts (and growing) to choose from, web designers are spoiled for choice.

However, using too many font options can have a negative impact on websites performance. The general rule for performance is to use one or two Google Fonts at the most on any one website.

Make sure that you only select the font weights that you intend to use on your website to save unnecessary file download. In general, a normal, italic and bold font weight will be more than enough for most website designs.

To further decrease your page load times, consider only using machine fonts for typography. Since machine fonts are native to your viewer’s computers, they do not need to be downloaded like a Google font.

A good design vs performance compromise between the two is to use Google Fonts for headings and machine fonts for body text. That way, you can still achieve a level of typographic uniqueness. At the same time, you can ensure that your websites pages load a bit quicker.

Action
Item

Try to keep Google Fonts limited to a maximum of two families and two weights per family to keep your website’s load times respectable.

  1. Consider keeping your website’s body font a machine font to reduce page load times.

23. Lazy Load media files
Lazy Loading your media files means that your images are not downloaded until they become visible after a user has scrolled to that part on the page. The images still need to be placed on the page.

To get around this, good lazyload scripts will replace the original image with a transparent one pixel image embedded on the page. This means the image will download almost instantly and when the use scrolls to or gets just before the image appears, the transparent image will be swapped out for the original full size image.

Rather than downloading all content on the page at once, this helps to decrease page load times as only the media that needs to be visible is downloaded while the rest is not.

Chances are the user will not even get to the bottom of the page so you are saving bandwidth as well by not loading all of your images.

For WordPress websites that are media heavy, lazy load is a great technique to decrease page load times. Lazy Load can also be used to load scripts in the same manner.

If you decide to integrate Lazy Load to your WordPress website, then use the Unveil Lazy Load plugin. As it is a lighter-weight version of the original Lazy Load JavaScript file, using Unveil.js (In the plugin linked) will further decrease your website’s load times.

Action
Item
Media heavy website? Use lazy load to load scripts and media only when it is visible to your site viewers.

24. Avoid self hosting video
If you have video on your website, you need to host the video somewhere. It is a good idea to host the videos on a server other than your own.

The reason why you would do this is to reduce load and bandwidth on your own server so that it can focus on serving the other parts of your site.

YouTube is obviously the biggest platform for video hosting online but there are also a number of other options that give you more control. Wistia and Vimeo are two of the other many great video hosting services out there that works well with WordPress websites.

By offloading the bandwidth to another server other than the one hosting your website, you can ensure performance is not lost from your users having to download the large video file.

Another option is if your are using a hosting provider like WP Engine and the video is relatively small, you can upload it to your website and then the CDN will take care of loading it quickly for you.

Action
Item
Offload your video and large file hosting to services like Youtube, Vimeo or Wistia to reduce the load on your web server.

25. Compress self-hosted video
If you cant upload your video to a video hosting website then at the very least, make sure it is highly compressed for web in the right format. Autoloading video can kill a website’s load times if the video file is not optimized.

WEBM is generally the best HTML5 video format because it can compress smaller than MP4 videos whilst remaining the same in quality.

Firefogg used to be the best option to compress videos into the WEBM video format. It has since been made redundant with the release of Firefox 57 and their move to a different plugin framework.

There is no clear alternative to Firefogg though converters do exist like the Miro video converter.

Depending on how you deploy your video on your website will determine what is the best settings to optimize your video files.

The second best (and sometimes the best) option to video files is MP4. HandBrake is an excellent free desktop tool for transcoding and optimizing video for the web in an MP4 format. Being more feature rich than Firefogg, you have greater control on how you format your video files.

The goal in optimizing video is to find the right balance between quality and file size.

Lower quality creates a smaller file which means it can load faster. However, you do not want to have your video quality so low that it annoys your viewers and cheapens the look of your website.

Action
Item
If you can find a video converter that converts video to WEBM, use that otherwise use HandBrake to easily optimize your web video file quality for best performance/quality balance.

26. Compress self-hosted Audio
If your website uses audio, then optimize the bitrate to decrease load times by using the free tool Audacity. Just like reducing the bitrate of video decreases quality for the trade-off of decreasing file load times, the same rule applies for Audio.

Audio files bitrate can reduce to 128 or 64 without any major losses to audio quality. Though this is dependent on the quality of the audio gear used to record the file.

Action
Item
Use Audacity as a free way to optimize web audio files. 128 – 64kbr is a good balance between quality & performance for web.

Code, Technical and Miscellaneous Performance Optimizations

So you have awesome website hosting with great foundations and all of your website media is completely optimized. Now is the time to ensure the technical side and other miscellaneous aspects are in order.

Some of the following tips and best practices may be more suited for people who have a little bit of experience working with markup. Having said that, they are just as important and if you can’t do these steps yourself, then you should forward this guide to your web designer to do for you.

27. Set the objective of your site before you begin
The success of a website often comes down to planning.

A question that should always be answered before you start building a website is: what is the primary goal for this website to achieve? Is it to:

  • Increase inquiries?
  • Generate more e-commerce sales?
  • Increase the number of opt-ins? etc.

Whatever the primary goal is, your website should be laser-focused around achieving it. You should consider removing everything else that doesn’t help in achieving that primary goal.

Building a website with a primary goal in mind helps you to create a focused user- experience. By removing all the non-essential features, your website will preform better as it is not weighed down by the stuff that distracts your users from the website’s primary goal.

Clear, simple and easy to use are three things that every web designer should aim for when building a website. When you’re thinking about adding more to your website, you should first ask yourself : ‘does this help me to better achieve the webpages’s goal?

If the answer is no, then you should exclude the element.

The result will be a more focused website that is simple for your users to understand. From a performance standpoint, less is more. In general, the less amount of individual elements you have on your website page, the better it performs.

Action
Item
  1. Plan to build a fast website from the beginning – build with a primary objective for the website to achieve in mind.
  2. Ask yourself if feature x,y,z helps to better achieve your site’s primary objective. If the answer is no, remove it.

28. Avoid using bloated themes
The ThemeForest market place is the world’s largest marketplace for premium WordPress themes. Although there are some excellent themes on the marketplace, the majority of the top selling themes suffer from feature bloat.

Generally speaking, the themes that have the most features on market place tend to sell better than focused themes.

However, most WordPress websites use less than a third of the features that the top selling themes offer.

With more features comes more scripts, more libraries, more plugins and more code. When the majority of these features are not being used, bloated themes can have a big impact on overall website performance.

The solution is to build your website using a lightweight framework so you can include only what you need.

It is quicker to get a website up and running if you use a pre-built WordPress theme. Often these pre-built themes come with features that you do not end up using. This can cause performance problems, particularly if the pre-built theme is not well coded.

If you have the time, building your website from a lightweight framework like Trisense is a much superior alternative. This way, you can only include what features you need and make sure that the code is kept tight and void of bloat.

One of the best WordPress Frameworks for raw performance is Genesis by StudioPress. Genesis has been well-coded to include many of the performance tips outlined in this guide out of the box.

Using a lightweight framework to build your WordPress website from is a great option to ensure your website can perform at its best.

However, it is time consuming to construct a website from nothing but a framework. If you’re looking to use a theme that has been built from the ground up using these performance tips in mind, then you should consider our own Trisense theme.

Action
Item
  1. Avoid using bloated themes. Use a theme that only contains the features you actually need.
  2. Consider building your next WordPress site from a lightweight, performance optimized framework like Trisense or Genesis.

29. Consider flatter design principles
Design is subjective in nature. Flat design (design which void of the heavy gradient, bevel and shadow Web 2.0 look) has been gaining popularity across the web for some years now.

From a performance point of view, that design is simplistic and minimal in nature. This means that it can often out perform designs which contain lots of gradients and shadows as there is less weight in the front-end code.

However, flat design is not a one size fits all design solution for every website. All great web designers should understand the context of the design first before deciding on which style of design best communicates the context of the subject.

Regardless of what design language or style you choose to work with, you should always aim to keep the design consistent across your website. Keeping your design consistent allows you to reuse CSS classes in a modular way (see Write Modular code) which helps to reduce the file size of your CSS.

Additionally, keeping your design consistent across your website helps to create a professional and cleaner look and feel. Mixing design styles together often results in a confusing user-experience with low aesthetic appeal.

Action
Item
  1. Consider using flat design principles as it is generally less resource intensive compared to skeuomorphism design.
  2. Keep your design language consistent across your site. This will help reduce the amount of different CSS elements.

30. Build your website Mobile First
With the ubiquity of responsive websites, the mobile-first philosophy has never been more relevant. A website that is built mobile-first means that it is designed for the mobile view port first before desktops.

The mobile-first approach has many performance advantages over the traditional desktop-first approach. Designing for a small mobile screen forces you to devoid of any unnecessary elements. The result is a more focused, simpler and better performing website.

This explanation only scratches the surface of the mobile-first philosophy. If you are looking for more, check out James’s presentation from WordCamp Melbourne 2013.

Action
Item
Focus your website. Build with mobile-first design principles in mind. See WordPress.tv for more details.

31. Keep code D.R.Y
One of the most important rules to remember when writing high-performance code is to keep it D.R.Y. DRY is a common acronym used in programming and stands for Dont Repeat Yourself.

Code classes and functions exist so that your website can render or execute similar objects without you needing to tell it the same thing to do each time. However, as your code files grow in complexity, it’s all too easy to create new code for an element when existing code could be used.

As each character in your code file equals to 1 byte in size, the more repeated code you have in your code files, the larger your code file will be. This results in your website taking longer to load.

It pays to review all the classes in your style sheet as you write code. This ensures that you don’t fall into the trap of repeating code and creating a large code file size. More times than not, it is better to remove than to add code. Removing code is often a hard task but results in smaller file sizes.

Action
Item
The golden rule to writing high performance code is to keep it D.R.Y (Do Not Repeat Yourself!)

32. Write modular code
An important technique in writing high-performance CSS is to keep it DRY (Don’t Repeat Yourself). Part of keeping your CSS DRY is to write code in an object-orientated and modular way so that it is scale-able.

A common example of OOCSS (Object Orientated CSS) in action is a grid system. A CSS grid system allows you to append a class to your divs which gives the div the properties of the grid system. This is superior for performance than having a different class for each website column and container. This helps to keep your style sheet modular and lightweight.

If you’re new to OOCSS, then check out this great guide from Smashing Magazine on how to action these techniques.

Writing in SASS or LESS will not give you any performance benefits over CSS. However, using a dynamic style sheet markup can help to simplify your website’s style sheets. SASS and LESS have added features over traditional CSS that helps to write DRY code. One of these features is variables (single references).

You can attach variables to certain values in your style sheet allowing you to not repeat yourself. You can also set it up to compress the style sheet once you have compiled it which may greatly reduce file size.

SASS and LESS does come with a learning curve. However, if your website does a lot of CSS based tasks, introducing SASS or LESS can definitely pay off in the future. Apps like Compass can help you to write quality SASS quicker through its range of built-in features.

Action
Item
  1. Apply OOCSS and SMACSS techniques to help maximize the performance of your CSS code.
  2. Learn how to use SASS or LESS as it will help you write DRY code that performs better.
[latest_deal length=”full”]

33. Use shorthand CSS
Shorthand CSS is where you combine similar types of CSS into one making the amount of code smaller.

If you are not using a CSS pre-compiler like SASS to help compress your stylesheet for you then you should always strive to write minimal shorthand code. CSS can be written in a couple of ways.

When you have a website online, you will want to make sure the code you write is written in shorthand form.

Part of writing lightweight CSS code is to make sure you use shorthand syntax wherever possible. As each character adds 1 byte of size to our CSS files, removing CSS specifiers by writing them in shorthand helps to keep the file size down.

CSS Font
Font manipulation is perhaps the most over sighted CSS syntax that is not shorthanded. The specifiers that can be defined in shorthand are:

font-weight, font-style, font-variant, font-size, line-height & font-family.

The order that you arrange your font CSS in shorthand form is:

font-style, font-variant, font-weight, font-size/line-height, font-family.

CSS Borders
As with font manipulation, CSS border elements can be written in shorthand to reduce the size of your CSS files. The CSS border elements that can be defined in shorthand are:

border-width, border-style, border-color.

CSS Background elements
CSS background elements are another overlooked area that can be defined in shorthand to reduce your CSS file size. The background elements that can be defined in shorthand are:

background-color, background-image, background-repeat and background-position.

The order that you need to arrange the elements in shorthand form are:

background-color, background-image, background-repeat, background-attachment, background-position.

Margin & Padding
Margin and padding is usually the most used CSS elements in a website’s style sheet. Significant file size savings can happen if all margin and padding elements are defined in shorthand as opposed to longhand form.

An easy way to remember the syntax order of shorthand margin and padding CSS is to think of a compass face – north, east, south, west. First position values are north (top), 2nd is east (right), 3rd is south (bottom) and 4th is west (left).

Shorthand your Shorthand CSS
Shorthand CSS can often be further reduced by writing the shorter version of a CSS Attribute. Applying shorthand code syntax is a simple way to further decrease your CSS file size by squeezing a little bit more size out of it.

For example, with hex color values that use the same characters e.g. #000000 (the color black), can be reduced to use only the first three characters defined e.g. #000. As each character equals one byte, halving the length of solid color values can help to reduce the file size of your CSS by almost half.

This shorthand way of writing shorthand CSS also applies the same principle to padding, margin and border elements.

Learning how to Shorthand
Writing your code in shorthand is important to practice when writing high-performance code.

When you are writing lots of CSS, it can be easy to forget to write some of your elements in shorthand form. A great tool to check your CSS code, and convert it to the shorthand format is SHRTHND.

Paste in your CSS code into the editor, and the app will output the code in shorthand format on the right. The app will highlight the code that it has outputting in shorthand on the file. That way, you know which classes and IDs to replace with the shorthand code.

Action
Item
  1. Declare your CSS font, border, background, margins and padding properties in shorthand form to reduce CSS file size.
  2. Shorthand your shorthand CSS to reduce the file size of your CSS. E.g border 1px solid #fff combines 3 elements in 1.
  3. To reduce filesize of your CSS, use SHRTHND to shorthand your code for you.

34. Tidy up and remove unneeded CSS
It is always best to check over your code and remove redundancies once you have finished writing it. However, this can be quite time consuming and tedious to do, particularly with large style sheets.

Tools like Code Beautifier can automate most of this process. It does so by tidying up your CSS and removing unnecessary weight. You can choose different levels of compression depending on how much file size you want to reduce. We find that the tool works best when the file is set on its standard settings.

It’s quite common to find unnecessary brackets and opening/closing tags in HTML/ CSS files. This creates unnecessary weight in your files and can affect your website’s W3C validity. With that said, you want to make sure that these are removed before you make your files live.

The easiest way to remove unnecessary brackets is by doing a find all search. From here, you can search for any instances of “{}” in your style sheet, and remove them. The same rule applies for your files that contain HTML However, the find all search criteria should be “></”.

The aim of writing high-performance code is to keep file size as small as possible. With that said, using CSS margins and padding is a much better way to space out elements compared to clumps of &nbsp;, <p> and <br /> tags.

Although it can be convenient to use HTML tags for spacing, it is better to use a CSS to space out your elements.

This one class can be reused many times across your web pages. Clumps of HTML tags need to be added in each time to space out elements. This creates unnecessary page weight which can hinder page load times.

Action
Item
  1. Use Code Beautifier to compress your website’s CSS & speed up site load times.
  2. Do a find all search for “></”. once you’ve finished writing HTML/CSS to quickly strip away unneeded code weight.
  3. Avoid slowing down your pages by creating spaces with , and tags. Use CSS margin and padding instead.

35. Reduce older browser compatibility
When new technology is introduced into browsers, it is usually in a stable way but not necessarily ready for prime time. Web browsers introduce browser prefixes to help provide support for newer technologies.

Once the browser vendor has implemented the technology, the prefix is not needed anymore.

Browser vendors are constantly reducing the amount of prefixes required to create compatible CSS code across the web. What may have needed a prefix a year ago might have graduated and doesn’t need one now.

Can I Use is an excellent resource that allows you to see what CSS prefixes are required to render your CSS3 code in major browsers. It is a good practice to check this website when writing CSS3.

This is to make sure that you are not including any unnecessary prefixes in your CSS code.
By not including unnecessary weight to your style sheet, you CSS file can load faster.

When CSS3 first reached comprehensive support by most major browsers in 2009, browsers leaped at the chance to create new prefixes. However, not all of these defined prefixes carried through to being supported.

-ms-border-radius, a prefix for Internet Explorer to support border radius elements, was never supported. Using a prefix that was never supported in your style sheet adds unnecessary weight. You should check all of your CSS3 prefixes to make sure you are only adding in the necessary prefixes for cross browser support.

Prefixes can add a considerable amount of weight to a style sheet if you are using a lot of them. This is particularly true for websites that are backwards-compatible with older browsers as they require more prefixes to render correctly.

If you are creating a website that uses a lot of different prefixes, you should consider loading them dynamically with -prefix-free. It is a lightweight piece of JavaScript code, that checks what browser you are using, and only loads the prefixes required for that browser. Your website will load faster as only the browser-specific prefixes are downloaded, compared to downloading all prefixes for all browsers.

Backwards compatibility to old versions of Internet Explorer has always been one of the most painful jobs for any web designer to do. More advanced websites often need many style sheets for different versions of Internet Explorer just so the website can be backwards compatible.

If your website is not accessed on older browsers, then you should consider dropping outdated browser support and focus on optimizing your website for modern browsers. You can see what browsers your website’s viewers are using from your Google Analytics account.

With new versions of Internet Explorer now supporting automatic updates, and with the usage statistics of pre-IE9 browsers decreasing, backwards compatibility to old browser versions will soon not be necessary for most websites.

Action
Item
  1. Reduce CSS file size by removing prefixes that have graduated. Use ‘Can I Use’ to find out more.
  2. Consider dynamically loading CSS prefixes to reduce page load times. Use Prefix-Free.
  3. Be aware of old prefixes that can cause unneeded file weight like -ms-border-radius. Check with: Can I use.
  4. Consider dropping support for outdated browsers to reduce the overall file size of your website.

36. Compress files and remove spaces
If you are not using a stylesheet pre-compiler like LESS or SCSS then you need to make sure you are following these steps.

Having unnecessary empty spaces in your style sheet adds unneeded weight to the style sheet. When you’re compiling your CSS files, its easy to create unintentional empty spaces.

You should review your style sheet once completed and remove all empty spaces. If you are a Sublime Text user, you can use a package called ‘Remove Trailing Space’. This package will automate the process of removing the empty spaces at the end of the lines for you.

Action
Item
Remove empty spaces in your CSS to reduce file size. Use ‘Remove Trailing Spaces’ for Sublime text to quickly fix this.

37. Avoid using !important in CSS
If you’ve built a child theme from an existing WordPress theme, you would have likely come across this problem. If the child theme’s CSS file is not called after the parent theme’s CSS file, the child theme CSS will be overwritten by the parent.

This forces you to use the !important tag on your CSS elements to stop them from being overwritten by the parent.

The reason why this is bad is each !important tag adds weight to your child theme’s style sheet that can be avoided. The solution is to make sure that you’re child theme CSS file is defined after the parent theme’s CSS file. This way, the child theme CSS will overwrite the parent’s CSS file without needing to use the !important tag.

An even better way would be to ensure your style sheet is enqueued correctly in the child theme by enqueueing it in your functions.php file – not by importing it in your CSS file.

Action
Item
Avoid !important tags in your CSS by making sure that your child theme CSS is registered after your parent theme CSS so that the styles cascade.

38. Separate your CSS and JavaScript files from code
The general rule is to place all CSS and JavaScript in external files so they are separate to your HTML/PHP files. The reason why you should do this is because external JavaScript and CSS files can be cached. This means that they do not need to download every time a user visits your website.

This results in better website performance. If you use caching on your website, such as W3 Total Cache, the performance gains are more noticeable.

There is one exception to the rule of keeping all of your CSS and JavaScript in external files.

If you are using JavaScript to render elements above the fold (what your users see as soon as they load your page and haven’t scrolled.) of your website, and if the JavaScript code is small, then you should consider placing the script inline.

By doing so can improve the above the fold render time of your website. This allows your web pages to load faster above the fold which is where your users attention will be focused on initially.

If you are unsure if your website could benefit from this trick to improve above the fold render time, then you should run your website through Google’s PageSpeed Insights.

Google’s PageSpeed Insights will tell you if your website can be better optimized to improve above the fold render times.

A typical website page loads its elements from top to bottom. With this said, you should load all scripts in your website’s footer unless they need to be at the top of your web page.

When initializing JavaScript, you should always do so through your website’s functions.php file. The WordPress Codex details how to do this correctly.

Action
Item
  1. Keep your JavaScript code separate from static HTML/PHP files so that it can be cached.
  2. Consider using inline CSS and JavaScript for elements above the fold to decrease above the fold render times.
  3. Improve page render times by loading scripts that do not need to be initialized before page content in the site footer.

39. Use only the Javascript you need
JavaScript libraries
Large JavaScript files can hurt the performance of your website. If you want to enqueue a JavaScript library, then you should only include what functions you will be using.

For example, let’s say you want to use the jQuery UI tabs & accordions on your website. Common JavaScript libraries will often include script builders. These allow you to compile your own library including only the two functions that you intend to use.

By including only what you need, you can avoid larger than necessary JavaScript files. The smaller the file, the less time it takes to download and render on your website.

Loading JavaScript on pages
A fairly common problem with feature-rich WordPress themes is that they use a lot of JavaScript files. They add them to the page even if the page or even website is using them or not.

It’s fairly easy to enqueue a JavaScript file in your functions. php file, however does the script need to run on all pages or just a few specific ones?

Use checks in your php code to see if the shortcode that contains the function of the script is being used on the page first. If it is being used, then the script is loaded. This way is more beneficial to performance as the script only needs to be downloaded if it is being used.

Use Vanilla JavaScript if possible
jQuery is the most popular JavaScript library in use on WordPress websites today. It can be found on over 60% of the world’s top 10,000 most visited websites. jQuery is a framework for JavaScript, so everything that jQuery can do, plain “vanilla” JavaScript can do as well. Therefore, jQuery is not always needed.

The general rule when working with JavaScript and jQuery is to code all functions in JavaScript if possible. This is because JavaScript is native to most modern browsers.

So, if your jQuery code can function when written in JavaScript, you will increase your website’s performance as the jQuery library doesn’t have to be downloaded. If you are not sure if your jQuery functions can be replaced with JavaScript code, check out the website You Might Not Need jQuery.

If you’re developing a mobile web app and you need the framework, then you could consider using Zepto. Being light-weight in nature and specially optimized for mobile devices, Zepto can offer significant performance gains over jQuery for mobile web apps.

The goal of Zepto is to offer a leaner alternative to jQuery for the mobile web. With that said, it may not be best suited to websites that are desktop orientated and need all of the features that are included in jQuery.

Using jQuery libraries outside of the default jQuery library that ships with WordPress can lead to unpredictable results. With that said, it is best to test thoroughly to catch any bugs should you choose to use Zepto with WordPress.

Action
Item
  1. Only enqueue what you need from JavaScript Libraries like jQuery UI. Use a wizard to compile only what you intend to use.
  2. Avoid loading scripts on pages that do not use them. For WordPress sites, use checks in functions.php to solve this.
  3. Use Vanilla JavaScript over jQuery where possible. Vanilla JavaScript generally performs better than jQuery.
  4. For mobile web apps, consider using Zepto over jQuery to increase performance.

40. Compress JavaScript
An easy way to improve your website’s performance is to compress your JavaScript files. Compressing your JavaScript files removes any unnecessary spaces from the file and creates smaller code which decreases the size of the file.

There are many JavaScript compression tools available online. We’ve found that Google’s Closure Compiler creates the greatest file size reductions.

If you do choose to use Closure Compiler, make sure to test your compressed JavaScript before you deploy it live.

We’ve found that Closure Compiler can over compress the JavaScript code in some cases. This can break the JavaScript function on your website, causing problems for your users.

Regardless, compressing your JavaScript is an excellent way to increase your website’s performance and is quick and easy to do.

Action
Item
Compress your JS code using Closure Compiler to reduce file size and decrease site load times.

41. Use Asynchronous loading for JavaScript files
When a user accesses your website, each individual file downloads one by one until the website completes loading. This process can be seen in the “Measure speed and performance section above as a ‘waterfall’.

A file that is being asynchronously loaded means that it downloads at the same time as your website’s synchronous files. This allows your website to load faster as asynchronous files can start downloading immediately, rather then having to wait for its turn to download in your website’s waterfall.

When you enqueue a library to your website, check to see if they have an option for synchronous or asynchronous downloading.

Unless you have specific development requirements, you should always go with the asynchronous downloading option.

Action
Item
Avoid loading resources synchronously. Use asynchronous loading wherever possible to speed up load times.

42. Don’t @import stylesheets
When working with child themes, you should always avoid using the @import function in your child theme’s CSS file. Instead, enqueue the stylesheet files in your functions.php file.

You should do this so that both stylesheets can be downloaded at the same time rather than needing your child theme’s CSS file to be downloaded.

If the same file is enqueued within your functions.php file, it can download as soon as your website begins to load. This removes the need to have your child theme’s CSS file downloaded first.

The result is decreased load time of your website’s external files, which helps to decrease the load times of your web pages.

Action
Item
Avoid child themes @import. Instead, enqueue in functions.php as this helps to download the CSS faster.

43. Specify websites character set
A quick performance win is specifying the web pages character set in your website’s header. If you are using English as your language then UTF-8 is likely your preferred character set.

By leaving the character set unspecified, the browser needs to spend extra resources checking this.

By telling the browser what the character set is, means it does not need to spend further resources to complete this task. For WordPress websites, use the line at the top of your header.php file.

Although a small win, this can help to increase your overall website’s performance.

Action
Item
Use bloginfo(‘charset’) in your WP header for a small performance boost. Helps to reduce browser workload.

44. Analyze impact of installed plugins and their performance
In the WordPress space, the common myth is that the more plugins your website uses, the slower it will be. This isn’t true as each plugin requires a different amount of resources to work.

The P3 (Plugin Performance Profiler) WordPress plugin tells you exactly how much resources each of your plugins are consuming.

P3 will give you an easy to understand breakdown on the performance impact that your plugins are having on your website’s page load times. From here, you can decide if you want to replace the plugins that are having the biggest performance hit.

For plugins that achieve a common task, there will almost always be a lighter weight version. Or, if the plugin’s features are not particularly useful to you, delete the plugin.

Action
Item
Use P3 Performance Profiler to see the performance impact of your plugins. Remove/replace ones with biggest impact.

45. Offload server intensive plugins
Plugins that perform certain functions not crucial to displaying a web page are often better integrated from separate web applications than as WordPress plugins installed in your website.

For example, the plugin ‘Broken Link Checker’ is notorious for the amount of server load the plugin places on your websites server. In fact, WP Engine has banned the plugin from being installed due to performance penalties it creates.

The solution is to offload the function to a web application that isn’t hosted in the same server that your website is. In the case of checking your website for broken links, this exact function can be achieved with an online tool like Online Broken Link Checker.

Because the function is being processed on the web application’s server and not your own, your website does not receive any performance penalties as the function is being executed.

Plugins that serve related posts to your website viewers are typically found on news & blogging websites. These types of plugins can bring significant performance penalties.

These five plugins are also banned on WP Engine hosted websites due to the amount of performance they take away from websites using them.

If you are using related post plugins, either consider removing them or replacing them with performance optimized version. We are using jetpack for our related posts plugin and it works great.

If your website is serving real-time feeds, then you can increase your website’s performance by offloading the feeds to an external service. Google’s FeedBurner is one of the most popular feed services.

You can use Google FeedBurner to reduce load off your web server by offloading your feeds to it. By doing so will help your website to perform better.

Action
Item
  1. Offload server intensive plugins e.g Broken Link Checker to separate web apps that do not chew up your site bandwidth.
  2. Avoid using related post plugins as these add a high amount of load to your site’s server which reduces performance. Offload this feature to a separate web service to reduce the load on your server.
  3. Offload feeds to an external host like FeedBurner to reduce the load on your site’ server = better performance.

46. Remove or disable unused plugins
The general rule for performance optimization is to only keep what you need for your website to function. If you have plugins installed, but not using their functionality, remove them.

By doing so, your website will perform better as non-essential functions are not taking away from your server’s resources. Additionally, your website will need less maintenance and upkeep.

The general rule to follow when managing plugins that you only use now and then is to keep them disabled when they are not in use. This serves as a precautionary step to ensure that plugins are not taking away unnecessary resources from your web server.

Plugins that are disabled will not request any resources from your web server, aside from notifying you when an update is released.

Action
Item
  1. Remove WordPress plugins that you are not using on your site to save resources and make your site easier to maintain.
  2. Disable plugins that you use infrequently to ensure they do not take up any unnecessary resources/slow your site down.

47. Avoid encrypted plugins
Sometimes plugin developers are so protective of their plugin that they will encrypt their plugins entire code so people do not copy it. You likely wont need to worry about this step if you are using plugins from reputable sources like WordPress.org, CodeCanyon or WP Absolute.

If you have sourced a third party plugin, this may apply. If you’ve ever opened up a plugin’s source file and seen code that is all jumbled then you are likely you’re dealing with an encrypted plugin.

Although it is not recommended, plugin developers sometimes choose to encrypt their plugins to protect their IP. By doing so brings performance penalties to websites using plugins that contain encrypted code.

The reason why is that encrypted code needs to be decrypted before the function can work. This extra step reduces your website’s performance compared to a plugin that is not encrypted. This is because the decryption process does not need to happen before the function can work.

If you do come across a plugin that uses encrypted code, see if you can replace it with a plugin that achieves the same function without encrypting its code.

Action
Item
Avoid plugins that use encrypted code as they can slow down your website’s speed. If unsure, ask the plugin author before purchase.

48. Consider disabling WordPress Trackbacks and pingbacks
Trackbacks and pingbacks enables authors to keep track of who is linking to, or referring to their articles on another website. Trackbacks and pingbacks can be a useful feature for WordPress websites that are producing a lot of content or want that type of notification.

If your WordPress website is not producing lots of content, then you should consider turning off the functions. You can do this from within the WordPress Settings > Discussion menu.

Disabling trackbacks and pingbacks removes the need for your website to check and execute this function, which helps to increase performance.

Additionally, if your website is receiving spammy trackbacks and pingbacks, then you should consider disabling the function if it is not providing any value to you.

Action
Item
Consider disabling pingbacks and trackbacks if you’re not producing lots of content to boost performance.

49. Keep everything up to date
Every WordPress website’s core and plugins should be updated as soon as a stable update is released.

Not only does this help to reduce vulnerabilities that hackers and bots can exploit, it also ensures that it can perform at its best.

The WordPress core team and most good plugin authors continue to remove slow and deprecated code while optimizing the scripts to increase performance.

Keeping your WordPress website up to date means you can take advantage of these optimizations to help increase your website’s performance.

Action
Item
Keep everything updated on your WP site – not just for security but so you can take advantage of better optimized code.

50. Check your website hosting server is compressing files
Making sure your website hosting server is delivering your website compressed to your users will save you bandwidth and speed up your website.

Once setup on your hosting server, it is a simple and effective way to save bandwidth and speed up your website without any effort on your part.

When your browser is downloading the parts that make up your website, it will download each file. These files can either be sent as is or they can be compressed and then sent to you. Your web browser will then uncompress these files and assemble the web page. It is much faster to receive files that are compressed.

There are a number of different compression algorithms available but the two most popular are Gzip and more recently Brotli. Brotli compression has seen smaller file sizes than Gzip but is still less compatible across some some web browsers.

Brotli is recommended but if you cant add it then GZIP is the next best option.

Most quality website hosts like WP Engine will gzip your server by default for you. If you are unsure if your server has been gzipped, then you can use the online tool gzipWTF to check.

If your web server is not gzipped, then you must ask your server hosting provider to enable GZIP on your server. There is also a second method to enable GZip but results in a slightly slower speed than adding it at the server level.

You do this by adding a number of snippets from the HTML5 Boilerplate’s server config files (details provided in the next step) to enable gzipping on your website’s server.

You can avoid having to do these tips if you start with fast hosting to begin with. See tip #1.

Action
Item
  1. If you are unsure if your web server is gzipped, use gzipWTF to find out.
  2. If you are unsure if your web server is using Brotli, use Brotli test to find out.
  3. Ask your server hosting provider to add Brotli compression or at the very least, Gzip to speed up your website loading times.

51. Add H5BP server configs to your website hosting server
If you are not a server administrator capable of making changes to your servers software then this is a good secondary solution. If you have access to your hosting server files then you can add these server configs to your hosting server. The configs will help optimize your server and make it go faster.

The most common type of hosting server for WordPress is an Apache hosting server. Apache hosting servers use .htaccess files. Chances are you are using an Apache hosting server.

You can check what server type you are using by running your website through BuiltWith. You will see your server type under the Web Server section.

The HTML5 boilerplate or H5BP is one of the web’s most popular front-end HTML templates. Choose the right H5BP Server Configs for your server type. The configs have a few trick lines of code that you can use to speed up your WordPress website.

The configs help address a number of speed related issues on your server.

These configs add hidden lines of code that get sent alongside the page you are viewing in your browser and include:

Expires Headers
Expires headers tell the browser when it should use a previously downloaded version of a file from the browser’s cache or request a new version from the server.

If you have files such as your stylesheet that doesn’t get modified often, then the expires header will help with caching and prevent the user from downloading the same file too often. This results in faster load times for your website.

In the server config file, search for “Expires headers”. Copy and paste the entire expires headers code snippet into your servers config file, and save to activate.

Entity Tags
Entity tags (ETags) are a mechanism to check for newer versions of a cached file. If you know updates to your website’s CSS file won’t happen for a long time, you don’t want your visitors to be downloading a new version of your CSS file each time they visit your site.

By using the ETAG snippets, you can force your visitor’s browser to reply on Cache-Control and Expires Headers. This results in one less step in downloading your website to view in a browser, which decreases load times.

It is best to check first if your web host applies ETAGs by default as most good web hosting providers do this already.

Vary: Accept-Encoding
The Vary: Accept-Encoding header snippet from the HTML5 boilerplate is an easy way to increase the performance of your WordPress website.

When browsers make a request to your web server, they include HTTP headers so your server knows what to send back to the request.

By default, your web server may not be able to send back the correct cached version of your website, meaning that your website will take longer to load downloading a new version.

Vary: Accept-Encoding will allow your web server to send different cached versions of your website to avoid this problem.

Keep in mind that good web hosts will have already done this for you.

Action
Item
  1. Use the “Expires Headers” code snippet from HTML5 boilerplate’s to help speed up your site.
  2. Copy the ETAGS snippet from the HTML5 boilerplate and configure as necessary to decrease site load times.
  3. Copy the Vary: Accept-Encoding code from the HTML5 boilerplate to take advantage of this.

52. Avoid ordering content by random
The WordPress “$ORDERBY = ‘RAND()’; function is used to display content at random. For example, a website that displays random blog posts on the homepage each time you visit it is most likely using the “RAND” function.

The function is an intensive operation to complete, so much so that WP Engine disables the function by default.

If you’re using the “$ORDERBY = ‘RAND{}’; function and your website’s performance is poor, then you should consider removing the function.

Action
Item
Be careful when using ‘rand()’ as this is a very resource intensive PHP function. Avoid using it if not needed.

53. Spring Clean your code
If you’re tweaking and changing your website, you should consider refactoring or even completely rewriting your website’s code from scratch on a schedule.

It is easy to create code redundancies and break the D.R.Y rule when you are adding in new code at different points in time.

To keep your website performing at its best as it evolves, sometimes the best thing you can do is rewrite the code again. This way, you can write all the code while factoring the best practices for performance.

Considering the rate of evolution in web design and just how fast a brand new website can start looking outdated, overhauling your website’s design and code together each year is a great idea to keep your website performing well.

Action
Item
Review your site’s code-base annually if you have made many changes. Consider a rewrite to make the code more efficient.

Conclusion
At the end of the day, optimizing a website for better performance and to speed up wordpress is all about making sacrifices. Sacrificing features, sacrificing media quality, sacrificing ease of editing by compressing and combining code etc.

Ultimately, it’s all about finding the right balance between function and form.

I know that all these tips will get your website to load much faster as I have done it countless times. I hope that you can apply all of these tips and steps to reap the performance rewards yourself.

If you’re not a developer, but want a professional WordPress website that loads fast, then you can get help from Web3. Web3 is our digital agency that builds market leading WordPress websites and online solutions. We offer all of these techniques as a service to ensure that each website we touch is built to perform great.

Want a fast loading website, but have no time? Check out how Web3 can help you.

If you have any additional tips, feedback or questions about WordPress performance and how to speed up WordPress then please let us know in the comments.

Congratulations on reaching the end of this epic guide to ultimate WordPress performance! If you enjoyed this guide, please share the love! Everyone who has their own website will benefit from reading it.

P.S. You can download this guide in PDF format on our Web Design Agency Website. Feel free to forward it to as many people as you want.

Good luck optimizing!

WP Absolute

WP Absolute

WP Absolute provides the absolute best WordPress tutorials and helpful guides to grow your WordPress website online.
Join us on Facebook and Youtube.

Add your comment