Web optimization

Behind of our service we perform a series of process to ensure your site is complying with the latest standards on web optimization.

As a TL;DR Dartspeed apply automatically the following improvements:

  • CSS Styles concatenation and minification.
  • Javascript concatenation, minification, and ES5/ES6 optimizations.
  • Remove “Rendering Blocks” by deferring CSS and JS, and calculate the Critical CSS.
  • Reduce image size and save images in next-gen formats.
  • LazyLoad for images, iframes, videos, maps, and others.
  • JS and CSS files are pushed by HTTP/2.

Changing DNS

When you set up Dartspeed.com, we ask you for point your DNS to Cloudflare. After that change, your website will start to load faster.

So, how a simple DNS change can optimize your website?  Let’s see!

When your traffic starts to pass through Cloudflare, we work as an intermediary between your Hosting and Cloudflare. This mode allows us to optimize all your frontend resources, no matter what backend technologies you use. It also avoids software installations on your hosting or source code changes on your end.

So, all our web optimizations occur when your traffic goes through Cloudflare. Inside our servers, our robots open your website in a Google Chrome Browser, simulating a real visitor (Thanks to Puppeteer).

Once your website is loaded, our robots read the HTML code generated from your server and inspect all resources used on the page. So, we start to optimize each resource until getting an optimized version according to all practices and recommendations from Google Page Speed Insights, Google LightHouse and from our own knowledge.

Your website keep the same design, functionality, same domain, same everything, but faster!

Which web optimizations do we apply?

CSS / Stylesheets optimization

Concat + Minify + Gzip CSS Files

Each inline styles and stylesheet files are extracted, concatenated and minified into one file. With this resulting file, we apply a Clean CSS step to reduce a little bit some unneeded CSS rules.

While we process each style rule, we find for background images, so we pass them through a filter to apply Lazy-Load, allowing it to save bandwidth and making your website load faster.

After extract all background images, the final resulting CSS Stylesheet is stored in a fast cache into the CDN automatically!

Javascript Optimizations

Concat + Minify + Gzip JS Files

With Javascript files, we also extract inline scripts and external files, concatenate them and minify them to put into one resulting file. After getting only one file, that code is passed through “Google Closure Compiler” to get a better version of the resulting javascript. In addition, we make possible to minify/to make async javascript previously were not possible, for example, those using document.write
More info: https://developers.google.com/closure/compiler/

Automatic HTTP/2

CSS and JS Files served by HTTP/2 Push

After the final Javascript file and CSS File are generated, they are distributed into the Cloudflare CDN though HTTP/2 PUSH. So, when your website loads it will load the HTML, and the JS and CSS files immediately and async.

Into the HTML, we change your code to load these resources deferred, so they can load faster and remove all possible “Render Blocking” issues.

More info: https://www.cloudflare.com/website-optimization/http2/ and https://developers.google.com/web/tools/lighthouse/audits/blocking-resources

Prioritizing content above the fold

A great web optimization included is the calculation of the Critical CSS. Since the CSS file is Deferred to remove the rendering block, we calculate the most important CSS, used only to render the top content of the website above the fold. This initial CSS (aka. Critical CSS / Priority CSS) is embedded inline into the HTML page.

This optimization allow to the browsers render the Top content as fast as possible, while the rest of the styles and scripts are loaded deferred.

More info:

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/

Optimizing images

The process to optimize images is a complex set of steps, in which we apply several optimizations to get the best results.

On the first step, our robots register every image on your website and pass them through our Image Optimizer System. This process guarantees that all images are optimized, resulting in files with fewer bytes without image quality loss.

As a second step, we start to convert all images to next-gen formats to reduce up to 20% of image sizes (WebP: The most optimized format to be used on the web).

webp
WebP auto-generated images with respective fallback

To make sure your visitor will load the correct image, we rewrite your HTML Image tags to use Picture -> Source tags instead, allowing to the visitor’s browser loads only the supported image (First it will try the WebP, if it is not supported, it will fallback to load the JPG/PNG image).

The third step is a complex combination of some internal steps dedicated to save bandwidth and offer a good User Experience with images:

Our robots start to find and separate the images located above the fold. For the first images we load them directly, but the other images we apply Lazy-Load by using a fast algorithm based on Intersection Observer API (Very efficient in CPU time).

Here we have implemented several methods to detect your images, no matter if you are using the normal <img> tag or if you are using them as a Background Images. All of them are lazy-loaded and optimized!

Fast Performance Lazy Load images

After that step, we combine lazy-load with the famous LQIP images (Low-Quality Image Placeholders) used on several sites like medium.com to improve their Users Experience. So, on every image, the browser will receive a fast Base64 string inline to load it as a Placeholder, and then, if the user scrolls down, the browser will load the correct image (WebP or jpg/png/gif), even before the image is visible, to provide a smooth experience.

More info:

https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/

Lazy-load for iframes

Iframes are a great tool, but normally they load all their internal content, even when the iframe is not located in the viewport view of the visitors.  So, your website becomes slow because of the bandwidth usage without need.

To make sure your iframes are loaded only if they are coming into the Viewport view, we replaced the src attribute to data-src, and then lazy-load the iframe content. This optimization is great for websites with Youtube videos, you will see the website faster at the same experience.

HTML Optimization

Remove whitespaces, break lines and unneeded comments

Most of the resources in a website are optimizable and cacheable, but HTML is not cacheable, so we never cache the HTML response from the origin server, but we optimize it by removing all white spaces, some unneeded comments and break lines, useful to save some bytes in bandwidth.

Cache Headers and Compression

As part of the web standards compliant, we take all resources, we compress them by using gzip and we add them all expire headers and cache control headers.

For all images, styles and javascript files, we add “one year” of cache control. Wait, one year?  It sounds like your website will be cached for one year to all visitors, but it is not the case. We have implemented a “Cache Burst mechanism” to let you control that behavior without problems.

By using a Dartspeed Dashboard, our users are able to clear cache and optimize again all website or just one URL. That process will restart the cache expire date.

Interested ?

Get a FREE TRIAL and make your website load faster.