How To Speed Up Your Tilda Website

Website loading is given special attention on the Internet. That's why working on the loading speed of web pages has become routine for us. We implement new technologies and optimize technical processes. Some of the updates are visible to users, while some are not. It is an ongoing process, and we are already proud of the progress we have made.

In this article, we'll provide you with a short checklist on how to bump up your website's loading speed using the existing Tilda tools and modifying the settings. We will go through each point in detail so that you can adjust your website's settings on your own and make it load even faster.

Before breaking down each point, let's see how you can assess the page loading speed.

Many Tilda users check the page loading speed on their websites using Google's PageSpeed Insights. This service simulates website loading on mobile devices and desktops, assigning them an efficiency rating.

It is a conventional technical tool that does not always reflect the actual loading speed. In our experience, the data that Chrome collects and shows in the developer panel is much better than that obtained through the PageSpeed Insights simulation. That is why we do not recommend relying entirely on PSI—take it as a supplementary or indirect analytical tool.

Monitoring the actual page loading speed of the website is a better option. You can do this in the Developer Tools in Chrome: open the console (Option + Ctrl + I / Alt + Cmd + I) and go to the Toggle device toolbar → Network tab → reload the page you want to evaluate. The most important parameters are DOMContentLoaded, which shows the time it takes for the page structure to load, and Load, which shows the time it takes for the page with all the tables and styles to load.

This method is not perfect either—the toolbar's fast 3G simulation does not clearly and correctly simulate website loading on mobile devices, so you will need to check the loading speed on actual devices and draw conclusions based on the data.

Tilda has a large number of optimizations implemented to speed up page loading. Basic websites with no code or third-party scripts load quickly. You can see for yourself: pick a Tilda template and see the page loading speed using PageSpeed Insights.

Let's check it on a real website: We have chosen one of the templates from the Tilda template library and created a website for a personal stylist Annie out of the template. Let's estimate its loading speed using PageSpeed Insights.

Of course, the loading speed depends on the complexity of the website, the presence of specific blocks, and on whether we have connected any third-party widgets, counters, statistics, and other add-ons that can slow down the website loading.

We have written this article so that you can understand the issue and learn to identify the settings that will help you create a fast-loading website. But you have to make an important decision—applying all the tips from the checklist will affect not only the website's loading speed but also its design.

Lazy Load allows images to load gradually as the viewer scrolls down the page, not all at once. This setting is enabled by default, directly affecting website performance.

We often see designers creating custom websites turning off Lazy Load for some reason—you do not recommend doing this as it slows down the website.

Ensure that Lazy Load is enabled for your website. To do this, go to the Site Settings → More, then make sure that the "Disable Lazy Load for images" box is unchecked. Also, check that the feature is not disabled in the Image and Shape settings in Zero Block.

Lazy Load and manual image optimization are the two most important things you can optimize. Images are the heaviest element on the website, so 70% of the page loading speed depends on them.

Tilda has an exclusive feature—Adaptive Image Loading. This is a special image processing technology that scales images to the size of the container on the website depending on the user's device. It also converts images to WebP, the next-gen format that compresses the image without the loss of quality, so the website loads faster. The conversion happens automatically without the need to perform any additional actions.

In certain cases, automatic optimization "on the fly" cannot compare with manual image compression. If the page loading speed is crucial for you, we recommend optimizing images using TinyPNG, a free online service that uses a lossless data compression technology to compress images without the visible loss of quality.

Another solution is to add different blocks for the desktop and mobile versions of the website and upload images of different sizes and weights. For example, you can do it for the cover page of your website.

The algorithm on Tilda will be as follows: when the page loads, it will optimize the image "on the fly," and if the optimized picture takes up less space than the original image, it will automatically display it. This can happen when the cache is warming up and the system is still gathering traffic stats to prepare the necessary resolution images in advance. Manual optimization will not do any harm here and, in some cases, may even help optimize images and increase the page loading speed.

