CodeVoyager

Minify JS & CSS

Edit Page

Minify JS & CSS

Minification & concatenation of CSS & JS

It can be done on site level via various plugins or even on the server level by using ngx_pagespeed Pagespeed module.

Minification using plugins

Winner: Better WordPress Minify

Autoptimize works reliable. It can even convert background-images in the CSS to data-uri. Read more here. Iznenađujuće, ali niti je komplikovan a nekako mi se sad sviđa.

Better WordPress Minify has much more control options than Autoptimize, so I can fine-tune everything, a postoje i dodaci kao na primer Defer CSS Addon for BWP Minify

WordPress Minify - Best Practices Turbocharge your WooCommerce store load times

It has a beautiful management of enqueued JS & CSS files, where you can decide where to put any file. Simply perfect!

Don’t forget to enable Friendly Minify Urls, as it is expected to do it like that.

And not only that, but if you have a nginx config file used by W3 Total Cache plugin, BWP Minify will use that config file to write changes.

W3 Total Cache has Minify features. First, unselect Rewrite URL structure because it was not working for me due the my nginx configuration. The good thing is using memcached or any other engine besides disk, but that has no real meaning as these files are static files anyway and nginx should read them directly - therefore I recommend using disk.

How to minify Javascript?

  • async vs defer is best explained here

Both async and defer are same at heart. The difference arises regarding the time when script is executed. In async the script executes as soon as it’s fully loaded. But in defer scripts execute in order of their occurrence in the webpage.

  • Default (blocking)
  • Non-Blocking JS: Sometimes misses on-load events.
  • Non-Blocking “async”: Order of execution of the scripts isn’t guaranteed. Scripts execute as soon as the script is downloaded.
  • Non-Blocking “defer”: Like async, but execute in the defined order. Waits for the HTML to finish loading.
  • Non-Blocking “extsrc”: Possibly refers to https://code.google.com/p/extsrcjs/
  • Non-Blocking “asynsrc”: like extsrc, with small differences

Difference between Both async and defer Asynchronous and deferred JavaScript execution explained « Peter Beverloo

here

  • Usually you must remove jquery.js from minification as it must be available for inlined JS on page (all inline JS is blocking), so defer attribute is also out of question

Don’t select Line break removal usually breaks something. Preserved comment removal should be checked as it is really safe.

Embed location in table of JS files (JS file management) sets the exact location of embedded scripts for that specific file. The possible values are

  • Embed after <head>: right after the <head> opening tag, even before verious meta directives.
  • Embed after <body>: beginning of the page body, right after the <body> opening tag, with nothing in between.
  • Embed after </body>: at the end of a document, glued before </body> closing tag

By setting Operations in areas to :

Scripts can be put at the following places:

  • Before </head>: in the head, but as last, at the end
  • before or after

How to Add Defer and Async Attributes to Render Blocking Javascript in WordPress Make Your Site Faster with Async and Deferred JavaScript: Introducing script_loader_tag | WPShout

How to minify CSS?

Please skip some (which) css files to caused you problem for minify. Not all CSS file can combine minified in one. Eg. Google font cannot put in.

  • Usually, we would need to remove style.css from child theme and from parents theme.

  • The most optimal situation for optimizing CSS it to have small subset of CSS in page head (blocking), and the rest of CSS in the footer. W3TC put all CSS in head of page

Move W3 Total Cache JS to Footer

The most optimal way of minifying JS it to put everything in footer

If using legacy and discontinued way of creating child themes you are probably using @import directive, so we need to enable @import handling to import you parent theme’s styles.css.

Set @import handling: to Process as it is suggested by W3TC author here. Selecting Process additional CSS file will be inserted into, to create one single file.

Optimize graphics

You can run GTmetrix report on your site and manually download the compressed version of the images it reports as not being optimized.

Advanced minification in W3TC

Custom CSS location (Marker: <!-- W3TC-include-css -->)

Manual CSS/JS Placement?

To move JS files is easy in W3TC, but to move CSS later is not. And, the ideal situation would be to have the small subset of CSS inlined in head and the rest of CSS at the end of the page.

We can move generated CSS files to the footer by adding following code:

<!-- W3TC-include-css -->

as explained here. and in more details here

<!-- W3TC-include-js-head -->
<!-- W3TC-include-js-body-start -->
<!-- W3TC-include-js-body-end -->

force W3 Total Cache to

  1. Minify mode: Auto Disable minify automatic file name length test: On Filename length: 246 What is this?

    File name length is only applicable when minify is in auto mode

    This is filesystem limit - maximum size of filename and it is 255 on almost all of operating systems. Please don’t forget on extension as it is included in this number.

    Filename length limits You can read out these values by typing: grep -P " (NAME|PATH)" /usr/include/linux/limits.h

  2. Minify mode: Manual

    This is perfect: Get minify hints using the help wizard.

  3. Rewrite URL structure: On For this, you must include rewrite rules in ’nginx.conf'

W3 Total Cache Manual Minify WordPress HTML, JavaScripts, CSS Tutorial

What is critical CSS?

It is not easy to determining what is critical CSS. It’s the one that needs to be loaded first, so “above the fold” part of page can be displayed correctly.

Google Pagespeed module prioritize_critical_css should do this automaticly, determining after few reloads the right critical CSS for every page.

But if you want to do it manually, you can do it with the couple of tools mentioned in this article:

Authoring Critical Above-the-Fold CSS

  1. With the help of Pagespeed module

Just use any plugin to move CSS to the end of the page.

You can debug filters by appending this to the URL: ?PageSpeedFilters=+debug and disable temporarily with ?PageSpeed=off. Read more here. Please note that capitalization must be exact: PageSpeed exactly like specified.

