In 2018, Google announced that it is including loading times for all sites, including mobile sites, as part of their online search rankings.
Page weight is basically internet gravity that slows load time. Several forces affect your website’s performance and user experience. The way to lessen the drag is to reduce pageweight or reduce page size.
The Impact on User Experience
Webpage weight affects load time directly. A heavyweight page takes longer to load. The users’ local internet connection is often the cause of the bottleneck.
So, a lighter-weight page will load more quickly than a heavy one during high-traffic times. Unfortunately, users are sensitive to load time. Even fractions of a second matter when it comes to holding a visitor’s attention on your site.
Heavy pages perform poorly on less capable devices. Not all smartphones have the same quality. That and new releases come out so rapidly that most of us are one generation behind.
Thus, reduce page size to improve user experience. It primarily serves those with less capable devices.
How to Reduce Page Weight
Because there isn’t much you can do about the internet traffic at large or users’ network connectivity. So, the only way to tackle the pageweight problem is to keep your website pages light. Here are some tried and true methods to do that.
Images are generally the greatest culprit when it comes to page weight to page bloat. Optimize your images by compressing them and adjusting the quality level.
Higher compression reduces quality, though you can usually strike a balance that leaves the images looking as they should. You can compress background images in particular without users noticing any difference in quality.
Image compression technologies improve all the time. Keeping up with them pays off in the long run. Google has an open source JPEG encoder called Guetzli.
Guetzli compresses JPEG images to file sizes 35% smaller than some of the other tools on the market.
Use an Optimised Palette
If you are using a palette or indexed-colour image like a GIF or a PNG, you can choose an optimised palette to aid in reducing file size.
Image manipulation programs enable you to select the bit-depth or number of colours in the image palette. Sometimes, a PNG8 will work instead of a PNG24. The result is a smaller file.
Strip Metadata from Images
You can further optimize and image by stripping EXIF image metadata. Exchangeable Image File Format (EXIF) metadata.
EXIF metadata includes information like the time and date of the image capture, copyright information, camera settings, and even GPS coordinates. You don’t need this information to display the image.
Metadata stripping removes the least amount of weight. Though, you may find it worth the effort to make your pages as light as possible. Free tools are available like TinyPNG, ImageOptim, JPEG Optimizer, and PNG Gauntlet,
Use the Correct Image Format
Using the right format for your images matters as well. Below are the guidelines for the most common image formats. If needed, convert the original file to the appropriate type below.
WebP is a newer format by Google. Chrome and Opera support it. It is about 25%-34% smaller than JPEG images. The drawback is that Firefox, Safari, and IE/Edge do not yet support WebP.
JPEGs are best to use if your image is a complex scene or a photograph. PNG files are suitable for those images with straight lines. They also work great when you need transparency. Avoid using for photos.
SVG images are vector images, so they scale well. They also support transparency as well as animation. Use for logos, geometric images, and icons. They stay sharp on different screen sizes, including Retina screens.
GIFs are inefficient files unless you need them for animation. Finally, BMP files are not recommended for use on the web.
Resize Images
You should resize an image to the size at which you will display them online. There’s no reason to have the browser size the image, especially if you want it smaller than the original. Resize it to save bandwidth.
Now, it’s also recommended that the image displays resized for the device viewing it. Given the thousands of screen sizes out there, that’s not practical. Luckily, workarounds exist.
You can use device detection solutions like DeviceAtlas or PageSpeed. Or, you can use a free online image resizing service.
Use Responsive Images (srcset)
Using the image element’s srcset attribute, you can specify multiple of images at different sizes for viewports of different sizes.
The browser will select the most appropriate one and resize it to match the dimensions needed for display. Responsive design significantly reduces page weight.
Lazy-loading Images
A lazy-load an image is one that does not load until it’s in the viewport. If the user doesn’t scroll down, the image won’t load and take up bandwidth.
This doesn’t reduce the size of the page, but it will reduce the number of downloaded bytes, which makes the website perform better.
Some tools and plugins for lazy-loading include PageSpeed for web servers; BJ Lazy Load and Lazy Load for WordPress; and bLazy for Javascript, to name a few.
GZIP Server Compression
All servers can compress the text files in your website before sending them to the browser. This reduces the amount of data sent to the browser. The result is performance gains.
More than likely, you already have GZIP enabled on your server already. If not, take the time to activate it through the configuration options.
Minification for Text Files
Minification means minimizing the size of text files. Do this by removing unnecessary characters such as newline characters, whitespace, and comments.
You can reduce your file sizes by 30% or more. You can minimize CSS, JavaScript, SVG, and HTML.
Many minifying tools also substitute shorter function and variable names to reduce file size even further. You can minimize text files that you have already GZIPped as well.
Consolidate JavaScript and CSS
In addition to minifying HTML, JS, and CSS files, you should also aggregate your CSS and JS. Instead of making a separate request for each, the browser only needs to make one.
This reduces page weight by eliminating the HTTP associated with each request, as well as cutting the extra time required for additional requests.
Tools like Grunt and Gulp can perform this task automatically and whenever you make changes to your files.
Caching
Caching reduces the requests made to a server. The pages download only once. They don’t download again unless the page changes or a certain amount of time passes.
You can choose how long a resource remains cached by setting cache headers. If the browser has less to download, it will load pages more quickly.
Avoid JavaScript and CSS Frameworks
Frameworks can add page weight because they often fetch multiple resources, including additional JavaScript libraries and images.
Measure page weight before and after frameworks and libraries to your pages to understand their impact.
Avoid Embeds
Embedded objects can wreak havoc on page weight as well. YouTube videos, embedded social media icons, and Twitter feeds all carry a hefty load.
For example, YouTube video adds an extra 574KB to your page. Twitter adds 74KB for a 140B tweet. Choose your embeds wisely.
Avoid Page Clutter
You may not need your sidebars and menu buttons on every page. Mobile users especially prefer just the core content for ease of reading. Sometimes a fast loading page is better than a feature-rich one.
Content Adaptation
Sometimes, having separate versions of web pages for different devices has its merits. Yes, it does require more development and maintenance time.
Though, an entry point for mobile visitors helps keep down page weight. If you built your site using a CMS like WordPress, there are mobile plugins that generate a lighter page for mobile visitors.
Ready to Optimise?
This article covered techniques you can use today to get your website’s page weight down. It’s not a comprehensive list by far. Though, just implementing the image optimizing suggests alone should lighten up your site considerably.
If you have any questions about optimizing or reducing page weight, please contact me.
