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.
- 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.
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
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!
More info: https://developers.google.com/closure/compiler/
Into the HTML, we change your code to load these resources deferred, so they can load faster and remove all possible “Render Blocking” issues.
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.
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).
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!
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.
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.
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.
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.