When it comes to surfing websites, a web page size is an essential attribute for the success of your website. The more you minimize the size of a web page file, the quicker the page will load, and the longer your visitor will stay.
Site speed is determined by many factors such as the speed of the internet connection – 3G or 4G bandwidth on mobile phones. When we talk about the elements that define the speed of a website that web developer can control, it mostly relies on the size of the web page and things like images, java script, graphic icons, fonts, and videos.
The Effects of Having an Overweight Web Page
An overweight web page affects your user’s happiness. Google revealed that they use the website speed as a criterion when ranking web pages in search results (SEO).
According to Kissmetrics customer analytics platform, 47% of online users suppose a web page will load in 2 seconds or less. Akamai Technologies, the American content delivery network (CDN), also stated in a study they conducted, that users left web pages when they encountered a delay that went beyond 2 seconds, every extra second of waiting after that resulted in a 7% reduction in conversions.
Financially, an e-commerce website that makes $100,000 per day, will lose $2.5 million yearly for every 1-second page delayed. Overweight web page will starve your business.
The Average Web Page Weight
According to HTTP Archive (httparchive.org), the average web page size in 2016 was 2232 KB.
Our creative lead at Netaq, who designed plenty of websites for renowned establishments such as Honda Middle East, said he does not share the same belief but would not mind implying the same methodology of average page weight that statistics and research suggests. He also mentioned that page sizes depend on the techniques used when developing and designing a website.
The business needs will determine the creative path of designing a website.
The Techniques of Controlling Web Page Weight
1. Image Optimization
Reducing page weight can be achieved by using many different techniques, but it is important first to begin optimizing the images since they account for the heaviest elements in a web page size.
Optimizing images can boost site speed. The fewer bytes a web page has to download while displayed, the less pressure you will put on your users’ bandwidth and the faster the browser will render meaningful content.
Find the ideal settings for your image through carefully analyzing it among many dimensions. Format capabilities, content of encoded data, quality, and pixel dimensions. Try to exclude additional image resources, make use of CSS3 effects where possible, implement web fonts rather than encoding text in images and your page will feel light.
2. Using the Lazy Load Plugin
The lazy Load plugins help in boosting the performance of loading images in long web pages since it works on loading the images that are located in the user’s viewport, while images that are located outside the viewer’s viewport will load only when the user scrolls down. This will lessen the pressure the page size will add to the user’s bandwidth. This effective tool is highly used and recommended on image-heavy websites.
3. Creating a Black & Weight Version
Another useful technique of reducing a page weight is by creating two versions of the same image you ought to display, the first is black and white images and the other version is a high quality colored one. Depending on how slow the internet connection is, the black and white images will load first till the internet connection gets a little traction and loads up the high colored one.
This technique will allow your user to get to your website faster read the content he seeks faster to provide a better user experience and lower bounce rate.
4. Eliminate the Unnecessary Extra Weight
After you work on optimizing images, focus on eliminating unneeded scripts or frameworks, choose fonts that will load faster and you will be ready to go.