Front-End Optimization Tips — Quick Hits for Immediate Website Performance
by Marko Stankovic, Marketing
Today’s websites are highly complex applications that typically put together hundreds of different pieces from dozens of different sources. These disparate pieces include text, images, scripts, API calls, advertising, and analytics snippets, just to name a few.
One way to accelerate the delivery of a web page is to improve the underlying delivery architecture by using a CDN. A CDN moves all of these different web page pieces closer to the end-user, and provides adequate bandwidth.
Another way is to restructure the actual web page content and code for optimal delivery. Front-end optimization focuses on the latter.
Here are some quick hit front-end optimizations that will instantly improve your website’s performance:
Minimize HTTP Requests
Almost 80% of web page load time is spent on retrieving all the components of a page. By reducing the amount of content that needs to be retrieved, you can greatly reduce web page load times.
A sprite is an image that’s comprised of multiple images on one “sheet.” Smaller navigation images, logos, UX components (arrows, icons, etc.), can be easily combined into one large image and displayed using the CSS Background-Image tag. Here’s a handy CSS sprites guide to get started.
Utilize a Cache-Control Header
Browsers have their own caching engines to automatically reduce the number of HTTP requests they have to make. When you open a web page you’ve previously visited, a browser will try to display content it has previously downloaded instead of retrieving the same content from the web server. However, if your website isn’t correctly configured, the browser doesn’t know whether the content it already has is stale so it will go and retrieve the same content anyways.
By setting a max-stale time in the Cache-Control header, you can let the browser know that it can continue using the downloaded copy if it doesn’t pass a certain age. For example, setting the max-stale at 30 days for images will tell the browser to use the images it has already download from a previous visit unless they’re at least 30 days old. Click here to read more about Cache-Control headers.
By compressing images, html, and scripts, the overall payload that needs to be transferred can be greatly reduced.
Images can be losslessly compressed (lossless compression does not affect the image quality) using certain imaging programs or processing scripts. This website can be used for compressing PNGs.
HTML, CSS, and other scripts can be minified, which means removing unneeded spaces and lines. Also, enabling GZip compression can significantly speed up the load time of a site. Enabling GZip differs depending on server, here is a sample GZip configuration for Apache.
Verizon Digital Media Services is a company of engineers and developers who are passionate about building a faster web. That’s why we integrated Google’s PageSpeed technology directly into our edge servers to provide on the fly front-end optimization. All of the above performance optimizations and over 20 more are seamlessly integrated into our CDN in order to ensure our customers have the best performing websites.