In our hyper-connected, digital world, speed is more important than ever. We don’t like to wait, especially on the internet. You may have a beautifully designed site with a great user experience, but if it loads too slowly, then all that hard work can be in vain. With attention spans shorter than ever, you have just seconds to grab your audience. A study by Google found that 53% of mobile website visitors would leave a site if it takes longer than three seconds to load, proving that every second matters.
Here are some advanced options to speed up your site and keep visitors on the page.
Optimize Images and Videos
Hosting videos and high-res images on a website can be a great way to engage visitors, but they can also significantly slow down a web page if not optimized correctly. Photos and video are usually the largest data hogs on any web page, accounting for two-thirds of an average web page’s total size. For that reason, you’ll need to balance the visual needs of your site with keeping your page weight as light as possible. You can learn more about page weight and the impacts of images and video here.
In general, JPEG files take up less space than PNG files, especially for photos. PNG images are usually preferred for graphics that tend to have large areas of uniform colors, such as logos. WebP is a more recent image format that achieves an average of 30% more compression than JPEG, without loss of image quality. GIF images should be avoided and replaced with PNG images, with the exception of animated GIF images.
There are also a number of simple tools used to compress images, such as Imagify and ShortPixel that integrate seamlessly with WordPress sites. Check out Shopify’s 10 Must Know Image Optimization Tips to find additional tools that can easily be applied to any website.
Adjust Load Order
The order in which your content loads can also impact your site’s speed. By default, browsers load any files in the <head> section of your website synchronously, or one at a time. As the browser loads from top to bottom, bulky CSS or Javascript files can slow down the loading process. Additionally, there’s a limit to the number of images a browser can load at a time. Here a few methods to get ahead of these issues:
- Asynchronous Loading – Allows your browser to simultaneously load other elements on the page while these larger CSS or Javascript files load.
- Deferred Javascript – Javascript files load after all other files are completed so the user can more quickly load the page.
- Lazy Loading – Browser loads content at the top of the page first, then subsequently loads the rest of the page’s content. Lazy loading is especially helpful for pages with lots of images, such as a blog post with a large photo gallery.
- Just Move It To the Bottom – particularly useful for third-party widgets, if the code is not required to run at the beginning of the page load, simply moving the script to the very bottom of the web page (just before the </body> tag) can have a big impact on page speed.
If your site is on WordPress, you can enable asynchronous loading, Javascript deferment, and lazy loading with the WP Rocket plugin by checking one or both options under the “Static Files” tab. Always test your site to ensure the page loads correctly. For more on WordPress optimization, check out How to Fix Render-Blocking JavaScript and CSS in WordPress.
Reduce HTTP Requests
Every time a user visits your site, their browser needs to make an HTTP request to load each file on the page. The more files to load, the more requests needed. Excessive HTTP requests can significantly slow down your site, with Yahoo finding that HTTP requests account for 80% of a site’s total load time.
You’ll first want to know how many HTTP requests your site is making, which you can learn using Google’s Developer Tools. Simply right-click and choose Inspect on the menu. Click the Network tab to see how long each page element takes to load and the amount of HTTP requests your page makes.
For sites run on WordPress, you can use a tool like Autoptimize to minify and combine your CSS and Javascript files, dramatically reducing the number of HTTP requests. Plugins like Autoptimize and WP Rocket can also optimize your CSS and JavaScript code files for you, reducing both the size and number of HTTP requests being made.
Reduce DNS Lookups
Before an HTTP request can be carried out, your site needs to perform a domain name system (DNS) lookup. A DNS lookup translates a URL into an IP address, denoting its online location. Once the associated IP address is found, the user is able to access your site, making this step crucial in terms of speed. A slower DNS connection will decrease the time it takes a server to carry out a response, meaning precious seconds being wasted.
If you find your connection is slowing down your site, consider opting for a faster DNS service. Visit SolveDNS to check your site’s DNS speed and compare with other services using this helpful chart.
Use Only Necessary Third-Party Scripts
Third party scripts refer to any scripts embedded on your site from a third party, which includes social sharing buttons, chat widgets, ads, and more. Nearly 94% of websites use third party scripts because they can be a useful way to make your site more dynamic and interactive. However, hosting too many third party scripts can cause some serious lag time since they involve more HTTP requests and contribute to increased page weight.
You can perform a performance audit to see whether third party scripts are dragging down your site. The audit provides a list of third party scripts running on your site and the amount of space they occupy. Remove any scripts that hog space and won’t affect the functionality of your site, or scripts that ask the services to optimize their code. You can also lazy load third party scripts if you don’t want to remove them but still want a speed boost. After managing your scripts, be sure to test your site, both to compare speeds and to ensure the page still functions properly.
Compress Files
As discussed above, when a user sends an HTTP request, your web server transfers data to the user’s browser. Using Gzip file compression can reduce the amount of data sent across the internet by up to 70%, thereby reducing the amount of HTTP requests and ultimately increasing your site’s speed.
Gzip cuts out redundant code to reduce file sizes, working especially well with CSS and HTML, files that typically feature lots of text and whitespace. For WordPress sites, Gzip compression can be enabled using the W3 Total Cache plugin.
