Website Optimization by Blaze.io – How does it work?

By | October 12, 2011

Web Performance Optimization (WPO)

Blaze – How It Works from mikeweider on Vimeo.

Introduction to Front-End Optimization from mikeweider on Vimeo.

Compression

Compression is an effective way to reduce the size of your page and resources without impacting their content. HTML, JavaScript and CSS files are textual and compress very well, as do AJAX responses. Compression can often reduce 60%-80% of the total page size. Blaze automatically compresses all text content, while ensuring compressed content is only served to clients that support it.

Domain Sharding

Many browsers put limits on how the number of simultaneous connections to a single domain. Domain Sharding overcomes this limitation by creating multiple names for the same domain, and spreading the resources across them. Blaze automatically splits your resources across different domains, all pointing to the same logical CDN.

Minification

HTML, JavaScript and CSS files contain comments and whitespace that, while useful to developers, are not needed for the page’s operation. Minification is the process of removing such components, reducing the total download size.Blaze automatically minifies all page resources, reducing the size of your pages without harming their functionality.

Consolidation

Web Pages hold dozens or hundreds of resources, each requiring an HTTP transaction to be fetched from the server. These transactions have overhead, are time consuming, and cannot be done all at once. Consolidation is the technique of combining multiple resources into one. Blaze applies smart consolidation of JavaScript, CSS and Image files, reducing the overall page size and accelerating its load.

Inlining

Many of the external images and scripts on a page are small. Often so small, that the HTTP overhead to fetch them exceeds their own size. Inlining is the technique of embedding these resources directly into the page or resources that references them. The overall page size decreases with the reduced HTTP overhead, and the inlined resources are processed faster. Blaze automatically embeds resources into pages and CSS files based on size and other considerations.

Asynchronous JavaScript

When processing a page, browsers usually process JavaScript files as blocking resources. This means images and other resources further down the page aren’t downloaded until the scripts are fully downloaded and executed. The Async JavaScript Processing optimization modifies the way scripts are embedded into the page, making the browser process scripts and other resources in parallel. This improves load time, and makes the page start rendering much earlier.

Response Prediction

Most pages, even highly dynamic ones, have very predictable resources included in them. Elements like the title, stylesheets and scripts are often the same from page to page. Blaze identifies these repetitions, and starts the response to the browser before the page is even requested, predicting what parts of it will hold. With Response Prediction the browser starts downloading resources in milliseconds, saving precious time. When the real page is returned, Blaze identifies any wrong predictions and recovers, maintaining an unharmed user experience.

Adaptive Image Sizing

Most images are formatted for desktop browsers on larger screens. Images are unnecessarily large for mobile devices. Blaze’s adaptive imaging sizing technology automatically delivers an optimally sized image for the phone, tablet or desktop browser that requested it resulting in a much faster page load.

Just In Time (JIT) Image Loading

When viewing large sized pages on a small screen, the browser will load all the images on the page regardless of which ones are in view. Blaze’s JIT optimization will cause a page to only load the images that are visible within the current screen view. As the user scrolls down, new images are loaded on demand. JIT helps improve page loading speed and also reduces bandwidth for cases where a user doesn’t actually scroll down a page.

Intelligent Image Quality

Many images contain excess meta data that has no functional value to the browser. Secondly some images are saved at a higher pixel density than is perceivable on mobile display. Blaze applies lossless compression to strip out unnecessary metadata. Blaze lossy compression optimizes the pixel density to reduce size without a perceptible impact on quality.

HTML5 Local Storage

Caching previously downloaded page elements on users’ browsers is one of the best ways to improve performance of repeat views. However, since the cache size on mobile browsers is very small, few files last in the cache until the user returns to the site. Blaze cache optimization leverage a new capability in HTML5 to bypass the shared browser cache and create a dedicated cache for each site.

Content Delivery Network

Content delivery networks reduce latency by moving data out to edge where it’s closer to your users. Instead of serving content from one location, customers download your page resources from one of the thousands of servers around the world that is closest to them geographically. In addition to optimizing your front end code, Blaze also provides an integrated CDN service. Blaze will automatically upload your resources to a CDN and rewrite your HTML code to point to the new CDN locations.

Versioning

Many sites only cache content for a few hours due to concerns about old content used from the cache when new content is available. This practice all but eliminates the enormous performance benefit of caching for users return to your site later – a very common occurrence. Blaze uses a technique called Versioning to solve this problem, by giving each file a unique name. If a resource changes, the old file will be not be referenced anymore, and so all content can be cached indefinitely.

 

Let me know what you think about this article