Leveraging browser caching - node servers

Wappler General Need Help
1

With PHP running on Apache I have been accustomed to setting cache times via the .htaccess file like this:

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 month"
ExpiresByType image/jpeg "access 1 month"
ExpiresByType image/gif "access 1 month"
ExpiresByType image/png "access 1 month"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 month"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES CACHING ##

Now I am using Node.js (CentOS / cPanel setup on VPS) then .htaccess becomes pretty irrelevant
I have noticed recently that the amount of .js and .css loaded by some web pages is negatively impacting on load times and thought this may help
Is there a node equivalent to force caching of these resources?
Google seems pretty unproductive on this topic

2

I found a similar issue, and although this is not a fix by any means, i did find that using Gumlet was the easiest solution, and most sites could probably get away with their free tier, however even their paid tier is very cheap.

It does not give the granular control you had in the .htaccess file, but it does give you a cache time, i use it for all my scripts too, and their lazy load is really decent, had significant speed increases on the site.

3

Have you thought about using Cloudflare Brian?

1 Like
4

@psweb So gumlet can be used to optimise .js and .css?
My issue is that it takes twice the time to load all the .js and .css in the layout page than it does to load the content.
Lazyloading embedded (Iframe) video has helped (lots of embedded video on site) but the .js and .css remains problematic
I suppose that is a node.js issue i had not thought about. Because the layout page holds all the component and css links for all the associated content pages they can get very heavy in .js and .css links

5

https://expressjs.com/en/resources/middleware/serve-static.html

// lib/setup/config.js
const config = {
    // (...)
    static: {
        index: false
    },

Express’s static middleware configuration can be changed there in config.static, near index: false

I guess for your case, immutable needs to be set true, and you need to set maxAge as well:

static: {
        index: false,
        immutable: true,
        maxAge: 3600*1000, // 1 hour (3600 seconds) in milliseconds 
    },

Beware, any configurations you make here may be overwritten by future Wappler updates

6

Thanks @Apple, will give that a try

7

Hey Brian, yes Gumlet serves all your CSS and js files too, it really does give a pretty huge speed improvement, in all honestly I would try it if I were you.

8

Thanks @psweb for that
Tried @Apple suggestion but improvement was minimal (but thanks for your time and effort anyway Apple) . Paul, any trips on implementation gratefully accepted :slight_smile:

9

Wow gone from

image

to
image

1 Like
10

Its luckily a super simple integration, pretend your website is called thesmurf.com

Go create a gumlet.com account, create an image source, and point that to your TLD, example https://www.thesmurf.com
This will give you an option to create a Gumlet subdomain, so something like thesmurf.gumlet.io

Once done go to Wappler and add this to your main.ejs head section

<script type="text/javascript">
        window.GUMLET_CONFIG = {
            hosts: [{
                current: "https://www.thesmurf.com",
                gumlet: "thesmurf.gumlet.io"
            }],
            lazy_load: true
        };
        (function(){d=document;s=d.createElement("script");s.src="https://cdn.gumlet.com/gumlet.js/2.1/gumlet.min.js";s.async=1;d.getElementsByTagName("head")[0].appendChild(s);})();
    </script>

No to make Gumlet serve all images just change
<img src="/images/pic.jpg">
to
<img data-src="/images/pic.jpg">

For all your scripts change the src from
<script src="/dmxAppConnect/dmxAppConnect.js"></script>
to
<script src="https://thesmurf.gumlet.io/dmxAppConnect/dmxAppConnect.js"></script>

And stylesheets the same, just add the https://thesmurf.gumlet.io in front of the href part.

11

I told you, its pretty impressive, haha

1 Like
12

The performance increase i got was only using the initial code in the header, guessing the translation is actually automatic

13

Yes, it does do it on auto, but the docs suggest you still change from src to data-src and give some long explanation about how not doing it actually loads the image twice instead of once

14

I initially only did it to get WebP to be honest

15

it will become standard on my sites from now on. going to try another one now

1 Like
16

Interesting post gentlemen - Can you share what the tool is you’re using for the performance testing?

17

Hi all, I know this is an old thread but is gumlet.io still something you use or have you moved on to other providers or methods?
Ta.