7 Tips For Creating Some Super-Fast CSS

Posted on - Last Modified on

There is nothing worse than a slow website. It is frustrating for the end user and bad for Search Engine Optimization. The first thing to do before optimizing the site should be to confirm if it's functional. To do this, you can use tools from Google in “Make the Web Faster.”

Nonetheless, here are some tips you can use to make it more efficient.

Selectors must be shallow

Shallowness isn’t meant to be a good thing, right? In this case, wrong. Shallowness selectors, when used continually and consistently, can significantly reduce the kilobytes in a big style sheet. It will keep your browser thin and also render elements that are targeted by the shallow selectors quicker. The browsers, by default, read selectors starting from left to right. The shallower the selectors will be, the faster it will render and then re-render, these elements.

For intricate DOMs, short selectors reduce the junk. In as much as you want the selectors that are shallow, do not over trim. There are times you need extra specificity for a component extension. You just need to find the perfect balance between what is too much, and what will be too little.

Make use of shorthand properties

Many people use longhand properties when there is absolutely no need. This includes the many expert freelancers one can hire at affordable rates. The shorthand font reduces several statements into one line that saves on space. Font shorthand is just one example of what is available. Shorthand will typically use up 40% less space, and syntax looks unreadable at first but after spending a bit more time on it, it becomes familiar. For example:

  • font-size: 1.5rem;
  • line-height: 1.618;
  • font-family: "Arial", "Helvetica", sans-serif;

Shortening this would look like this:

  • font: 1.5rem/1.618 "Arial", "Helvetica", sans-serif;

To minify HTML, CSS and JavaScript, remove all comments that are not necessary, code and white space. This reduces file size and improves performance.

Utilize the Preload Resource Clue

The reload resource hint does just that - it gives the browser a hint on what to load on the CSS, and to fetch an asset early.

It can be set as a <link> tag in HTML:

  • <link rel="preload" href="/css/styles.css" as="style">

It can also be set as a HTTP header in the configuration server:

  • Link: </css/styles.css>; rel=preload; as=style

 Cut out redundancies with csscss

A redundancy checker will check the CSS for any duplicate rules. For example, those who use Ruby can check it with the Ruby based tool csscss. They could install it using:

  • gem install csscssWhen the installation is done, you can check for redundancies by:
  • csscss -v styles.cssYou can reduplicate the following share selectors to save on space:
  1. {h1} AND {p} share 3 declarations
  2. color: #000
  3. line-height: 1.618
  4. margin: 0 0 1.5rem

The duplicate rules can be moved in one selector:

  1. h1, p{
  2. color: #000;
  3. line-height: 1.618;
  4. margin: 0 0 1.5rem;
  5. }

This process saves a lot of space, which especially counts in some large projects. The help option will offer extra options for more commands. Duplicated JavaScript’s and CSS files tend to degrade the performance. They do this by the creation of unnecessary HTTP requests and unnecessarily running JavaScript.

Resulting from the complexity of the web page, many of the HTTP requests might be needed to load all components. When Expires headers are used, these components are cached, which deters unnecessary HTTP requests on subsequent page views.  Expires headers are mainly used for images but can also be useful for style sheets, scripts, and Flash.

Making CSS and JavaScript external makes the page load faster because the files are cached by the browser. If you happen to use CSS in a web page, place it in the HEAD element, which progressively makes the pages seem to load faster.

Make cssnano your friend

Cssnano plugs into your set-up, and compresses your CSS by running it through focused optimizations. Cssnano is a node and post CSS-dependent tool. It minimizes CSS and running it through focused optimizations significantly reduces your CSS.

Install it with npm like this

  • 1npm i -g cssnano-cliOptimise your CSS with it thus:
  • cssnano styles.css optimized-styles.cssYou can also automate cssnano with a build system. This is how to use cssnano in gulp file:
  1. const gulp = require("gulp");
  2. const postcss = require("gulp-postcss");
  3. const cssnano = require("cssnano");
  4. -
  5. const buildCSS = ()=>{
  6. return gulp.src("css/styles.css")
  7. .pipe(postcss([cssnano()])
  8. .pipe(gulp.dest("css/optimized"));
  9. };
  10. const watch = ()=>{
  11. gulp.watch("css/styles.css", buildCSS);
  12. };
  13. exports.buildCSS = buildCSS;
  14. exports.watch = watch;

These might seem tough to do. If you do not have the expertise, you can get expert help from people around the world who are experienced.

Optimise Images

You have to reduce the size of the images as they slow down the page. You can do this by using GIF, PNG-8 or JPEG file formats. It is important the size matches your intended use. Set the size for each page using the height and the width, but do not scale larger images to make them smaller. This is because as much as the image result might look okay, the file size remains the same as it was.

Instead, scale the image using an image editing program. Use compression with all these file formats as an experiment. You might just be able to get a good compression that does not compromise on quality.

If your web host uses GZIP compression and deflation, that is much better. These can make a big difference and also make your site faster. It is feasible to reduce a file size by a whopping 70%, and still retain the image quality or video size. Make the page design very simple, maybe one or two images and text.

Spread your content with Content Delivery Network (CDN)

Loading of content depends on the location of the user, and impacts on the loading speed. For this reason, it is recommended that you spread your content across different servers. You can use a Content Delivery Network (CDN) - a collection of servers that are spread across the world. CDN’s help in:

  • Sending content faster as the files are sent from the server closest to the user
  • CDNs shrink the size of the files and deliver content that contains no cookies.

Using CDN can be pretty costly, even though it's just a simple code change. Most large internet providers use their own CDN. It is therefore important to use a service provider that uses CDNs. This way, your site will always load faster and guarantee you more traffic and higher SEO.

A slow page is very frustrating to both the end user and to you. You get a lower SEO ranking, because nobody wants to wait forever for a page to load. If your page takes long to load, you will lose your audience.

Some solutions are pretty simple, while others are complex and take more time to implement. It is all worth it when your page starts loading faster, and traffic goes up! These are pretty simple solutions though, and you can use them with ease.

Confirming a web’s functionality first before rushing to optimize it is crucial. If it is slow, you will never get your money’s worth from it. While ranking, users give up on it before too long, and it will drop to the bottom of the ranks. Until you can be sure the site is loading properly, don’t attempt to optimize it.

We look forward to your valuable suggestion for creating superfast CSS in the comments section.

 

Posted 18 August, 2017

LucyKarinsky

Software Developer

Lucy is the Development & Programming Correspondent for Freelancer.com. She is currently based in Sydney.

Next Article

Angular vs. React: Which Is Better For Web Development