Reduce Page Load Times
Ensuring a smooth end user experience with short page load times - whether for shopping online, reading the news, or collaborating on software - is one of the main reasons Fastly customers use our Content Delivery Network. Viewers' expectations for page load times have become increasingly demanding. Internet users currently expect pages to load in two seconds, and higher page load times can result in lower Google search rankings, increased bounce rates (each additional second can increase bounce rate by 65%), and lost revenue due to abandoned shopping carts.
What’s more, mobile devices like tablets and smartphones have quickly become primary web access devices, but viewer expectations about accessibility haven’t changed. They still expect the same speed and quality whether on a home computer, a cellular-based tablet, or smartphone. Reducing latency remains a critical component of a well-developed site in today’s world.
Many tricks of the trade can help accelerate your website. Using a CDN like Fastly is obviously one of them. Reducing page load times is another, and yet it’s often overlooked. So how do you go about it? Simple: reduce the number of objects called in your HTML, control what and how they are named, and minimize the payload size – the requests, responses and metadata (the headers and cookies) that are associated with those HTTP requests and responses.
Where to Start
Always measure how long it’s taking to load one of your pages. To understand your page load times, you need to understand what your pages are made of: each page contains objects, scripts, and other items that must be loaded in order to appear correctly in a viewer’s browser.
We use a number of free tools like WebPageTest.org , Yahoo’s YSlow browser add-in, or Google’s PageSpeed Insights Browser Extensions to measure load times (several fee-based services can do this for you too). Using these tools to examine your site’s pages may point out several not-so-obvious things you can do to reduce page load, eliminate unnecessary overhead, and speed up overall load times.
Minimize Request Overhead
In the HTTP world, when a client sends a request, they also send other data along with the actual object request like cookies, control headers, and metadata. To minimize the overhead each request creates, consider serving your static content from an additional host that doesn’t require cookies. Cookies average around 1KB, and remember that they are sent with every request. If your site is full of small, static objects - including JavaScript and CSS files
that are requested frequently, that’s a lot of cookies. This creates a lot of unnecessary overhead. Also, keep your cookie sizes as small as possible and remember to remove duplicated or unused cookies that may have been inherited from other parts of the site.
Keep Host and Domain Names Short
Many websites use very large hostnames, like images.customer-cdn.com. Of course, these hostnames are going to be called many times throughout the page for each object, so when choosing your domain and hostnames, consider keeping them short, (e.g., i.cuscdn.com). Again, this has the impact of reducing the amount of data that has to transit the wire in order to fulfill the request from the origin server (or CDN).
Remove the Junk from Your HTML
This may sound obvious, but remove anything on your web pages that’s not being used, is old or deprecated, or just plain isn’t necessary to load the page correctly. Fewer bytes in the HTML means fewer bytes having to travel the wire and be rendered by the browser.
Remember that this is just a start. If your site is serving lots of small objects, and your viewers are generating many requests, reducing the page load by even a few bytes here and there will help reduce latency, and ultimately provide your users with a better end experience. With a CDN like Fastly, this is easy to do.
