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
    
    
    


Scroll to Top