Spyro Documentation

Site Performace

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. 

Options present in Spyro and Tatsu

Asynchronous and On Demand Loading of Scripts

Spyro, Tatsu & other plugins created by us, use a proprietary script called Asyncloader, which lets us load javascript plugins asynchronously and on demand, that is they are loaded if and only when they are needed in a page. This means that only the scripts that are absolutely required are loaded initially and other dependency scripts are loaded based on their usage in a page. For example, if you don’t use Google Maps in your Page, the maps API is never loaded on to the page. If you don’t use a Gallery in a page, none of the scripts required to power this are loaded. This helps us pack a lot of functionality into the theme and page builder, without worrying about bulk. Such scripts that are loaded on demand, are loaded asynchronously, meaning they are loaded in parallel and do not block the loading of the rest of the resources in the page. Traditionally scripts are loaded synchronously, meaning, until a file is loaded, the browser does not render anything or load other files. This slows down the rendering of the whole page. What themes usually do is pack all the dependencies in one big file and then load them in each page whether your site or page uses that particular script. But in order to optimise the delivery of scripts we pack them as separate files. Some site optimisation tools would recommend you to combine your scripts into fewer files, but its not a universal rule and you just don’t have to worry about files that are loaded asynchronously as that’s how Google recommends you to load all scripts. Our scripts have also been coded in a modular fashion that has helped us reuse them across the theme & plugins. By default unminified  versions of javascript files are loaded. While this is useful for debugging issues during development, when you are ready to deploy your site, please use the setting under APPEARANCE > CUSTOMIZE > GLOBAL SITE LAYOUT SETTINGS > PERFORMANCE panel and turn ON the Load Minified JS Files option. 

Optimized CSS

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. 

Lazy Loading of Images

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. 

LAZY LOAD BLOG AND SHOP IMAGES

LAZY LOAD TATSU SECTION AND COLUMN BACKGROUNDS

LAZY LOAD PORTFOLIO / GALLERY GRID IMAGES

LAZY LOAD IMAGE ADDED USING SINGLE IMAGE MODULE


Speeding up your site

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.

  • Setup up Caching – You can use a plugin such as W3 Total Cache or WP Super Cache to cache your pages. What happens is, your server is no longer processing the PHP code and generating the same HTML output for every user who visits your site. Instead it caches the html output to a file once and serves it to all visits. This puts substantially less load on your server and will help you speed up your site considerably. This is a must if you are on a shared hosting environment. Please setup caching once your site is ready to be deployed and not during development and clear your cache after theme / plugin / WordPress updates.
  • Gzip Compression – It can dramatically reduce file sizes ( upto 80% ) of static files like html, css and javascript during delivery. If your web host isn’t doing this already, please contact them and setup gzip compression. Plugins like W3 Total cache and WP Super Cache have options for enabling gzip compression.
  • Concatenation & Minification – We would recommend using Autoptimize or W3 Total Cache plugins for this purpose. Concatenation of scripts and css files, will help reduce the number of http requests and thus the loading time of your site. Each request has a certain overhead, which just add ups when loading multiple files. However you don’t have to worry about scripts that load Asynchronously. Also if your server supports http/2 protocol, it may be wiser to transmit multiple smaller files, than one big file as http/2 supports multiple requests in parallel, unlike the traditional http protocol.
  • Compress Images – No matter how optimised the code is, a single unoptimised image could undo all the hard work as it could be more than the combined file size of all javascript & css assets. Resize your images to a width that you are likely to use in your web page and a max width of 1920px is more than sufficient for most devices & use cases. If transparency isn’t required, use JPEGS as they smaller compared to PNG’s. If you have Photoshop, use the Save for Web Feature and use a image quality of medium or high as you can hardly notice a loss in image quality but can see substantial reduction in file sizes. You can also use online image compression tools such as Optimizilla ( https://imagecompressor.com/ )
  • Upgrade your Server – A car is only as good as its engine. A website is only as good as its server. A lot of shared hosting providers are notorious of cramming too many sites in a single server, thereby reducing the amount of memory & processing power available to a particular website, making it really slow. If you find this to be the case, upgrade to a better plan or get a VPS. There are many WordPress optimised hosting providers which which have in-built caching, CDN etc.
Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Youtube
Consent to display content from Youtube
Vimeo
Consent to display content from Vimeo
Google Maps
Consent to display content from Google
Spotify
Consent to display content from Spotify
Sound Cloud
Consent to display content from Sound