Website Speed Optimization Tips

0

How To Speed Up Web Page Loading Time

The time it takes between the moment your next user clicks on a link to your website and the point the page finishes loading could very well mean the difference between a conversion and a bounced user. If you take too long sending and rendering your page, you risk losing the impatient users to faster competitors. Because of this, website speed optimization is an important part of any manager’s toolkit. 

Page Load Speed vs. Bounce Rate
Pingdom’s Page Load Time vs. Recorded Bounce Rate

As you can see from the chart above, if your page take more than 3-2 seconds to load, you rusk using at least a quarter of your users to a bounce, meaning they either left before the page loaded or never interacted with it.

It’s not only your users that are impatient. Google uses website speed as a ranking factor for their search engine. They actively penalize slow sizes, moving them lower down on search engine results pages, effectively decreasing organic site traffic. Obviously, you want to avoid this penalty at all costs. 

This article will show you ways that you can both decrease the time to first byte, individual page load time, and site speed, helping keep visitors, and Google, happy. 

Run A Benchmark Before You Start Website Speed Optimization

It’s hard to judge page speed improvement without a baseline. So let’s first start by using a few tools to learn about our site’s speed. The first is PageSpeed Insights by Google. Another great tool is Pingdom’s Website Speed Test. Visit both these tools and run your home page, and then multiple important pages in your conversion funnel through them. Make note of the results. We suggest screenshots or print-to-pdf. 

Website Speed Test
Pingdom’s Website Speed Test Results

Don’t be worried if you don’t have an A. Even Google doesn’t get an A on its main search page. 

Google PageSpeed Insights Results for Website Speed Optimization
Apple nearly fails the Google PageSpeed Insights test. 

Use Data To Make A Website Speed Optimization Plan

These tools offer more than just a couple pretty charts. Pingdom’s tool will give you a list of actions you can take to improve page performance. Click on the icons on the right of an action items for a detailed description. Some of these items may be easy fixes. Other may be quite difficult. 

Web Page Speed Issues
Pingdom’s tips on improving page load speed performance.

Scroll down a bit further and you’ll see a list of content size by content type. Here you can see if there is anything that stands out. Every page is different, so it’s quite possible that you’ll still have a large percentage of the image content type, even after optimization. But, this can help you quickly uncover hidden issues if one type is exceptionally large. 

Content size by content type
Is one content type suspiciously large?

Google has a similar list of action items, called opportunities. Scroll down from the top of the page and look for that heading. As with Pingdom, you can click on the icon on the right for a detailed explanation.

Website Speed Optimization Opportunities
Google’s Website Speed Optimization Opportunities

Make note of all of these tips and opportunities, and work through the ones you think you can handle on your own.  

Website Speed Optimization Activities

In addition to the opportunities uncovered above, there are several basic activities you should take care of to ensure the fastest page load times possible. 

Minify Your Code

A computer doesn’t need spaces, line breaks, comments, and other unnecessary data to display a website. In fact, these things slow computers and phones down, as they require more data to be transferred and rendered. 

Unminified HTML code
Unminified HTML Code
Minified HTML Code
Minified HTML Code

To avoid unnecessary page load delays, use a tool to minify your JavaScript, CSS, PHP, and HTML files. Doing so will reduce the size of your files, allowing for faster page load times.

Compress Your FIles

Once you’ve done all you can to reduce the size of your website’s text files, you can compress the larger ones with Gzip. There are many ways to add Gzip compression to your text files, with each type of web server needing its own implementation. Here is some information about enabling Gzip for WordPress, Windows, Apache and NGINX servers.

The Most Efficient Website Speed Optimization Task: Compressing & Resizing Images 

The gains you’ll see from compressing your text files is nothing like the gains you’ll see when compressing and resizing your image files. It’s not uncommon for a website to shed several MBs of data by simply ensuring that image pixel dimensions match the display pixel size, and that a reasonable level of compression is applied to an image. 

You likely have multiple types of images on your website, including logos, icons, photographs, drawings and charts. Not surprisingly, each image type has its own ideal file type that offers the best combination of image quality and file size. 

Resize Images To Reduce File Size & Speed Up Page Load

It’s probable that the images on your site have more pixel data than what the user ever sees. Go through your site and see if you can find large offenders. You’ll want to resize these images before you save them in the correct file type, which is explained below.

