Using Less with A CDN (Web Optimization Tips)

Modern web design is much more sophisticated and easier thanks to readymade libraries and enhanced language extensions such as LESS. Designed by Alexis Sellier and released as an open-source project, LESS spices up normal CSS by adding mixins, variables, operations, and other functionalities. However, LESS is yet another dependency that needs to be loaded and compiled on the browser hence the reason you should have it behind a CDN.

What You Can Achieve With LESS

Less is an open-source CSS preprocessor that helps you have even more control in the way your web elements look using CSS. It extends pure CSS by adding new features and ways to style every aspect of your webpage. Being a preprocessor, less needs to be converted into pure CSS by the browser before the client browser can render your web page. Less has a sizable fanbase in the dev community hence the reason why it is present in millions of websites and web app interfaces:

Here are some of the enhancements/ extensions added by LESS that you might find useful for your projects:

Nesting

allows you to replace or improve the way you arrange different CSS rules by allowing HTML-like nesting.

Mixins

This functionality is pretty much the same thing you could get with JS where you can reference properties from one set of rules to another thus making your CSS leaner and cleaner.

Variables

LESS allows you to use variables the same way you could with a normal scripting language like JavaScript or Python.

Here are some code snippets to demonstrate how you would use Less to include variables, Mixins, and nesting using Less:

Using Variables in Less

@width: 15px
@height: 12px
#footer {
 width: @width;
 height: @height
}

Nesting with Less

#footer {
 Width:12px
 Color: #FFFF
 }
 . image {
 Height: 200px;
} }

Using Less Mixins

LESS mixins allow you to include multiple properties into a single rule-set that can be named and easily referred to as shown in the example below:

.font_properties {
 font-size: medium;
 font-variant: normal;
}

You can then easily refer to the above class in another rule-set as shown in the following snippet:

#body p {
 border-style: hidden;
 .font_properties ();
}

As you can see from the code snippets above, LESS provides a lot more ways to define the appearance of your fronted and saves you a lot of time especially if you are utilizing the mixins and variables. However, less is yet another front-end dependency that could affect your website's overall performance. This is why you should consider either loading it and any other library you are using through a CDN or having your entire website/app behind a robust content delivery network for optimal performance.

What is a CDN?

A CDN or content delivery network in full is more or less a sophisticated hosting service consisting of geographically distributed servers. A CDN enhances the performance of your website or web application by keeping snapshots of your web components on its network and delivering them to your visitors as needed. You can decide to have your entire website or web application delivered to your visitors using a CDN or have only libraries or dependencies such as LESS and heavy images hosted on the CDN.

CDNs were initially popularly used to provide DDOs protection due to their redundant server network. They have since become the most preferred way to enhance website loading speeds especially in the era of the mobile internet and web caching.

Why Use Less with A CDN?

There are many other benefits you can get by using a CDN as part of your website setup or referencing libraries delivered through it. Here are some of them:

Faster Website Speeds

CDN’s have an enhanced hosting setup consisting of geographically dispersed servers. Your content or libraries will load because visitors are being served from servers closest to them. At the same time, most CDNs invest a lot of resources into building a robust infrastructure hence faster and smoother performance on all levels.

CDNs Allow for Better Browser Caching

If the assets you are using on your website are on a CDN, then chances are that millions of other websites are using the same URL and your visitor’s browsers have already created caches of the same. This allows for even faster loading because the libraries will be loaded from the visitor’s browser cache as opposed to a web server.

All in all, less is a great addition to CSS if you care about lean design and don’t mind learning new approaches to writing your CSS rules. Using it with a CDN will have a positive impact on the availability and performance of your websites.

Toastr CDN

Wordpress Use A Content Delivery Network

Jquery Steps CSS CDN

CDN for Fonts

CDN No Cache