Website Speed: What You Should Know (Part 2)

WordPress, WordPress Website Speed

The truth is, website performance isn’t an easy topic.

If you read my previous article on back-end performance, then you know that the back-end makes up 10-30% of your website’s loading time. The remaining 70-90% is what your website visitors interact with, and what we call the front-end. If you want to make your front-end perform faster, you need to understand the levers on which you can act.

When reviewing the front-end performance of a website, you need to focus on 2 different aspects: content complexity and front-end performance. Content complexity should always get attention first. When you reduce the complexity of your pages, you improve front-end performance and improve the experience of your customers and readers.

CONTENT COMPLEXITY

Content complexity is a breakdown of the blocks that make up your web pages. While not exactly a performance metric, it gives you an indication of how your pages have been designed and can highlight design flaws or potential issues. It’s all about what comprises your web pages: your assets. The complexity comes from the number of assets but also their weight added to your pages.

Assets Count

An asset is any element of a webpage which is fetched in order to render the page. Typical assets are javascripts, css, images, font, media and flash.

The asset count is an important factor. The more assets you need to load, the longer it takes to complete the fetch and render cycle. The number of assets determines how many fetches or HTTP requests are necessary to fully render your page. As this number increases, your loading time increases as well.

Each asset necessarily slows down your site, no matter how small or optimized they are. Even the smallest asset will take time to load since it needs time to travel between its location and your visitor’s browser.

There are 3 main reasons for this: browser behavior, server resources and network quality.

  • Browsers are limited to a certain number of parallel downloads of assets coming from the same domain. Assets are downloaded by batch, one after another.
  • Assets, like any piece of data traveling 0n the Internet, are victims of network latency and DNS Resolution. Each time an asset is downloaded, a segment of time is added to the total.
  • Each fetched asset adds load on your server. This can create a bottleneck if your server capacity is too low and delay the serving of your assets.

The less assets you load, the faster your pages render. We will see later how you can optimize this.

Assets Weight

The smaller your assets are, the faster they travel across the Internet. It’s that simple. This applies to all the scripts, css, fonts, videos, images in your pages.

The overall weight increases with the number of assets you have. However, individual weight is very important. A single picture coming from your phone can increase your page loading time by 5 to 10 seconds, if this asset is not properly resized and optimized.

Depending on their weight, your assets will require more or less bandwidth output coming from your server, but also from your visitors.

Your pages will load as fast as your visitor’s internet line will allow. People on mobile will take more time to load your page compared to others using an optical fiber connection. Heavy pages consume more bandwidth and require higher speeds for them to be delivered quickly.

Your web server probably has a bandwidth speed limitation. The limit is variable depending on the type of hosting you get and on the hosting company you choose. Some shared hosting plans give you unlimited bandwidth and then throttle it at 1-5 Mbps. Premium or specialized ones can give you 50 Mbps or more depending on your plan.

Reducing the weight of your assets make your website faster especially for mobile users. It also eventually lets you to save on your bills or hosting requirements by reducing the bandwidth needed.

When Do You Need to Optimize Your Content?

Optimization is typically part of web design. But, this not always the case. If you purchased your theme in a marketplace or if your web designer didn’t do it, then you may still need to optimize your content.

Note that each time you install a new plugin in your website, you inherit new images, JavaScript or css. This is a fairly common reason for the performance of an initially fast website to deteriorate over time.

This tells us that initial optimization is essential but it won’t keep your website fast forever. You need to optimize each time you add new content or features, or it will affect your website performance. To address this, you need a solution or a plugin which optimizes your assets for your website continuously.

How Do You Optimize Your Content?

By Combining and Minifying your Assets

The best way to optimize your pages is to reduce the number of assets by combining them.

Plugins like W3TC, WP-Rocket or Better WordPress Minify can do this for you and many other things. However, it might take you several attempts to get the results you want.

Use this type of optimization very carefully. It’s better not to try it on a live production website directly. Test it first, as it may break your website a few times before you get it right.

By Loading Only the Necessary Assets

Using a light theme and limiting your plugins will guarantee a lower number of assets.

Premium themes usually come with a large number of assets, whether or not you use all the features. For example, if your theme has a nice testimonial feature, the assets linked to this feature will be loaded in all your pages. This happens even when you don’t put the testimonials in any of your pages.

This is simply the default behavior of most themes and plugins. The only solution is to manually unload them with a bit of coding or to use another plugin to do it for you.

Plugins like Plugin Organizer can help with this by loading the plugins only when they are needed. You can also load the JavaScript and css manually depending on the page or post type by adding code to your theme. Here are 2 resources you might find helpful about conditional loading:

  • Conditional Script Loading Revisited
  • Loading Scripts Conditionally

Use this type of optimization very carefully. It’s better not to try it on a live production website directly. Test it first, as it may break your website a few times before you get it right.

By Compressing your Assets

A properly configured server should provide you with an automatic compression of the content and assets of your website (gzip). While Gzip compression is not the type of thing most people ask about when getting a hosting plan, this simple feature reduces the size of your pages by 10-30%.

Gzip compression became a standard long time ago. However, it’s still best to make sure it’s available on your hosting.

This is considered as a safe optimization which you turn on and forget.

By Optimizing your Images

Images are the first thing to look at when it comes to front-end optimization. They are the “usual suspects”. You will need to resize, compress and optimize them before you upload them to your website. Here are some online tools and plugins which can help you :

  • smush it (online)
  • smush it (plugin)
  • Ewww Image Optmizer (plugin)

The type of image can have a significant impact on the file size. Use these guidelines:

  • PNGs are almost always superior to GIFs and are usually the best choice.
  • Use JPGs for all photographic-style images.
  • Do not use BMPs or TIFFs.
  • Deliver WebP images to modern browser users instead of JPG and JPG or PNG to others.

Finally, it’s always best to deliver the best image size depending on the screen used by your visitors. High resolution pictures will negatively affect your mobile users’ experience without bringing them any benefit.

My Take on Content Complexity

As you probably realized by now, optimizing your content requires serious attention and a significant amount of work despite the availability of tools and plugins on the market. Depending on your level of skill, optimization might require some external expertise. Most of these tools need to be used carefully and require a few hours of testing before you get the results you expect. As I mentioned, don’t test them on live website. Go for a staging or test server, first.

Now, what if you could optimize your website without spending time on it? Without installing any plugin? Without worrying about breaking something?

At Redstratus, our clients benefit from website optimization on all of our hosting plans. While we deliver the best back-office performance, we also provide continuous optimization for their website. Our servers optimize all their content and assets automatically, without breaking their website and without the need for specific configuration. In our experience, loading time can be reduced by more than 50% depending on the current level of optimization of a website.

If you want to improve your website speed through high performance hosting, you may want to check the fastest WordPress hosting by redstratus. See how fast you can go for only $22 per month. Serve thousands of customers without slowing down.

Redstratus is WordPress at its fastest. Every second counts. Start today!

For more information, contact our friendly team. Just ask and we’ll explore the possibilities together.