This category of optimizations comes second in terms of weight and importance. System fonts, such as Arial or Georgia, are available on any computer. There are also pluggable fonts such as Ubuntu and Roboto.

If you want to speed up your website as much as possible, we do not recommend using custom fonts but selecting one of the system ones instead. This way, you can save 100-400KB, which is significant when it comes to page loading.

If you need to use a branding or corporate identity, you can use our new feature—instant content rendering. The setting allows you to show content on the website regardless of whether or not your branded font has loaded. The website will first display the system font, and after a few seconds, once the font has been loaded, the text will be rendered again, this time in your branded font.

This feature is not enabled by default. If you value the loading speed more than the loading smoothness or the visual aspect, you may want to enable this feature in the Site Settings → Fonts and Colors → Advanced.

Check if you have any third-party scripts or code, such as chats or a counter, connected. On Tilda, you can connect them via the T123 block. Therefore, check if you have this block on the page or in the header of your website.

According to our observations, in 95% of cases, the code added to the website is not optimized for the loading strategy and can severely slow down page rendering. That is why we recommend that you avoid using third-party scripts or use them with the correct connection.

If you cannot do without third-party code, then delay script loading and initializing. The first few seconds of page rendering are very important, so it would be best if nothing unnecessary were loading. For example, suppose you add an Intercom widget. In that case, you may want to connect and initialize the script 3 seconds after the main content has been rendered (the "DOMContentLoaded" or "document ready" events). This step will help prevent blocking the main loading stream so that the page will render faster.

For example, on Tilda, counters load with a 2-second delay by default. You can find out more about this in the next paragraph.

Delayed counter initialization is a new feature that has recently become available to all Tilda users. For the counter on the page to connect, the browser has to load a script, analyze the code, and execute it. Google Analytics files are quite heavy, so they will slow down the page display speed if all of them load at once. That's why, by default, we connect these counters 2 seconds after the page loads.

You can make sure that this setting is not disabled in the Site Settings → Analytics.

The point seems obvious, but it works: the less information on the page, the faster it will load. Look at your website with a critical eye: is it so necessary to have all the information and images on the page, or can it be shortened? For example, if you have a very long page (20+ screens), move some of the content to another page to increase its loading speed. This is something you can influence and adjust directly.

Users sometimes place a large cover photo on the first screen along with four smaller pictures in the next block. In this case, the browser has to download five images instead of one. This clogs traffic, especially when it comes to mobile Internet, which is why we do not recommend placing too many pictures at the top of the page.

Ensure that your website is not exported or synced through an API—in other words, make sure your website is on Tilda's servers. In case it is exported, ensure that your web server is optimally configured.

Tilda has built a quality internal infrastructure, which we continue to improve and develop. We have taken care of many things: reliable and fast servers, CDN to speed up image delivery, protection against DDoS attacks, and several other technical tweaks that are aimed at maximizing the loading speed of Tilda websites.

As for third-party hosting, we cannot control system administrators' amount or quality of work. Nevertheless, we can give some tips on what you can do to make your website load faster if you have exported them:
— Connect CDN and display images via a distributed content delivery network.
— Turn on the CSS/JS/HTML caching headers in the web server settings so that the browser will not download them every time but would get them from the cache.
— Enable Gzip or Brotli compression for CSS, JS, and HTML files.
— In the settings, enable the text files compression: CSS, JS, HTML.
— Add an "async" attribute to the third-party JS scripts so that their loading does not slow down the loading of the page.
— Add third-party widgets only when necessary, arrange a delay in initialization for 2-3 seconds so that the page content has enough time to render.

Tilda websites load pretty quickly by default. If you want to speed up your website even more, use our recommendations from the checklist. They will help you create an ultra-fast website, but you will have to make a few compromises in terms of design and visuals. We always leave these decisions and priorities to the user.

On our part, we are constantly working on optimizing the platform and implementing new solutions that will make your website even faster.