Resize Images To Optimize Website Page Load Speed

For example, the photo of the dog in the image above is not optimized for fast web page loads. Instead, the photo is large enough to be a desktop background on a 4K monitor, not an inline image in a blog post. The original image was 401KB in size and 1800 x 1200 pixels. We resized the image and applied compression to gets its size down to 41KB, which is just 10% of the size of the original photo. The only thing a user would notice is the faster page load.

Vector Image File Optimization

For logos and icons, if you have a vector file, which usually has a .eps or .ai file extension, you can save it as a .svg file, which is a web-friendly vector file type. This way, your logo will always be crisp and clear, plus, .svg files tend to be extremely small in file size. You can also choose to use a font, such as Font Awesome to add vector icons and social logos, instead of larger individual images. 

Drawing and Chart Image File Optimization

Drawings and charts can often be saved as .gif or .png files. Each file type offers transparency, so you can place your images over complex backgrounds. The main difference between the two file types is that a .gif is limited to 8-bit, or 256 colors, while a .png supports 24-bit color, just like a jpg. Just because a .gif doesn’t support millions of colors doesn’t mean it’s a bad file type. If you have a chart or drawing with a limited color palette, a .gif can be the perfect solution, offering great looks and low file size. 

GIF file size vs. Jpeg
The .gif image type is over 3x smaller than the .jpg version of this infographic, without any loss in quality.

For .gif files, always try and limit the colors to the bare minimum to achieve the quality you want. Just because there are 256 possible colors does not mean you need to use all 256! Similarly, for .png file, you can choose between 8-bit and 24-bit color spaces, allowing you to reduce file size when the image is less complex. 

Photographic Image File Optimization

When it comes to photographic-quality images, or similarly complex images, a .jpg is usually the best file type option. Jpegs offer high image quality with relatively low file sizes. If your image requires transparency, a .png file is a great option, though be aware they get large, fast!

Use Jpg compression website speed optimization
Medium quality .jpg images can save a significant amount of space with little image quality issues.

Jpegs (and .webps) are different in that you change the level of compression, rather than the amount of colors to reduce file size. Usually a medium level of compression offers the best compromise between image quality and file size. 

There are also a few new image types out there that compete with jpeg, including .webp, This new file type offers lossy and lossless image compression, with transparency, with filesizes that are typically 25% smaller than their competing file types. 

Optimizing Animated GIF Images

Animated GIFs can be absolutely massive in file size. It’s easy to make a few second long, 50MB GIF and not realize it. You could perhaps reduce the .gif’s amount of individual frames, or color palette, but even that can only do so much without making your animated .gif look like a 1990’s MySpace GIF. 

Same size MP4 file

Same size GIF file

GOF vs Video quality and file size

In cases like this, why not convert your animated .gif to a much more efficient .mp4 video? As shown above, a .gif made to be the same file size as the original 24 frame per second, millions of colors video, is limited to 7 colors and 4 frames per second!

You’ll save between at least 10x the data that needs to be transferred, without any image quality losses. After all, the reason you wanted an animated .gif is because it automatically plates, and loops. If video can do the same at a lower file size, then you should use video. 

LucidVideo’s easy video embed will allow you to replace your animated .gifs with autoplaying, looping videos, massively reducing web page file size, and speeding up page loading time. 

Optimize WordPress Images Automatically

Smush is a free WordPress plugin that will automatically optimize all images on your website with just a few clicks. It does more than just compress images, so if you have a WordPress website, it’s worth a look.

Remove Unused WordPress Plugins

Does your WordPress website have a long list of installed and activated plugins? If so, give your plugin list a one-over. Look for plugins that you don’t use that are active, as well as rarely used plugins. If the tool is not actively helping you convert on your website, you should at minimum, disable it, if not uninstall it completely.

The fewer plugins you have running on your site, the faster it will perform.

Use JavaScript Sparingly To Help With Website Speed Optimization

Your web browser must execute all JavaScript tags on a page before it completes rendering a web page for the user. This wait can be compounded by linking to external JavaScripts, which must be downloaded, then executed, all while the browser (and the user) waits.

You can avoid some of these delays by using asynchronous or deferred scripts that are not rendered until after the page renders. Or, even better, remove unnecessary scripts from your pages. Are you using Google Analytics on your WordPress site? If so, you can disable WordPress’s analytics suite to speed things up. 

