Please whitelist cPanel in your adblocker so that you’re able to see our version release promotions, thanks!

The Community Forums

Interact with an entire community of cPanel & WHM users!

Leverage Browser Caching

Discussion in 'EasyApache' started by fullfatdesigns, Oct 28, 2018.

Tags:
  1. fullfatdesigns

    fullfatdesigns Well-Known Member

    Joined:
    Aug 1, 2014
    Messages:
    58
    Likes Received:
    9
    Trophy Points:
    8
    cPanel Access Level:
    Root Administrator
    Hi

    I've got EA4 installed with mod_expires with the following code in my .htaccess

    Code:
    <IfModule mod_expires.c>
      ExpiresActive On
    
      # Images
      ExpiresByType image/jpeg "access plus 1 year"
      ExpiresByType image/gif "access plus 1 year"
      ExpiresByType image/png "access plus 1 year"
      ExpiresByType image/webp "access plus 1 year"
      ExpiresByType image/svg+xml "access plus 1 year"
      ExpiresByType image/x-icon "access plus 1 year"
    
      # Video
      ExpiresByType video/mp4 "access plus 1 year"
      ExpiresByType video/mpeg "access plus 1 year"
    
      # CSS, JavaScript
      ExpiresByType text/css "access plus 1 month"
      ExpiresByType text/javascript "access plus 1 month"
      ExpiresByType application/javascript "access plus 1 month"
    
      # Others
      ExpiresByType application/pdf "access plus 1 month"
      ExpiresByType application/x-shockwave-flash "access plus 1 month"
    </IfModule>
    But pagespeed is still reporting that css and js (along with other files) don't have an expiry. Is there something else I need to do on the sever?
     
  2. linux4me2

    linux4me2 Well-Known Member

    Joined:
    Aug 21, 2015
    Messages:
    219
    Likes Received:
    55
    Trophy Points:
    28
    Location:
    USA
    cPanel Access Level:
    Root Administrator
    I have been using cache-control rather than mod_expires on my server. I put the following in WHM > Service Configuration > Apache Configuration > Include Editor > Pre Virtual Host Include > All Versions:
    Code:
    ## Cache-Control
    <IfModule mod_headers.c>
      # 1 YEAR
      <FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|jpg|jpeg|png|gif|swf)$">
        Header set Cache-Control "max-age=29030400, public"
      </FilesMatch>
    </IfModule>
    
    Note that I don't have CSS or JS in there; the changes made to those files are frequent enough that I don't want them cached. With this setup, Pagespeed lists Google Analytics as the only JS file under "Leverage browser caching" for some reason, even though there are a number of other JS files on the site(s).

    You might give it a try and see how it works for you with your Pagespeed results. The other advantage of this Pre Virtual Host include is that you don't have to edit every .htaccess, it works for all the domains on your server.

    While you're at it, you can add the following to enable Gzip compression, too:
    Code:
    # Enable GZIP Compression.
    <IfModule mod_deflate.c>
        SetOutputFilter DEFLATE
        <IfModule mod_setenvif.c>
            # Netscape 4.x has some problems...
            BrowserMatch ^Mozilla/4 gzip-only-text/html
            
            # Netscape 4.06-4.08 have some more problems
            BrowserMatch ^Mozilla/4\.0[678] no-gzip
            
            # MSIE masquerades as Netscape, but it is fine
            # BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
            
            # NOTE: Due to a bug in mod_setenvif up to Apache 2.0.48
            # the above regex won't work. You can use the following
            # workaround to get the desired effect:
            BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
            
            # Don't compress images
            SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary
        </IfModule>
        
        <IfModule mod_headers.c>
            # Make sure proxies don't deliver the wrong content
            Header append Vary User-Agent env=!dont-vary
        </IfModule>
    </IfModule>
    
     
    cPanelMichael likes this.
  3. fullfatdesigns

    fullfatdesigns Well-Known Member

    Joined:
    Aug 1, 2014
    Messages:
    58
    Likes Received:
    9
    Trophy Points:
    8
    cPanel Access Level:
    Root Administrator
    Thanks linux4me2

    I'll give that a go.

    Regards
    Wayne
     
    cPanelMichael likes this.
  4. cPanelMichael

    cPanelMichael Technical Support Community Manager
    Staff Member

    Joined:
    Apr 11, 2011
    Messages:
    45,197
    Likes Received:
    1,936
    Trophy Points:
    363
    cPanel Access Level:
    Root Administrator
    Twitter:
    Stop hovering to collapse... Click to collapse... Hover to expand... Click to expand...
  5. fullfatdesigns

    fullfatdesigns Well-Known Member

    Joined:
    Aug 1, 2014
    Messages:
    58
    Likes Received:
    9
    Trophy Points:
    8
    cPanel Access Level:
    Root Administrator
    Hi. I've only just had a chance to try this. I've done the steps listed above and added

    Code:
    ## Cache-Control
    <IfModule mod_headers.c>
      # 1 YEAR
      <FilesMatch "\.(js|css|flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|jpg|jpeg|png|gif|swf)$">
        Header set Cache-Control "max-age=29030400, public"
      </FilesMatch>
    </IfModule>
    which includes js and css, but pagespeed is still reporting css and js files are missing expiry headers.
     
  6. linux4me2

    linux4me2 Well-Known Member

    Joined:
    Aug 21, 2015
    Messages:
    219
    Likes Received:
    55
    Trophy Points:
    28
    Location:
    USA
    cPanel Access Level:
    Root Administrator
    Well, there is an "if" conditional statement to determine if mod_headers is present before the cache control will execute. I guess the first thing to do is to go WHM > Software > EasyApache4 and click on "View all packages" in the "Currently Installed Packages" section to make sure you have mod_headers installed.

    If mod_headers is installed, you can test your site using an online tool like GTmetrix or GiftofSpeed. The latter lists all the cached and non-cached files on your site with the duration they're cached and how it is done, which should let you verify whether or not your Cache-Control setting is working.
     
  7. fullfatdesigns

    fullfatdesigns Well-Known Member

    Joined:
    Aug 1, 2014
    Messages:
    58
    Likes Received:
    9
    Trophy Points:
    8
    cPanel Access Level:
    Root Administrator
    Hi linux4me2

    Thanks for the reply. I've checked in EA4 and mod_headers is installed. I've checked using the links you provided. GiftofSpeed showed that there was a mixture of cached and non-cached js and css. I noticed the ones that aren't are external js and css, so I guess that would make sense and js and css on the server are cached. Does that sound right?
     
  8. linux4me2

    linux4me2 Well-Known Member

    Joined:
    Aug 21, 2015
    Messages:
    219
    Likes Received:
    55
    Trophy Points:
    28
    Location:
    USA
    cPanel Access Level:
    Root Administrator
    I didn't realize external files would not be cached by the browser, but that makes sense. Here's an article on Quora that talks about it.
     
  9. fullfatdesigns

    fullfatdesigns Well-Known Member

    Joined:
    Aug 1, 2014
    Messages:
    58
    Likes Received:
    9
    Trophy Points:
    8
    cPanel Access Level:
    Root Administrator
    Thanks. Great article.
     
  10. vlee

    vlee Well-Known Member

    Joined:
    Oct 13, 2005
    Messages:
    352
    Likes Received:
    23
    Trophy Points:
    168
    Location:
    Spokane, Washington
    cPanel Access Level:
    Root Administrator
    I have added HTTP Strict Transport Security (HSTS) which help with extra SSL security

    This sets the Strict-Transport-Security policy field parameter. It forces those connections over HTTPS encryption, disregarding any script's call to load any resource in that domain over HTTP. HSTS is but one arrow in a bundled sheaf of security settings for your web server or your web hosting service.

    Code:
    ## HTTP Strict Transport Security
    <IfModule mod_headers.c>
    Header set Strict-Transport-Security "max-age=15552000; includeSubDomains; preload"
    </IfModule>
    
    ## Cache-Control
    <IfModule mod_headers.c>
      # 1 YEAR
      <FilesMatch "\.(js|css|flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|jpg|jpeg|png|gif|swf)$">
        Header set Cache-Control "max-age=29030400, public"
      </FilesMatch>
    </IfModule>
     
    Stop hovering to collapse... Click to collapse... Hover to expand... Click to expand...
Loading...

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice