Source Maps

#webdev #beginners #sourcemap

One of the easiest and effective performance wins you can gain for your website is to combine and compress your JavaScript and CSS files. But it will be really difficult and frustrating to debug the code within those compressed files. There is a solution for this and it goes by the name of source maps.

A source map provides a way of mapping code within a compressed file back to it’s original position in a source file. This means with the help of a bit of software, you can easily debug your applications even after your assets have been optimized. Most of the browsers (Chrome, Firefox, etc.) developer tools comes with built-in support for source maps.

Original main.css

body {
  background-color: rgb(27, 150, 199);
  color: white;
}

Optimized main.min.css

body{background-color:#1b96c7;color:#fff}
/*# sourceMappingURL=main.min.css.map */

Source map main.min.css.map

{"version":3,"sources":["custom/main.scss"],"names":[],"mappings":"AAEA,KACE,wBAAmC,CACnC,UAJgB","file":"main.min.css","sourcesContent":["$font-color: white;\r\n\r\nbody {\r\n  background-color: rgb(27, 150, 199);\r\n  color: $font-color;\r\n}\r\n"]}

There are plenty of free plugins are available to optimize styles, scripts and create source maps for them.
Optimize styles
Optimize Scripts
Create Sourcemaps

Source maps allows developers to maintain a straight-forward debugging environment while at the same time optimizing their sites for performance.

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.