Performance issues with SASS generated CSS and missing sourcemaps
I'm a big fan of anything which makes my life easier, and when it comes to web development and styling things, SASS ticks just about every box I need. I'm not going to go into what SASS is, but you can see what it's all about over at sass-lang.com. (PRO TIP, don't go searching "get sass" with safe filters turned off, especially on an office network).
I have, however, found some issues with some sites I've been working on recently when using SASS (specifically SCSS) and had to do some digging round. A once fast site was taking around 10 seconds to load. Fortunately these sites are currently in development so SEO isn't going to be affected, but it's a worry all the same for going live, and a pain to develop on when each page load takes ages to load.
As this particular site doesn't use a database at our side and is pretty much static content, it had to be something that was loading which was taking up the time. Fortunately, Chrome and Firefox both have useful developer tools which let you check what's coming over the network and how long each file is taking. Brilliant, the problem is laid out bare.
The issue wasn't that resources were taking too long to load, they were taking too long to not load. There were a few files which were causing 404 errors, but taking around 3 seconds to fail. These were sourcemaps for SCSS which are used for browsers to help debugging issues in the SASS/SCSS and make development easier. They weren't there, so needed to be re-built.
Sadly this wasn't as simple as loading the file, adding a space and getting the SCSS compiled to CSS; which was what I had hoped. Changing variable values didn't do the trick either.
After some searching round, I found that it could be done (apparently) via the command line by passing in --sourcemap=file. Literally that. Verbaitim. I did think that it was going to need a file name where it says file, but no; just --sourcemap=file. On the command line, it looks something like:
sass path/to/style.scss:path/to/output/css/style.css --sourcemap=file
That line rebuilds the style.scss file in the relevand file into the style.css file in the location it is required, and then re-generates the style.css.map file. Once that was done, everything was back to normal.
Sometimes the speed of the page isn't slow because of what it is loading on the page, but what it is trying to load but can't. Use the tools you have at your disposal to improve the performance of pages, and remove references to resources which are no longer there (or re-add them so they can load).
