Table of contents
- How does page size work?
- Why is page size important?
- Page size best practices
- Page size optimization for WordPress
- Page size optimization for Wix
- Page size optimization for Shopify
How does page size work?
All these files have different sizes that, when added up, equal the page size. For example, the page size for a web page that is made up of a HTML document that is 110 KB in size, an image whose size is 223 KB and a sheet file whose size is 87 KB will be 420 KB.
Web page sizes have been growing steadily over the years. The first web page on the internet was only 4 KB in size. This was particularly because browsers back then did not support a lot of things that they do today. For example, it was not until 1993 that browsers began to support images. According to httparchive the average web page size in 2017 was 3 MB. This is a huge increase from the 1.6 MB average of 2014. It is predicted that the average page size will be 4 MB by 2019.
According to Pingdom’s Average Webpage in 2017 report, an average 819 KB was dedicated to video and 1,818 KB for images.
Google recommends 500 KB given that 1.49 MB takes seven seconds to load using a fast 3G connection. Also, if you upload files that are larger than 500 KB to your website, then the Google crawler will not be able to crawl anything above its 500 KB size limit.
Why is page size important?
Page size does matter when considering the search engine ranking for your web pages. It will not only affect the ranking of your website but also the performance of your site. Some of the reasons you should focus on the size of your web page include:
According to Google webmasters, load speed is one of the factors considered when ranking web pages. Pages that load faster rank higher than slow-loading ones. This is particularly because slow pages are not useful to most people given their higher bounce rate.
According to Neil Patel, about 40% of site visitors will leave a website if it does not load in three seconds. How does this relate to the page size? According to a Yottaa report, page size directly affects the load speed of a web page.
The increased use of smartphones has positively affected the use of mobile phones in browsing the internet. In 2015, Google announced that for the first time the use of mobile phones to conduct online searches had overtaken desktops in the top ten world economies. In 2018, Google initiated mobile-first indexing. This is a huge concern because web pages take more time to load on mobile devices than on desktops. According to Lukew, 4G smartphones are 12% slower while 3G phones are 40% slower than desktops in loading web pages. The only way to improve load time on mobile devices is to reduce the size of your web pages. This is important because Google considers mobile responsiveness when deciding SEO rankings.
Web Hosting Costs
Hosting plans for your website is based on bandwidth. The company hosting your website estimates the size of bandwidth based on the page size, number of pages and number of visitors. If your website is made up of pages with larger sizes then chances are you will need more bandwidth than you currently use. This increases the cost of hosting your website.
Page size best practices
Today internet marketing requires a lot of balancing between the various factors at play. Page sizes have been growing steadily over the years. One reason for this is the popularity of images online. A majority of the people visiting your site will not read your web pages if they have no attractive images and graphics. It is therefore important to balance between the use of images and minimization of the size of your web pages. To get everything right, here are a number of best practices to follow:
Images play an important role in websites. They help pass information that words alone cannot. However, the use of images increases the size of a web page which considerably lowers the load speed of the page. To improve the speed of your website it is important to consider compressing or resizing images to the recommended size per file of 500 KB.
Simply compressing images and text can be a game changer—when done correctly, 30% of pages save more than 250 KB.
There are a number of tools you can use to compress or resize images effectively:
Another way to optimize images is to use CSS sprites. This refers to combining several images into a single image and then applying CSS to display an individual image as required. This saves bandwidth because fewer requests are sent for the images.
Avoid unnecessary custom fonts
Custom font adds to the appeal of your website but can also make the page heavy, increasing load time and producing negative results. Avoiding unnecessary custom fonts will help reduce the size of your website and decrease its load time, ultimately increasing the number of page visitors.
Minifying resources is the process of eliminating redundant or unnecessary data from your web pages without affecting how they are processed by browsers. For example, minification could involve the removal of unused codes, code comments or shorter function names. Google provides a detailed guide on how to go about minifying resources.
Employ Content Delivery Networks (CDN)
To speed up websites in this era of growing pages sizes, many people are now using CDNs. These are interconnected server systems that employ geographical proximity technologies to deliver web content. This is an important tool for local SEO as the web pages will be shown to searchers with the location where the elements of the website are stored. This will help even when web pages are relatively heavier.
It is clear that page size is important for the ranking of your website. Larger web pages will load slowly which means Google will overlook those pages when ranking. This is because Google users abhor pages that load slowly and the search engine company prides itself in satisfying its customers. To make sure that your pages load faster, you need to find out their sizes and optimize them.
To help you do this, there are a number of other tools you can consider using:
Page size optimization for WordPress
Optimize the fonts
Different fonts are used in the content creation of a page. KeyCDN estimates indicate that fonts account for an average of 123 KB of the total page size. With different fonts available and the quest to seek uniqueness, it is important to choose fonts that are not cumbersome. Loading speed and font sizes are some of the important factors for consideration in this respect. While there are custom fonts to use in page creation, there is also an option to choose that which best fits the font optimization process.
Optimize your WordPress file and image compression with plugins
You might also want to check if multiple plugins add their own font-awesome.min.css files. You can merge these files so that you have less .css file in your WordPress website by using a plugin such as Merge + Minify + Refresh or Page Ninja.
Optimize the images
Images greatly enhance a webpage. They make the page attractive as well as ease the visitors’ interaction with the site. The growing increase in size of pages has been attributed to the use of images. Reducing the number of images per product, reducing size of images and the proper arrangement of images on the page are three great ways to optimize size.
Be sure to use reliable and effective applications for image compression. Such tools ensure the quality of the image is maintained while reducing its size and making it more user-friendly. Some plugins for image optimization includes:
One recent development in the creation of web pages is the inclusion of videos. While they remain among the minor components of a page, they also add on to the size of the web page. When optimizing page size, you must consider reducing the number of videos used in such a way that you ensure they do not occupy much space unnecessarily. Editing the videos to reduce the length and maintain as much content as possible is also an ideal step toward page optimization.
Embedded videos on your page will increase the number of requests necessary to render on your page, including downloading the thumbnail image and resolutions. Not only will your byte size increase, but the load time will greatly increase due to the additional HTTP requests.
You can optimize your videos with a few different options.
Video Lightbox allows your video to pop up to view instead of being embedded on your site.
Optimize visitors’ comments, feedback and reviews
A platform for visitors to give reviews and comments plays a vital role in keeping them engaged as well as collecting important insights from consumers. This content, however, requires space which greatly increases the page size. Adding third-party tools like Disqus or product reviews on the page is an ideal way to optimize the page size. Their focus should be to limit the amount of comments being displayed and put into effect other features they might have to help reduce your page size.
Page size optimization for Wix
Optimize page texts and links
As an ultimate guide, visitors benefit heavily from page titles and descriptions during searches and navigations. With the important role they play, there is a need to use short, concise titles and descriptions in page size optimization.
This means that the least possible number of words should be used while ensuring there is a clear and definite meaning. This further entails having the right fonts alongside the content for the titles and descriptions.
Google, in their Mobile Page Speed New Industry Benchmark, wrote, “Simply compressing images and text can be a game changer—30% of pages could save more than 250KB that way.”
Since Wix comes as an out-of-the-box solution, the only control you have is what you put into the site versus optimizing via plugins like other CMS platforms.
It’s important to note that within a website, different pages are linked via link addresses and anchor text. These help to ease navigation and offer direction to the visitors. However, in every page where they are used, they are an addition to the page content and hence possess the potential to increase the size of the page. In page size optimization there is a need to reduce links and anchor texts as much as possible. This should be enhanced further by reducing the number of characters used in the process.
Avoid autoplay Audio and Video
Optimize image compression
Images used on a page are important. They form part of the modern and trending pages but also give the visitor a better user interface. However, images occupy much space on a page and therefore call for the need to compress those images. The Wix page size optimization process requires use of reliable image compression tools to ensure the content and quality of the image are not affected. This should be done in addition to ensuring there is a proper arrangement of the images in order to ensure the best possible number is used without increasing the space consumed.
Page size optimization for Shopify
Optimize product images
Shopify provides a platform for marketers to reach out to clients. This is attained through the use of images alongside other content on the page to woo and attract the customer. In this regard, it is important to reduce the number of images of a single product in order to optimize the page size. Regular editing and changing of the images may act as an ideal approach to give visitors different views of the product in place of having multiple images on a single page.
Decrease thumbnail images to help them load faster and decrease the page size. Themes should use Shopify’s built-in image size parameters to download the smallest images. Creating separate thumbnails and lowering your image sizes will contribute the most to page size reduction.
Tracking and Conversion
Compatibility with mobile devices
Use of mobile devices is increasing each day. Unlike desktops, mobile devices use limited memory and therefore require optimized pages for mobile viewing. To avoid maintaining different pages for different views, optimize existing pages to make them compatible with all devices. The Shopify platform is crafted for this purpose and therefore has tools available to help customize pages for optimal performance on every device.
Understand what your customers see
While you might want to create a lengthy home page, using a heatmap tool like Hotjar or Crazyegg to help track just how often your visitors are viewing your site will show you how to make reductions. Most optimized home pages should be presented within one or two scrolls. A Nielson Norman Group study showed 57% of individuals’ page-viewing time was above the fold. 74% of the viewing time was spent in the first two screen fulls, up to 2,160 PX.