On Tilda, lazy loading is enabled by default for all websites. It allows websites to load faster, even on mobile devices.
Implementing lazy loading is yet another step in optimizing websites on Tilda for faster loading. Technologies are constantly evolving, and we are always working to make loading even faster.
Lazy Load is a plugin that blocks images from loading outside the viewing area. That is, images are loaded as the user scrolls the page. Let's have a look at how it works.
Let's select a regular Tilda template and publish it: http://project130385.tilda.ws/
Open the browser's developer console, enable slow speed imitation (3G) in the settings, and refresh the page.
Let's select a regular Tilda template and publish it: http://project130385.tilda.ws/
Open the browser's developer console, enable slow speed imitation (3G) in the settings, and refresh the page.
DOMContentLoaded: 628 milliseconds
This parameter indicates that all the basic scripts and HTML have loaded, allowing the user to view the page straight away.
Finish: 1.65 seconds
This parameter indicates how long it has taken for the whole website to load.
Transferred: 263KB
This parameter shows how much data has been transferred (in bytes).
This parameter indicates that all the basic scripts and HTML have loaded, allowing the user to view the page straight away.
Finish: 1.65 seconds
This parameter indicates how long it has taken for the whole website to load.
Transferred: 263KB
This parameter shows how much data has been transferred (in bytes).
These figures look very optimistic, but everything is relative, isn't it? Go to the Site Settings → More and select the "Disable Lazy Load for images" checkbox. Test the page once again.
DOMContentLoaded: 697 milliseconds
This parameter indicates that all the basic scripts and HTML code have loaded, which means the user can view the page straight away.
Finish: 10.14 seconds
This parameter shows how long it has taken for the whole website to load.
Transferred: 1.8MB
This parameter shows how much data has been transferred (in bytes).
This parameter indicates that all the basic scripts and HTML code have loaded, which means the user can view the page straight away.
Finish: 10.14 seconds
This parameter shows how long it has taken for the whole website to load.
Transferred: 1.8MB
This parameter shows how much data has been transferred (in bytes).
The overall page load time and the amount of data transferred have multiplied.
Let's see what else we can learn using PageSpeed Insights. Let's check the page with optimization turned off.
Let's see what else we can learn using PageSpeed Insights. Let's check the page with optimization turned off.
Now, let's enable Lazy Load for images:
Lazy Load blocks images that are not visible to users,
which allows websites to load faster.
which allows websites to load faster.
Note
How do I remove the JavaScript and CSS code that prevent the upper part of the page from showing?
This question often comes up after taking the test. Google advises against using scripts at the top of the page.
In theory, you can remove the scripts. However, you have to keep in mind that it is an automated analysis, and it's not accurate. As we have seen, the pages load very quickly when Lazy Load is enabled because we have optimized everything there was to optimize. The analysis has shown that removing scripts saves 0.3 seconds, but it hardly makes any difference.
That is why we recommend ignoring the results of the automated test that reacts so poorly to scripts at the top of the page.
By the way, how does Google pass its own test?
That is why we recommend ignoring the results of the automated test that reacts so poorly to scripts at the top of the page.
By the way, how does Google pass its own test?
Oops!
