Introduction
Page loading, interaction and in general website speed is very important for your User experience. It can make or break your website if not taken into account when building out your site.
Apart from the ability to deter your visitors from your site, it can also limit its online presence by eating up your bandwidth allowance due to uncontrolled size of the contents being used.
Here we will look into how to keep your website fast and also efficient in terms of bandwidth usage.
Page size
Webpage size refers to the total amount of data that needs to be loaded when a user visits a particular webpage online. It is typically measured in kilobytes (KB) or megabytes (MB) and includes all the elements that make up the webpage, such as text, images, videos, scripts, style-sheets, and other resources.
A smaller webpage size is generally desirable because it leads to faster loading times for users, especially those with slower internet connections or using mobile devices.
Bandwidth
With your plan, you are provided with a certain amount of bandwidth. This allocation represents the maximum amount of data that can be transferred to and from the website over a month in your billing cycle. If your project's website/funnel exceed the bandwidth limit, your website will go offline. To get back online, you will either have to purchase a bandwidth addon or wait until the end of the current billing cycle for the amount to be reset to 0.
Either way, it is best to avoid it by either choosing a plan to sufficiently cover your website traffic or manage the amount of data required to be exchanged when your website/funnel is visited.
Size and Bandwidth consumption Check
There are two ways you can check how "heavy" your page is - either use your browser's inbuilt page Inspect function or you can use one of the website speed testing tools, such as GTmetrix and Pingdom.
To use the in-built Inspect tool of your browser, such as Chrome, right-click on the page -> Inspect -> click on the "Network" tab and then do Ctrl/CMD+R to refresh your page. You should see it start compiling and at the bottom stats bar, where it says "resources", you can see how many MBs of data your page consumes on each visit.
In the example above, our landing page is 4.6mbs in size, therefore upon each visit, just by opening the page, that amount of bandwidth is consumed. If you have a plan with 10GBs of bandwidth included, that means you can get roughly around 2000 visits in one month, before your bandwidth is reset. However, bear in mind that many visitors will go to other pages as well, so a browsing sessions' bandwidth consumption may end up being comprised of more than just one page visit and therefore more than 4.6mbs in total.
How to manage your page size and bandwidth
1. Optimize your image sizes
Although we've introduced automation Webp format conversion for our images to reduce the size while keeping as much as the quality as possible, there still can be cases where images are too large for no benefit it quality increase. If your image is larger than 1-2mbs, we suggest that you run in through a lossless image quality compressor to further shed some size off before uploading. Having your images compressed benefits your website twofold:
- your pages remain very fast even for older devices and slower connections
- the bandwidth of your project benefits heavily from the image size optimization, and therefore allows for more visitors to access it without the need to upgrade the plan or add any addons.
2. Custom code additions
Avoid using too much custom code additions or such that are coming from unverified sources. Although adding external tools, widgets and generally any content via custom code and scripts can be a good thing as it expands the capabilities of the platform, too much or unverified code in many cases produces the opposite effect. The load times are delayed due to connection to the external source and in some instances, the custom code is not compatible with the builder so it does not load at all.
Use only codes from verified sources and try not to overdo it so as to avoid disrupting your website's ability to load content and the speed at which it performs.
Some final tips:
1. Avoid excessive reliance on online speed testing tools.
While we suggest utilizing them to address doubts, prioritize conducting the majority of your testing locally in real-world scenarios. Load the website manually on various devices and browsers to get accurate insights. This approach is crucial because many tools tend to overstate loading times, reporting delays in the backend that users don't actually experience. Users may experience instant loading of the page, but the tool could inaccurately report much longer times due to parts of a code that are still loading
2. Mobile device performance
Although by default our platform is well suited to provide high level of mobile optimisation If you find that your website is not performing as fast as the desktop version on mobile devices, please consider converting some of the blocks to "Mobile Only". This will ensure that any content added to said block is mobile optimised. This is especially beneficial when it contains images.