A New Year means resolutions for improvements and this doesn’t have to be limited to the gym. Tackling obstacles dragging down your website’s speed is as compelling a New Year’s resolution as any.

Finding out what makes your website slow can be a process of elimination. This post examines the 7 top problems that weigh down site speed and provides suggestions to make your WordPress site faster heading into 2022.

Before we get started, check your speed. 

These 2 free tools will check the speed along with other web page vitals –  webpagetest.org and tools.pingdom.com.  These sites check page loading times and stats like Largest Contentful Paint (LCP). LCP is the rendering time that reports the time it takes for the largest block in the visitor’s viewport to load. These tools also highlight possible areas of improvement like image compression, CDN use, and which scripts are taking too long to load.

What is making my WordPress site so slow?

1 – Non-Optimized Images

Images are a top reason for slow websites. People rarely compress their images and this can create major rendering delays.

If you have a section of your site set with CSS to show a 400 x 400 pixel image, but upload an 800 x 800 pixel image, you still have to wait on that extra 400 x 400 pixels to load even though the image will not display it at that resolution.

What happens behind the scenes is the browser first loads the 800 x 800 pixel image before shrinking it down to the 400 x 400 pixel image. This takes extra time and resources from your server and slows load time. 

Instead of waiting on the browser to download and shrink the image, start off with the correct size (width and height) to match what is set to display on the page.  

Here are two things you can do:

• Upload an image with the same dimensions as the display space on your page.
  • Use an image compression or resizing tool to upload the correct size image. For example, TinyPNG, Optimole, WP Smush, EWWW Image Optimizer, Smushit.  WordPress includes image resizing functionality when you upload a file. It allows you to choose a size or select your own dimensions.

• Defer loading – You can also defer images from loading (called lazy loading) until after the image is in the site visitors’ viewport. This can be set with an HTML attribute.

Source: w3schools

2 – Not Using a Caching Plugin 

There is no excuse not to use a caching plugin. If your website is not caching pages, you can overload the server with heavy processing requests and cause it to slow or even crash.  Caching allows site visitors to quickly see a static HTML file instead. Caching allows you to store and reuse saved data the first time it loads in unused RAM space and prevent a return trip to the server. WP Super Cache is a widely used free WordPress plugin. If you are experiencing a slow website, this is one of your go-to fixes. 

3 – Not using a CDN

The location of your web servers can affect the speed of different people located in different geographical regions. CDNs use international peering and keep content close to your site visitors so they experience low latency. Because the CDNs store static files of the site like JavaScript, CSS, HTML, and images, the load is reduced on the hosting and makes site performance faster for visitors.

Content Delivery Networks (CDNs) performs geographically distributed caching, storing static files of your site on web servers around the world to improve the experience for all site visitors regardless of the country they are visiting your site from.

4 – Background processes

Your backups and scheduled posts or updates should be set to run during low traffic hours. Make sure the settings on these provide the lowest amount of impact, for example: does your backup need to store a copy of every page or just those changed? Some plugins can also slow your website down. 

Some plugins can be resource-intensive and significantly slow page speeds, especially those that collect data, perform SEO functions, collect stats or create backups.  Query monitor is a free open-source plugin that ranks your plugins by their speed so you can begin researching lightweight alternatives.

5 – Bandwidth limitations

To improve accessibility for users with bandwidth limitations you can enable GZIP which requires less data for your page to load. GZIP compresses files up to 90%, allowing faster page speeds, improved SEO, and a better overall user experience. GZIP is a free open-source software application that can be added to sites using one of these configurations listed in Github for the most common servers.

You can enable GZIP with a number of caching plugins including the free WP Super Cache. To test that you’ve added GZIP to your site correctly, visit the GZIP tester and enter your site’s URL. If set up correctly, it will return a message stating that ‘GZIP Is Enabled’.

6 – Too Many Requests 

Each component on a page is an HTTP request so simplifying the design of a page can go a long way to reducing the number of requests required for the page to load. Don’t forget that each image is its own request. You can reduce additional components by looking at your code. Combine your external CSS files into just 1 stylesheet. Do the same with your Javascript resources. You can use Apache Ant to combine several files for your site.  Find out how many requests are being sent for each plugin by using Chrome’s Dev tools or the Pingdom tool. Cutting down on requests will directly improve load times. 

7 – Unoptimized Code

The indentions in source code make it more readable to developers, but to a browser, it is just additional data to download.  These characters along with comments add to the time it takes to a page’s load time. There is a free “minify” plugin that will remove the unnecessary characters for you post-development.  A couple of popular plugins that do this include Autoptimize and WP Rocket.

In Cascading Style Sheets or CSS, you can optimize code by using “media types” wherever possible and setting non-critical CSS like below-the-fold components to load  “inline” or “asynchronously” aka, “lazy loading”. Breaking out critical vs. noncritical CSS will significantly improve performance. Usually, critical CSS will include the background color, styling for above the fold (or in the initial viewport), and device dimensions.

With Javascript (especially third-party Javascript), other resources can be prevented from loading. Consider adding a defer attribute. 

In Conclusion

Improving speed directly affects SERP rankings in 3 different ways. Google has ranked desktop speed in search results since 2010, and mobile speed in 2018. Just this June, in 2021 Google introduced a third speed ranking called Core Web Vitals (CWV) which focuses on-page experience. Speed also indirectly impacts rankings by impacting bounce rates of site visitors. More than half of people visiting sites on their cell phones will leave a site if it has not loaded within 3 seconds.

If you have fallen into one of the 7 speed traps we’ve covered, be sure to follow our suggestions for improvements so your site can be ready to take on the year ahead.