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
The 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.
Concatenate and minify styles and scripts
By 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.
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?).
Leverage browser caching
OK, 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
Most 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
At 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!