Generating Critical CSS

The most famous critical path CSS generator is penthouse and there is an online version of it here and criticalcss.com. It is created in node.js and needs a PhantomJS to work.

The other one is filamentgroup/criticalCSS which is really very similar.

But I think it is the best to do it manually and inline it manually.

And to do that manually, the most original plugin is CSS Above The Fold. Idea is to specify critical as a comment in a CSS file, which is simply perfect.

How to read a speed parameters?

Google Pagespeed Insights for WordPress Google Pagespeed Insights for Wordpress Documentation

Async loading

There’s no natively supported way to load CSS files async as there is with JS,

Comparing two ways to load non-critical CSS How to load CSS files asynchronously in WordPress (using Scott Jehl’s “loadCSS”)

Inline CSS on first load of a WordPress site - Peter Wilson

Very good text for Wordpress:

Inlining critical CSS for better web performance | Go Make Things And a perfect manual for it Wicked Fast Websites | Go Make Things

Make W3TC put CSS at the end.

"" - Google Search Move W3 Total Cache JS & CSS to the footer wordpress - How to get Minified File location from w3 Total Cache - Stack Overflow Authoring Critical Above-the-Fold CSS | CSS-Tricks criticalcss.com Free the Web | W3 Total Cache: Better CSS/JS placement

How to load Google fonts and still get great Pagespeed score?

Google Webfonts and performance - Bensmann.no

https://fonts.googleapis.com/css?family=Droid Sans:regular,700 Odavde: c:\projects\save-up.at\www\wp-content\themes\sahifa\framework\functions\common-scripts.php

https://fonts.googleapis.com/css?family=Roboto Condensed:,300,400,700 Ukinuo sam - Odavde: Ubermenu’s main menu

https://fonts.googleapis.com/css?family=Ropa Sans:400italic,400 Ukinuo sam - Odavde: c:\projects\save-up.at\www\wp-content\themes\etaktiker\header.php

Hteo sam da Roboto bude umesto Droid Sans, ali ga nigde nije bilo. Ropa Sans je služio za glavni meni i za efekte na buttonima i buttone sam i ostavio.

The same technique I think is used with this plugin: Google Webfont Optimizer sigginet/google-webfont-optimizer: WordPress plugin that makes your website a bit faster. The plugin optimizes the way Google Web fonts are loaded on your website.

You can also totally Disable Google Fonts

Google Analytics vs Google Pagespeed score

This can also be solved, but in essence it is a slower solution. This is why I won’t do it immediatly, only later I will?

https://support.google.com/analytics/answer/1032389?hl=en

http://stackoverflow.com/questions/29162881/pagespeed-insights-99-100-because-of-google-analytics-how-can-i-cache-google jehna/ga-lite: Small, cacheable subset of Google Analytics JS client Leverage Browser Cache Optimize Google Analytics

Async loading of fonts

Google Fonts Hurting PageSpeed Score? google-webfont-optimizer

Lot’s of shit gets loaded all the time, and there is a plugin to limit that: WP Asset Clean Up

WP BasketJs is a Wordpress implementation of basket.js which is a simple script loader that caches scripts with localStorage. Similar technique can be used for fonts.

LocalStorage vs Browser Cache vs Indexed DB

As mentioned before, research brought on by Google and Microsoft concur that localStorage is much faster than browser cache. On SitePoint we have covered this topic recently with the article HTML5 Local Storage Revisited, where Luis Vieira also covered some of the limitation of localStorage. In addition IndexedDB is (surprisingly) slower than localStorage, both for reading and writing.

Google PageSpeed optimization works with a deadline, so it may take a few refreshes before you get fully optimized responses.

in 2023 year

Merge + Minify + Refresh supposedly combines CSS and JS by grouping them from the header, footer, and similar sections. It is quite tricky in terms of compatibility, but it is worth analyzing.

If you want to implement something on your own, consider dmhendricks/php-combine-scripts as inspiration. It is a simple PHP script example that combines and minifies multiple JS or CSS files passed via URI.

WordPress Minify (only minify)

Koristim “Minify HTML” jer radi kako treba

Nije mi minify toliko značajan koliko mi je značajno da uklonim komentare koje stavljam.

WP Super Minify with repo at dipakcg/wp-super-minify: A very light weight plugin, minifies, caches and combine inline JavaScript and CSS files on demand to speed up page loads. uses amazing mrclay/minify: Combines. minifies, and serves CSS or Javascript files library that contains famous JSMin library ported to PHP mrclay/jsmin-php: Provides a modified port of Douglas Crockford’s jsmin.c, which removes unnecessary whitespace from JavaScript files., međutim, tokom testiranja nije imao baš nikakva podešavanja - nije sjajan, blago rečeno.

Dva super jednostavna su i oba su savršena. Minify HTML je vrlo jednostavan najosnovniji minify, i baš mi se sviđa, ali ima jedan opasan bug u admin vezano za Synced patterns.

Powered Minifier je takođe najjednostavniji i radi - ali proveri kako se on snalazi sa pomenutim bug-om.

Fast Velocity Minify je ustvari odličan jer je fokusiran na minify ali pored toga ima funcionalnost kao i Flying Scripts, i sve to radi sasvim korektno.

Slično kao Minify, samo malo drugačije: josantonius/wp-register: Register, minify and unify CSS and JavaScript resources.

tedious/JShrink: Javascript Minifier built in PHP je baš mnogo popularan library koji koriste mnoge poznate PHP aplikacije.

Minify HTML function for WordPress

date 26. Jun 2016 | modified 13. Jun 2024
filename: WordPress » Performance » Minify JS & CSS
Article Content