When it comes to your website pages, size matters. The smaller the file size of a page, the faster it will load for anyone who requests it. Makes sense, right?
And people do notice how long a page takes to load. According to Akamai, a delay beyond two seconds can cause viewers to abandon a page -- and for every additional second after that, the abandonment rate increases by 5.8%.
Not to mention, Google had admitted to using site speed in web search ranking, as faster sites tend to create happier users. If that's not enough to make you reconsider the size of your pages, Google also recently announced that more Google searches take place on mobile devices than on desktop, where spotty internet connections and slow data speeds make it even harder to load large page sizes.
This means that in order to maintain a healthy page rank, your business needs to be focused on delivering a fast, optimized website experience across all devices. To ensure your website doesn't take a hit in traffic, this post will explain everything you need to know about page size and how to reduce it.
What's Page Size?
"Page size -- also called page weight -- refers to the overall size of a particular Web page. A page size includes all of the files that are used to create the web page: the HTML document, any included images, style sheets, scripts, and other media," according to Computer Hope.
How Big Is Too Big?
To help you benchmark the weight of your page, we dug into some performance tests run by the application optimization software company, Yottaa.
This July, Yottaa tested the browser performance of 25 URLs from different websites on the HubSpot COS using cable internet connections (in a Chrome browser) and 3G/4G iPhone connections.
The results indicated that the average weight of a page on the HubSpot COS was 2.43 MB. Considering a recent study from Soasta reported that the average weight of a page is now above 2 MB, this number appears to be in line with the current web trends.
However, keep in mind that the weight of your pages will vary depending on your company or industry. If you have an ecommerce website with a wide variety of photos, it's likely that you can anticipate a larger page weight. But in general, you should aim to be at or below the average.
5 Tips for Reducing Page Size
1) Resize and Compress Your Images
When it comes to page weight, images are one of the largest contributors. If you're looking to downsize, you'll want to start by resizing any unnecessarily large images.
When uploading photos, keep in mind that the image dimensions should never be greater than the size of the container. If the container has a maximum width of 500 pixels, there's usually no reason to upload a 1,000 pixel-width image.
But let's say you'd like to offer a high resolution image people could share and download -- what should you do? We recommend uploading a picture that's exactly the width of the container it's in and hyperlinking it to the high-resolution version to avoid weighing down your page.
Aside from image dimensions, you can further shrink the size of an image by compressing it. Compressing an image helps reduce its file size, which ultimately helps to reduce the time it takes for a page to load.
If you're looking for a compression tool, these are some of our favorites:
If you're a HubSpot user, you're in luck: The HubSpot COS features automatic image resizing and image compression.
"If a user uploads an image that has dimensions of 5,000 x 5,000 but is only displaying it on the website as 500 x 500, then using auto image resizing will help decrease browser load-time. Image compression, on the other hand, decreases the file size while retaining the quality of the image that was uploaded," explains HubSpot's Maggie Himba.
Of course, the easiest way to slim down the weight of your page is to eliminate as many unnecessary images as you can. But for the ones that need to stay, the tips mentioned above should do the trick.
2) Use CSS Sprites
So now we know that having a ton of images -- especially large ones -- on any given page is going to increase the page weight and slow down the load time, right?
This is because every image generates a server request, which slows down the entire process.
Enter CSS sprites.
A CSS sprite refers to a collection of images that are combined to create one image file, according to W3School. Then, you use CSS to only display the part of the combined image that you'd like to appear. By doing this, you're reducing the number of server requests necessary for the page to load.
To clarify, below is a more visual explanation. Example A include separate image files for each of the browser icons, totaling 70.7 KB. Example B uses CSS sprites -- one image that uses CSS to display portions of that image -- to show the same exact information. The total size of those images is less than half of Example A.
Source: Tutorial Republic
3) Remove Unnecessary Custom Fonts
Custom fonts are fun.
They add personality to your pages and help to differentiate your business from everyone else. However, the trouble with custom fonts is that that they can carry some weight.
"If a web developer uses a custom font and the user doesn’t have the font installed on their operating system, then they’ll need to download the web font file(s) along with the rest of the website," explains Parallax's Andy Fitch.
"For example, Twitter includes Gotham in three different weights -- light, book, and medium. These weigh in at a total of 154KB."
Point being, if you're looking for any easy way to trim some weight off your page, you may want to reevaluate the number of custom fonts you're using. While a couple won't hurt, using them in excess could hurt your page speed.
4) Minify Resources
Could one of your resources be reduced through minification?
"Minification refers to the process of removing unnecessary or redundant data without affecting how the resource is processed by the browser -- e.g. code comments and formatting, removing unused code, using shorter variable and function names, and so on," explains Google Developers.
According to Google, here's how you should approach minifying your resources:
HTML
Generate an optimized version of your HTML code using the PageSpeed Insights tool. Use this analysis to run your HTML page and browse the 'Minify HTML' rule. Finally, click 'See optimized content' to access the minified HTML code.
CSS
Check out the following tools:
JavaScript
Check out the following tools:
5) Use a Content Delivery Network (CDN)
A content delivery network refers to "an interconnected system of cache servers that use geographical proximity as a criteria for delivering web content," according to TechTarget.
What does that mean? And why should you care?
Let's say that all of your website's elements are stored in Boston, Massachusetts. That's great news for the Bostonian's -- or anyone in the United States -- who are trying to access your site pages. But what about that loyal visitor all the way over in London? It's likely that it's going to take noticeably longer from them to load your pages just because of where your server is located.
A CDN aims to resolve this by storing your website's elements in multiple locations around the world to ensure that everyone has a fair shot at a speedy load time.
Note: While this step won't necessarily reduce the weight of your page, it will help to improve its speed -- which is what we're really after anyways, right?
Ready to Weigh In?
Before you can apply these tips, it's best to start by getting a feel for what you're working with. To test your website's speed and size, check out Web Page Analyzer from WebsiteOptimization.com.
And if you want a more detailed report of your website's overall performance, check out HubSpot's newly redesigned Website Grader. You'll receive a free personalized report that grades your site on key metrics including performance, mobile readiness, SEO, and security.
What are you go-to tips for reducing page size? Let us know in the comment section below.
No comments:
Post a Comment