Having a fast site these days is not something that is nice to have, but a must have!  In this guide we're going to explain a number of the inherent performance optimizations that StoreFronts and the Visual Builder are providing to your site:

Automatic Consolidation of JavaScript and CSS files

In today's modern websites, JavaScript provides all the interactive power to the customer.  Whether its an image gallery, slider, tabbed interface, etc. there is JavaScript involved.  Those libraries also typically have accompanying CSS to make the element look great on the page.  The Visual Builder is no different.  To make sure your site is blazing fast, StoreFronts will automatically combine the JS and CSS files into the minimum number of consolidated files without affecting the ordering of the assets on your site.  The consolidate files are also optimized and hosted on our CDN providers.  This leads to the fastest load times possible for your customers.

Cloud CDN

All of the assets used on a StoreFront are offloaded to our cloud CDN partners.  We place all high volume assets as close to the customer on an edge CDN so that the page load times are minimized.

Critical Path CSS

The critical path is the path to rendering a web page.  The browser can not render a page until it has everything necessary for that to happen.  CSS stylesheets block rendering until they are retrieved.  This means the browser has to request, receive, and parse the stylesheet.  Until this is done the page remains blank.  UltraCart will automatically calculate the critical path CSS (all the CSS necessary to render the above the fold content), inject this into the header, and then push all other CSS down to the bottom of the page.  This means the page renders much faster.  Once we know that the customers browser has downloaded the main CSS and cached it, the subsequent requests do not inject critical path CSS.  If the page changes in any way, the critical path CSS is discarded and a new one is calculated in the background.

Lazy Loading of Images

The fastest image on the page is the one that never needs to be loaded.  The Visual Builder's runtime JavaScript libraries will automatically lazy load images once they are visible on the screen or close to scrolling on to the screen.  This leads to a faster perceived page speed for the customer and a reduced amount of bandwidth used by the customer.  This is critical for today's 50% mobile customer environment!

PNG (Desktop) / JPEG (Mobile)

The image elements within the Visual Builder provide an option to serve PNG images (large in size, but higher quality) to desktop customers and JPEG (smaller in size, but lower in quality) to the customer.  UltraCart will automatically create the various thumbnails (regular pixel density and retina 2X) automatically.  Using modern HTML5 picture/source/img tags we can instruct the browser on the proper image to load based upon their device.  For the desktop user on that fast internet connection they can have the best visual experience possible.  For the mobile LTE customer they can have the fastest experience possible with very acceptable looking images.

This is the only one of the optimizations listed on this page that you actively have to select to use.

Smart Slide Images

If your site design utilizes a slider, it's probably one of the first elements visible on your home page after the header.  It's not uncommon for merchants to use eye popping gorgeous images as the background of their slider.  Those 750KB sized PNG files look amazing on the desktop, but they are complete overkill for the mobile customer.  The Visual Builder will automatically calculate the necessary size of the slider images for every major device break-point and create "smart images" that are resized versions of the slider image.  The system can intelligently deliver the optimally sized (including retina 2X) for every single customer.  Often times this optimization means an 80% reduction in the bandwidth consumed by slider images for mobile customers.

Server Side Twitter Feed

If your Twitter feed is an integral part of your social communication, then putting it on your website in the typical fashion is costing your custom 3-5 HTTP requests for resources from Twitter.  The Visual Builder has integrated Twitter Feed and Twitter Follower elements that you can use.  UltraCart will use an API connection to Twitter to keep the information about your feed and followers up to date and then render it directly on your page without any performance issues or additional HTTP requests.

TypeKit Inline Before Cache

Fonts are often a critical part of a company's brand and many designers leverage the Adobe Typekit font system to get just the right font.  To prevent the browser from slowing down during the initial page load, UltraCart will inline the Typekit script directly into the page and then push the external script load to the bottom of the page.  This provides superior load times for sites using Typekit while stilling allowing the browser to fetch the Typekit script and cache it for subsequent pages.

WebP for Chrome Customers

WebP is an image format created by Google in 2010 that supports both lossy (similar to JPEG) and loseless (similar to PNG) compression.  The images created in both lossy look similar to JPEG and loseless look identical to PNG, but doing it with 30-60% savings in bandwidth.  StoreFronts will automatically server Chrome customers a WebP (lossy) image where you use a JPEG image and a WebP (loseless) image where you use a PNG image.  As of June, 2017 Chrome has 59.36% marketshare on the desktop and 19.33% on mobile.  These web pages served to these customers will be the smallest possible.