Treat your website like the VIP room at the club. Don’t let just any scripts in. The less JavaScript on your page, the faster it will load. If you must use JavaScript on your site, be sure to only load it on pages that need it, instead of site-wide.  

Optimize External CSS & Font Delivery

Just as external scripts must be downloaded before they can be used on your site, the same goes for CSS files and fonts. If you link to CSS files and fonts in your header, a browser must request and download that file before it can apply the styling. This can lead to delays, or worse, weird page loading glitches, where your browser temporarily renders your page without the stylesheet and fonts, then suddenly applies the correct look.

Inline your CSS with this JavaScript

Google suggests that you inline smaller stylesheet on each page to avoid the aforementioned issues. Alternatively, you can write a bit of JavaScript code to automatically inline your CSS file. 

Reduce The Total Amount Of HTTP Requests

Your browser can only download so many different items at the same time. Larger websites with many different files can see loading delays due to the sheer volume of HTTP requests for different files. Try reducing these requests by combining items such as external CSS and JavaScript files.

CSS Image Sprite
Example CSS Image Sprite to Speed Up Website Loading

You can also combine a significant amount of image requests by using a single image that combines all of the image elements you use on your site into a single file. This single image CSS sprite takes much less time to fetch and load than multiple flag images. 

Minimize Redirects To Speed Page Load

Have you ever clicked on a link, only to watch your browser bounce from page to page, finally landing on the destination page a second or two later? Frustrating, isn’t it? We’ve even hit the limit of redirects and not had a page load before. While those are extreme cases, you can speed up your page load by minimizing these redirects. 

If you ran a Google PageSpeed test, you will see how many redirects you have. Otherwise, you could check with the Redirect Mapper Tool to see how many you have. 

Let’s imagine you’re a marketer and you want to use a link shortener for your tweets. It’s quite possible you could introduce four separate redirects without even realizing it:

bit.ly/my-short-link -> www.example.com -> http://example.com -> https://example.com

Do your best to remove redirects like this. Instead, link directly to the correct URL.

Like the example above shows, never link to a page that has a redirect. In this example, a simple mistake caused four redirects, and a couple seconds of waiting due to a poorly formatted link shortener URL. 

Use A Content Delivery Network To Speed Up Web Pages

Content Delivery Networks, or CDNs, are collections of computers that store your content in advantageous locations throughout the entire world. They are used to speed up delivery of your web page and its media by hosting it close to the user on highly speed optimized servers. 

Some CDNs will help speed page loads by replacing HTML5 video with highly optimized streaming video. While others dynamically resize images to provide the fastest page loads possible. 

Cache Your Content For Faster Page Loads

Chances are that the majority of your site’s content does not change on a frequent basis. Sure, you add new images, pages, and videos all the time, but everything else created before that point is most likely not going to change for a long period of time. 

Instead of expecting a return visitor to redownload your entire site when they return to give your offer a second look, use built-in browser caching to speed up page loads. You can set an expiration date on your website’s content with the Expires HTTP Header. A good max-age for most content is one year. 

While caching does not help on initial page load, it will definitely help on subsequent page loads and return visits. 

Reduce Your Cookie Size

Did you know that local cookies must be sent to the web server when you re-request a page from the website that set the cookie. If you have cookies that are on the larger side, you could be slowing down page load with them. 

Optimize Cookie Size

Take a look at the size of your cookies with your browser’s developer tools. In Chrome, go to View -> Developer -> Developer Tools, then click on the Application Tab. This will show you the different cookies you have on your site. Select a source and then sort by size. If one looks big, you may want to look into if it really needs to have so much data. 

If All Other Website Speed Optimization Activities Fail, Get A Faster Server

If none of the tips above apply to your site, and you notice that the time to first byte is slow, maybe it’s your web server’s response time that is the culprit. Perhaps it’s time to go shopping for a new web host. Typically, the less you pay for a web server, the slower it will respond. As you add more to your hosting budget, you will typically get a faster server that gets your page to your users quickly. 

While a new server represents a large cost, as compared with the rest of the items on this list, it may be the most important website speed optimization activity you need to do. Sometimes all you need to get your website to load quicker is to have a faster server hosting your content.

Leave a Reply

Your email address will not be published. Required fields are marked *