At this time of year, it’s only fitting that we address the most common New Year’s Resolution as it pertains to our industry: losing weight. It’s no surprise gym attendance spikes a week after the champagne pops and the ball drops.
I think you have an idea where we’re going here.
Lighter means faster for websites, and faster pages perform better in search results, improve user experience, and most importantly, boost online revenue. For developers, dropping weight isn’t a tired promise made on January 1; it’s a goal necessary to keep customers as user patience dwindles. When 25% of users abandon a webpage if its load time is more than four seconds, improving page speed is paramount.
We’re not suggesting you hastily strip your site down to shave off a few seconds. The other 75% of users are willing to wait a little longer and expect an engaging, feature-rich site. By identifying and eliminating unnecessary downloads that may weigh down your site or impact user experience, you can improve page speed and reliability without sacrificing important functionality or aesthetic appeal.
Just as you wouldn’t urge a friend to stop eating to drop a few quick pounds, we recommend you resolve that you lose unnecessary page weight (and keep it off) for a faster (and stronger) site.
So how do you achieve your resolution? Diet, Exercise, and Tracking.
Assess Your Diet
You know the saying, “You are what you eat”? Well, the same is true for webpages – “You are what you download.” Unless cached, all those images, fonts, ads, and widgets have to be downloaded before they are rendered by the browser, adding to its weight and load time.
Just as nutritionists recommend taking an inventory of your daily calorie intake, we suggest performing an assessment of your pages and every asset they’re loading. Based on your KPIs, measure and assess the performance of each element throughout the day and during periods of peak traffic. Use these measurements as a baseline before eliminating elements or performing optimizations. Remember, you can’t change what you don’t measure.
A) Measure its Impact |
B) Assess its Value |
| Is it blocking other elements? | Is the data it’s collecting being used for analytics? |
| Is it a significant bottleneck to rendering? | Does it drive user engagement? |
| Does the element experience frequent failures? | Does it lead to conversions? |
| Does it take a long time to load relative to the other elements? | Is it a critical load component to an oft-used navigational path? |
| Is the user unable to interact with the page before it loads? | Is it driving revenue? |
| Does it cause other network requests to be triggered? | Does it have a positive effect on page aesthetics? |
Cut Out the Frozen Burritos
If you answered “yes” for the majority of column A questions, but “no” for column B, then the element or feature that you measured has a negative effect on performance and is not an integral part of your business plan. It’s unnecessary, so just eliminate it. Those frozen burritos you’ve been chowing down after work might be convenient, but they’re tasteless, bad for you, and…unnecessary. Cut ‘em out of your diet.
Have Your Cake and…
If you answered “yes” for the majority of the questions in both columns, then the element or feature may have a negative effect on your performance, but users love it and it’s great for business. It must stay. However, depending on the type of element, there are ways to reduce its negative impact on your performance.
Portion Control
You might not have the ability to drop chocolate from your diet, but you can consume it in healthier doses and forms. Same goes for your ‘must-stay’ assets. Minimizing images, ads, personalization, content optimization, tracking pixels, and other elements speeds up the rendering of the page on the browser and reduces load on the servers.
Image Optimization
While images may look spectacular, they comprise an average of 64% of a webpage’s data, which is a lot of weight. Fortunately, there are several ways to compress, reformat, resize, and edit images to lower the number of downloaded bytes.
This includes using CSS sprites, applying lossy and lossless optimization, removing unnecessary metadata from images, choosing optimal image formats, lowering the quality of images where possible, using individual image compression tools, and scaling images to fit the size of the screen where they are displayed.
To make your life easier, automating image optimization using tools like Grunt or Smush It can do many of the aforementioned optimizations in order to reduce the weight of images on your site without removing them completely.
Text-based Content Compression
Use GZip compression on all text-based content (HTML, XML, JavaScript, CSS etc.). But be careful to not GZip files that are binary or already compressed, like images.
Minification
Minify JavaScript and CSS and only serve JavaScript and CSS that is relevant to the requesting platform. Serving up CSS, Images, and JavaScript that are designed for the desktop version of the site to mobile users will increase the load time and lead to customer frustration.
Asynchronous Loading
By deferring the loading and execution of JavaScript whenever possible (as long as it’s not the key element on the page), you can reduce the initial download size and speed up the rendering time of the page. Additionally, it prevents the element from being a Single Point of Failure (SPoF) – a page element that, when slow or unable to load, blocks the rest of the page from rendering.
Reduce HTTP Requests
Images, scripts, and CSS files require additional HTTP requests to the web server, which can slow your page down. These requests are unnecessary when you can combine multiple files into one that requires a single request. This means – where you can – combining multiple scripts into a single script, multiple stylesheets into a single stylesheet, and multiple images into a single image. Use images maps and CSS Sprites to reduce your HTTP requests and load time.
Diet – Check. Time for Exercise.
Once you’ve eliminated unnecessary assets and minimized others, there are even more web performance exercises that you can perform to further improve your page speed metrics. Here are a few:
1. A Content Delivery Network (CDN) will reduce latency by placing content closer to your customers. By moving JavaScript, CSS, Images, Flash, etc. to a CDN, it will create faster round trips and thus less load time.
3. Enable HTTP Keep Alive (Persistent Connections), allowing for TCP connections to each domain to remain open until they are forced to close. This reduces the CPU and memory usage on the web server as fewer connections are open simultaneously, and also reduces latency in subsequent requests.
4. Domain Sharding is also another simple performance win by serving up content from an additional domain. You do not need different servers to do this; just create a CNAME, as the browser does not care about the final IP address, only that the domain names are different. The recommended and well-documented optimal number of domains is two.
Monitor Your Progress
As is the case with personal health, performance is an on-going journey. Now that you’ve trimmed your site down, you need to keep the “weight” off.
Keep checking labels – Before implementing a new element on your site, test and make sure it’s impact on performance is negligible and doesn’t introduce a significant vulnerability.
Exercise regularly – Keep an eye out for areas to optimize. New marketing campaigns and site additions introduce performance challenges, so keep performing optimization exercises and make sure you don’t “slack off.”
Keep Track of Your Measurements – You have your baselines, you know your KPIs; now you need to keep monitoring your web performance in order to retain your improved speed, availability, and reliability in 2015 and beyond.
The post Catchpoint’s Website Weight Loss Program appeared first on Catchpoint's Blog.