Export settings - is there a "best practice" or any tips

[DPL]

Another newbie question…

I am looking at the export settings (eg minify javascript, css, html, use a CDN). I want to export to host with an external provider.

I am not sure about some of these options and was wondering if there are any “best practices” or other tips more experienced users can share as to what options they find useful (or not).

Thanks in advance.

[JCWEB]

Hi everyone.
The Minify Javascript and CSS option is highly recommended to optimise page loading performance.
All CSS and SCSS files are merged into a single minified file.
All JavaScript files are merged into a single minified file.

In simple terms, a minified JavaScript or CSS file is an optimised version of the original file, the aim of which is to reduce its size. Here are the main characteristics of a minified file:

• Removal of unnecessary spaces, tabs and line breaks.
• Removal of comments.

The order of CSS and Javascript files is important.
In the Design panel, right-click on :

• Styles to access the Include order menu option.
• Javascript takes you to the Include order menu option.

[fynn]

I do wonder though, would it be possible to sort of “compile” the bootstrap css, so that only the css classes that are really used are being exported to the css file? It might not make a big difference for us or the site visitors, but I’m sure google’s page speed index would increase a bit. I’m a sucker for fast web pages and a good google page speed score (and yes, I know it’s not all about google, but it’s still important).

[printninja]

Unless you have so many unused CSS classes that the size of your CSS file is drastically larger, you’ll never notice any real-world difference in page load.

The main Bootstrap CSS (bootstrap.min.css) is around 160kb when unminified. On a 4G or 200 mbps broadband connection, this would download in about .006 seconds.

Most custom CSS files are only a couple of kilybytes. You’re talking about files that download in thousandths of a second.

A Lighthouse score of 80 and a score of 100 is virtually indistinguishable on a 4G connection. And as far as page speed and page rank correlate, while Google claims page loading speed is a factor, I’ve see websites that score in the 30’s that rank #1 in the SERP.

If you really don’t want your unused classes to compile, just do a CSS cleanup and disable all the unused classes (just be aware that the cleanup tool is not perfect, and will often report some CSS as being unused even though it may be used in JS or animations.)

Ideally, you should just strive to write your CSS clean to start.

[richards]

I did post a reply 3 years ago using purge CSS

How to remove the excess CSS from bootstrap.min.css

Try https://purgecss.com/ Very easy to use, as long as you have node.js installed In command line, install with: npm i -g purgecss then navigate to your export directory. Create a new folder called ‘purged’ (or anything you like) then run the command below: purgecss --css *.css **/*.css --content *.html *.js --output purged The rewritten css files will then be stored in the ‘purged’ folder make sure you have the folder name after output The *.js is to check to see if you have any styles …

I don’t know how much it has changed since then, but sharing the link if you want to try it out

[muhammadhakimjazuli]

@richards

I mean, post processing exported file is definitely viable solution…

but when publish-ing it in bss site is diferent matter, as far as I know, the bootstrap.min.js and bootstrap.min.css will always be included to the published site, as is…