Web Design

Remove Unused CSS with uncss

First packages need to be installed.

apt install nodejs
npm install -g gulp gulp-clean-css minimatch graceful-fs gulp-minify-css postcss-uncss uncss minify

uncss index.html

Old way to use uncss

*** All files should be in the same directory ***

Then we run the command. You can run mutiple CSS files in one line but if they are declared in your html on their own line then I suggest you output the result separately.

Single

uncss pages_login.html -s admin-forms.css -s theme.css > login.css

Separated

uncss pages_login.html -s admin-forms.css > login-admin.css
uncss pages_login.html -s theme.css > login-theme.css

Results: This took two files that were 31, 456 lines combined and spat out a single file that was 1,997 lines. Only 6% was needed.....Sometimes I hate huge CSS files from templates but this makes it bearable now.

Minify CSS Onliner

uncss index.html | sed "s@/\*.*\*/@@g" | minify --css > css/style.uncss.min.css

Results: For one project (pass.mjns.it) I went from three css files totaling 515K down to a single minified css file with all the necessary styles totaling 12K.

Note:

You may have to manually edit multi line css before even running this one liner.
The sed command only matches comments that start and end on the same line.

Enable GZIP Compression

Test with https://checkgzipcompression.com

Apache with mod_deflate

This should be placed in the /etc/apache2/apache2.conf then test with "apache2ctl -t" to make sure the config is good before restarting the services with "service apache2 restart"

Sources

https://httpd.apache.org/docs/current/mod/mod_deflate.html
https://www.crybit.com/how-to-enable-mod_deflate-in-apache/

<IfModule mod_deflate.c>
  # compress text, html, javascript, css, xml:
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/xml
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE image/x-icon

</IfModule>

<IfModule mod_headers.c>
  # Serve gzip compressed CSS files if they exist
  # and the client accepts gzip.
  RewriteCond "%{HTTP:Accept-encoding}" "gzip"
  RewriteCond "%{REQUEST_FILENAME}\.gz" -s
  RewriteRule "^(.*)\.css" "$1\.css\.gz" [QSA]

  # Serve gzip compressed JS files if they exist
  # and the client accepts gzip.
  RewriteCond "%{HTTP:Accept-encoding}" "gzip"
  RewriteCond "%{REQUEST_FILENAME}\.gz" -s
  RewriteRule "^(.*)\.js" "$1\.js\.gz" [QSA]

  # Serve correct content types, and prevent mod_deflate double gzip.
  RewriteRule "\.css\.gz$" "-" [T=text/css,E=no-gzip:1]
  RewriteRule "\.js\.gz$" "-" [T=text/javascript,E=no-gzip:1]

  <FilesMatch "(\.js\.gz|\.css\.gz)$">
    # Serve correct encoding type.
    Header append Content-Encoding gzip

    # Force proxies to cache gzipped &
    # non-gzipped css/js files separately.
    Header append Vary Accept-Encoding
   </FilesMatch>
</IfModule>

Nginx

Download website and its dependencies

wget --recursive --no-clobber --page-requisites --html-extension --convert-links --random-wait --restrict-file-names=windows --domains example.com https://www.example.com