Each website at Templ includes a specific amount of bandwidth/data transfer. Exceeding this limit can result in additional costs.
This guide provides essential tips to help you avoid unnecessary bandwidth expenses.
Checking data transfer usage in the Templ Panel
To check the data transfer usage in the Templ Panel:
Navigate to Usage.
Click on Go to details under Detailed bandwidth usage.
Here you can see the data transfer usage over time for all your websites. You can also see the possible projected overage for the current month.
How to reduce data transfer usage
Cloudflare
Templ is introducing a solution through our partnership with Cloudflare that can significantly reduce bandwidth costs. This solution will eventually give you access to all Cloudflare features directly through the Templ Panel. Currently, we can manually implement this solution to help you lower your data transfer usage. To do so, we need to be able to change your name servers and have full access to your current DNS zone. Therefore, we recommend transferring your domain name and DNS to Templ.
To get started, please contact our support team by clicking the chat icon in the lower right corner of this page.
Optimize images
High-resolution images have larger file sizes and increase data transfer usage. Ensure images are not higher resolution than necessary and use the appropriate image format.
Convert images to WebP
WebP is a modern image format that offers more efficient compression than JPEG and PNG, which helps to reduce data transfer usage.
At Templ, you can convert images to WebP directly on the server in the Templ Panel.
Note: Converting images to WebP in the Templ Panel won’t work if you are using Cloudflare CDN.
Host Videos Off-Site
Uploading videos directly to the website can greatly increase bandwidth usage due to their large file sizes. To avoid this, upload videos to external hosts like YouTube or Vimeo and embed them on your website.
Avoid third-party plugins for backups
Avoid using third-party plugins for backups to prevent high data transfer usage.
Plugins like Updraft Plus, which regularly sync backups to external locations, can consume a lot of data. Instead, rely on Templ’s automatic daily backups available on all production websites.
Lazy Loading
Lazy loading is a simple yet powerful technique to optimize web performance by reducing data transfer usage. It ensures that only necessary resources are loaded, improving load times, saving bandwidth, and enhancing the overall user experience.
Lazy Loading for images and iframes using the loading attribute
This is simplest and most effective method for modern browsers. It requires minimal code changes and provides immediate benefits.
How to Implement:
<!-- For images -->
<img src="example.jpg" alt="Example Image" loading="lazy">
<!-- For iframes -->
<iframe src="https://www.example.com" loading="lazy"></iframe>
Please don't hesitate to contact us, by clicking the chat icon in the lower right corner, if you would like tips on how to reduce the data transfer usage on your website.