-1

i have some files from node_modules they need to be saved in cache because i am getting this information

enter image description here

to get this information i audited with lighthouse this is the web https://www.webpagetest.org/

this is the final result, "cache static content" is the wrong enter image description here

i am working with Gatsby, i found this information about my problem https://www.gatsbyjs.com/docs/caching/#javascript-and-css but i am not sure how can i use it or should i use another library? i dont have idea how can i cache

i think i should use these properties:

The cache-control header should be cache-control: public, max-age=31536000, immutable

this is my file gatsby-config

plugins: [
    'gatsby-plugin-top-layout',
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'assets',
        path: `${__dirname}/src/assets`,
      },
    },
    `gatsby-plugin-image`,
    'gatsby-transformer-sharp',
    'gatsby-plugin-sharp',
    {
      resolve: 'gatsby-plugin-manifest',
      options: {
        
      },
    },
    {
      resolve: `gatsby-plugin-offline`,
      options: {
        precachePages: ['/projects/'],
      },
    },
    {
      resolve: 'gatsby-plugin-material-ui',

my propuse to do this is solve this problem, there are a blank space when i reload the web application

blank space

Ferran Buireu
  • 28,630
  • 6
  • 39
  • 67
bruce lee
  • 13
  • 5

1 Answers1

0

Gatsby generates static content. It doesn't handle sending HTTP responses. That's going to be a web server (or in your case firebase).

Checkout the docs for sending headers on firebase https://firebase.google.com/docs/hosting/full-config#headers

You'll need something like:

"hosting": {
  "headers": [ {
    "source": "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
    "headers": [ {
      "key": "cache-control",
      "value": "public, max-age=31536000, immutable"
    } ]
  } ]
}

This caches font files which is generally safe because fonts change very rarely.

You can add js and css to that list if you want as well. Keep in mind that you'll need to change the names of an js and css files or the browser will wait 1 year before reloading them.

nlta
  • 1,716
  • 1
  • 7
  • 17
  • @nita i can not change their names because of they belong to node_modules – bruce lee Oct 11 '21 at 20:38
  • What are they called? You can probably modify the "source" section to include them specifically. – nlta Oct 11 '21 at 20:39
  • @nita they are in my first image – bruce lee Oct 11 '21 at 20:42
  • @brucelee you can't control the headers sent by other websites. Your options are avoiding these dependencies or (if possible) vendoring them so your headers apply https://stackoverflow.com/questions/26217488/what-is-vendoring. – nlta Oct 11 '21 at 20:44
  • @nita how can i improve my app, i optimized the images, i refactored my code, but the wrong blank space keeps showing, i edited my question i put a new image – bruce lee Oct 11 '21 at 21:14
  • webpagetest isn't the arbiter of good web development. Is your page fast enough for your users? Check marks on some webpage aren't a good end goal but just a list of possible improvements. If you have a more specific question feel free to ask it "how can i improve my app" isn't enough to help you. – nlta Oct 11 '21 at 22:27