SPRINGBOX / Insights

Five Simple Ways To Speed Up Your Website

by Springbox, June 10, 2015

There’s a good chance you’re reading this (along with pretty much anything else you’ve read online lately) from a mobile device. Mobile internet usage overtook desktop usage in early 2014, and in the year since, that trend has only accelerated.

In the same timespan, the average amount of data on websites has grown from around 1600 kilobytes to over 2 megabytes per page. Since Internet speeds aren’t growing at a similar rate, it should come as no surprise that the site has slowed to a crawl when downloading content.

An average LTE connection in the United States hovers around 6 Mbps (different networks and coverage areas can affect the speed individual users may have on an LTE connection), so the average web page in the United States at the average mobile LTE speed in the United States will take about 3 seconds to load.

While 3 seconds may not sound like much, this delay in accessing content will lead your mobile users to abandon the site. Surveys have found that around 47% of mobile users expect pages to load in 2 seconds or less, which implies that the US average will drive around half of your mobile visitors away.

Fortunately, there are some quick and easy ways to get your content to your users faster.

Make sure all text-based files are gzipped

zip4The gzip algorithm is a simple way to reduce file size of text-based files. First created in 1992, gzip can quickly reduce the amount of data being sent by compressing files on the server and relying on the user’s browser to uncompress them. Tests have found that gzipped content can reduce the amount of data being downloaded from the server anywhere from 15% to 35%. Taking our hypothetical 2MB unoptimized site, rough math shows that you could turn that download to 1.78MB to 1.36MB.

Of course, not all data can be gzipped. Multimedia, such as images and videos, can’t be gzipped, and any third-party content such as ad trackers or Javascript libraries hosted elsewhere are outside of your direct control. However, locally-hosted HTML, CSS, Javascript, JSON or XML data files, CSVs, or any other text-based content can be gzipped.

Learn how to enable gzip on your Apache server through mod_deflate, your NGINX server through http_gzip, or your IIS server through the administrative panel.

Concatenate and minify styles and scripts

glueBy enabling gzip, you’ll be getting the most performance out of your existing files. Unfortunately, gzipping won’t reduce the number of files you’re downloading on a page, but just the sizes of those files.

The next step in optimizing your site is by concatenating and minifying your CSS and JS files. A typical modern website will have several CSS3 techniques that can only be supported by browser prefixes, several third-party Javascript frameworks, such as jQuery, potentially extra CSS files provided by these frameworks, and the site’s own styles and scripts. In order to successfully render the page, your poor browser will have to download all of these files and parse them individually to give the page’s look-and-feel meaning.

Basically, concatenation and minification simply means that you are gluing all of your files together and stripping out all of the characters not necessary to parse your files. Manually doing this every single time you make a single change is time consuming. Here at Springbox, we use Grunt, an automated task runner, to handle all of this grunt work (get it?).

Learn how to use Grunt to concatenate and minify your CSS and JS.

Leverage browser caching

silhouette107OK, so you have streamlined all of your scripts and made sure that they are gzipped, reducing both the number of files that need to be downloaded and the size of those files. How can you further reduce your page load times?

While this is not true in all cases, most web sites consist of multiple pages. While the underlying content on those pages may be different, almost all of them will use the same styles and scripts to actually give visual meaning to that content. This means that your browser is making requests for the same content on every page. By setting a good caching policy, you can make a user’s browser use a local copy of the file, instead of forcing them to re-download an asset they’ve already downloaded once.

Check out Google Developer’s caching guide to learn more.

Remove render-blocking scripts

web2Most scripts don’t need to be in the <head> tag. Instead, scripts that don’t have anything to do with content can be placed right above the closing </body> tag, allowing all content to be downloaded before any scripts.

This is not always the case though -- some scripts are required to be higher up on the page, either because they actually provide content or because they’re needed to queue up necessary functionality. When moving scripts to the bottom of a page request, it’s best to consult any documentation on third-party libraries.

Use a Content Delivery Network

connection27At this point, you’ve optimized as much as you can on your page and from your server, but some users are still complaining about slow download times. What can you do about that?

Using a content delivery network (CDN) will help address issues by relying on a third-party server to deliver assets (such as images, scripts, and styles) to your users. CDNs are usually on faster networks, so these larger assets will be delivered quicker. CDNs are also geographically distributed, so there’s a shorter physical distance between an end user and the server delivering assets. And finally, because CDNs are physically located on other servers, your user’s browser can concurrently download your content and assets from different servers.

Learn more about using content delivery networks.

Curious to learn more?

Want to know more about optimizing your site? Have questions on how you can improve your page load times? Springbox can help. Contact us to learn how we can help you streamline your site!