Overview
The Stax theme is created with speed and performance and speed in mind. The theme should hence have a good performance score once tested with tools such as Pingdom, GTMetrix and Google PageSpeed Insights.
It is however important to note that different factors influence the performance of your Website and the Stax theme only plays a small part in this. You can for example have two websites using the Stax theme and once tested, their performance scores be different. This could be for example be due to a difference in site content or the server in use.
Stax Theme does provide a couple of options to enhance the performance of your website within the Appearance > Customize > Performance section. These include:
- CSS Preload
- Lazy Load Images
CSS Preload
Preloading basically informs the browser that you would like to access a resource faster than it would normally would, due to the importance of the resource.
When the “CSS Preload” option is enabled, it tells the browser to prioritize the themes’ CSS files and load them after the window. load event is triggered, meaning that the themes’ CSS can load as the rest of the page loads.
Usually the browser will cache the files and initiate an early fetch for the CSS files. This in turn enhances your site performance as it accelerates the page load speed within your website.
Lazy Load Images
Lazy loading Images is an important optimization technique in the modern web. When enabled, images are loaded on a browser only when they appear in the browsers’ viewport.
This concept does help in optimizing the performance of your website, especially for websites rich in image content, thereby reducing the initial page load time.
Your website users also in turn would also save up on bandwidth compared to an image-rich website where Lazy loading is not enabled. This is because there is a lesser number of images that need to be loaded initially and hence a lesser network bandwidth requirement. If for example a user is also interested in content within the top of a page and there are images towards the bottom of the page, these images never get loaded if a user doesn’t scroll to the bottom of the page.
