All Collections
Optimizations
How to check and reduce your website's data transfer usage
How to check and reduce your website's data transfer usage

How to optimize data transfer usage at Templ

Erik Lidén avatar
Written by Erik Lidén
Updated over a week ago

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:

  1. Navigate to Usage.

  2. 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.

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.

Did this answer your question?