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
-
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
-
Minify mode: Manual
This is perfect: Get minify hints using the help
wizard.
-
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
- 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.