Critical Css + Apache2 – Cache – Load CSS After Page | Core Web Vitals (generator) *

Critical CSS Generator (actually does the job!)

https://www.corewebvitals.io/tools/critical-css-generator

Critical CSS in 3 simple steps

1. Enter the URL of the page for which you want to create critical CSS for at:
   https://www.corewebvitals.io/tools/critical-css-generator
2. Paste the results in a <style> tag on your page, just below the <title>
3. Defer loading of the original stylesheets
   

   
   <link rel="preload" href="orig.css" type="text/css" as="style" onload="this.onload = null; this.rel = 'stylesheet';"/>
   

   
   
   

   Load css after page (get critical css into head 1st)

   We can make use of simple JavaScript function to solve our purpose. Below is an example to load single style sheet after page is loaded.
   
   Async CSS Loading

   
   <script>
   //define function to load css
   var loadCss = function(){
       var cssLink = document.createElement('link');
       cssLink.rel = 'stylesheet';
       cssLink.href = 'myawesomestyle.css';
       var head = document.getElementsByTagName('head')[0];
       head.parentNode.insertBefore(cssLink, head);
   };
    
   //call function on window load
   window.addEventListener('load', loadCss);
   </script>
   

   
   Loading Multiple Stylesheets
   To make it easy, we will parameterize the loadCss function to accept file path. And then, we will define our master function that will call above function repetitively for every single file.
   
   

   
   <script>
   var loadMultipleCss = function(){
       //load local stylesheet
       loadCss('myawesomestyle.css');
        
       //load Bootstrap from CDN
       loadCss('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');
        
       //load Bootstrap theme from CDN
       loadCss('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css');
   }
    
   var loadCss = function(cssPath){
       var cssLink = document.createElement('link');
       cssLink.rel = 'stylesheet';
       cssLink.href = cssPath;
       var head = document.getElementsByTagName('head')[0];
       head.parentNode.insertBefore(cssLink, head);
   };
    
   //call function on window load
   window.addEventListener('load', loadMultipleCss);
   </script>
   

   Before and after applying this tweak, compare your page speed score. There are services which automatically take care of these optimizations to boost your PageSpeed score even up to 100 and bring down the loading time to just a few milliseconds by optimizing CSS, JS, Images, Fonts etc. If you face any problem in implementing this, do post in comments. I’ll try to reply. Basic Apache 2 Cache Settings DEFLATE is a lossless data compression algorithm similar to gzip, but it works in Apache 2. In the past, mod_gzip was a recommended tool.If server is usig Apache 2 and mod_deflate, which calls gzip on the back end automatically.
   
   The following are common default settings on servers. This assumes that all of these modules are already enabled. If they are – we can tweak the settings below to fine tune the cache.
   
   

   
   
     # Compress HTML, CSS, JavaScript, Text, XML and fonts
     AddOutputFilterByType DEFLATE image/svg+xml
     AddOutputFilterByType DEFLATE application/javascript
     AddOutputFilterByType DEFLATE application/rss+xml
     AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
     AddOutputFilterByType DEFLATE application/x-font
     AddOutputFilterByType DEFLATE application/x-font-opentype
     AddOutputFilterByType DEFLATE application/x-font-otf
     AddOutputFilterByType DEFLATE application/x-font-truetype
     AddOutputFilterByType DEFLATE application/x-font-ttf
     AddOutputFilterByType DEFLATE application/x-javascript
     AddOutputFilterByType DEFLATE application/xhtml+xml
     AddOutputFilterByType DEFLATE application/xml
     AddOutputFilterByType DEFLATE font/opentype
     AddOutputFilterByType DEFLATE font/otf
     AddOutputFilterByType DEFLATE font/ttf
     AddOutputFilterByType DEFLATE image/x-icon
     AddOutputFilterByType DEFLATE text/css
     AddOutputFilterByType DEFLATE text/html
     AddOutputFilterByType DEFLATE text/javascript
     AddOutputFilterByType DEFLATE text/plain
     AddOutputFilterByType DEFLATE text/xml
     # Remove browser bugs (only needed for really old browsers)
     BrowserMatch ^Mozilla/4 gzip-only-text/html
     BrowserMatch ^Mozilla/4\.0[678] no-gzip
     BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
     Header append Vary User-Agent
   
   

   
   
   Browser Cacheing:
   
   Using mod_expires, you can tell visiting browsers to hold on to certain files longer (likes images, which are rarely changed).
   
   Same here – assuming all modules are enabled – can adjust settings:
   
   

   
   # BEGIN Expire headers  
     
     # Turn on the module.
     ExpiresActive on
     # Set the default expiry times.
     ExpiresDefault "access plus 2 days"
     ExpiresByType image/jpg "access plus 1 month"
     ExpiresByType image/svg+xml "access 1 month"
     ExpiresByType image/gif "access plus 1 month"
     ExpiresByType image/jpeg "access plus 1 month"
     ExpiresByType image/png "access plus 1 month"
     ExpiresByType text/css "access plus 1 month"
     ExpiresByType text/javascript "access plus 1 month"
     ExpiresByType application/javascript "access plus 1 month"
     ExpiresByType application/x-shockwave-flash "access plus 1 month"
     ExpiresByType image/ico "access plus 1 month"
     ExpiresByType image/x-icon "access plus 1 month"
     ExpiresByType text/html "access plus 600 seconds"
     
   # END Expire headers  
   

   
   
   Disable Cacheing:
   
   

   
   #Disables GZIP
   SetEnv no-gzip 1
       
   #Turns off the expires headers for Apache
   
   
     ExpiresActive Off
   
   
   # Disable Caching
   
       Header set Cache-Control "no-cache, no-store, must-revalidate"
       Header set Pragma "no-cache"
       Header set Expires 0