Spyro has been built for speed and has a number of performance optimisations built in. In this article you can learn about the practices we have employed, the in-built performance settings and finally the steps that you need to take to enhance your website’s speed.
We have crafted our code in such a way that we have been able to pack a lot of features and layout options with fewer lines of css. This means reduced file size and thus faster load times. Tatsu’s entire css footprint in the front end of your site, which includes the Tatsu Core, Tatsu Header Builder, 50+ Modules & the animation suite, is just 141KB minified. This transforms to just 20KB when gzip compressed. When you compare this to the WP Bakery builder used in other themes, its core css file size is 458KB minified, which comes down to 45Kb when gzip compressed. So our css footprint is over 3x Less when you just compare the minified versions and 2x less even in the compressed versions. By default unminified versions of css files are loaded. While this is useful for debugging issues during development, when you are ready to deploy your site, please go to APPEARANCE > CUSTOMIZE > GLOBAL SITE LAYOUT SETTINGS > PERFORMANCE panel and turn ON the Load Minified CSS Files option.
Almost all the images that are published in a page via Spyro & Tatsu can be lazy loaded. Right from Background Images, to Individual Images, Blog & Shop Images, Portfolios & Galleries, you can lazy load them in order improve the initial load speed. In layman terms, your images are loaded only when a user scrolls close to it. So if you have a long page with a lot of images, you do not have to worry about your visitors waiting for the entire page to load before being able to browse. Only images in the user’s viewport are loaded initially while the rest are loaded and revealed smoothly using a fade animation only the user scrolls just near its position in the page. This saves you bandwidth and offers a smooth & slick experience for your website’s visitors.
Even though Spyro helps you build an optimised website out of the box in terms of code, there are a number of things that you have to do at your end to make sure your website loads fast, as the content you create is going to add to the bulk of the page’s file size. Here is what you can do.