I tried google pageSpeed to check the possibilities to enhance the performance of my REACT site(create through CRA). The analytics show that I need to Serve static assets with an efficient cache policy. It shows list of files in which I can control the caching. How could I do that?
I tried to set the cache-control header with max-Age, It only works on the files that are served from the back-end. Since the images, css and JS are served from the build/static folder. I am unable to set a cache-control value.
Related
We have an .NET app. After deployment, we noticed that a number of users had to clear their cache in order for the page to work properly.
I was wondering if an IIS app recycling would do the same thing so the users do not need to clear their local cache.
The server provides caching hints to the client in the response to each resource--many websites have different responses depending on the resource type (static files like .js libraries, css and images, versus dynamic results from .asp pages or API calls). You can use Postman or Fiddler or the developer tools in your browser to view the response headers...and then you can control expiration either in the web.config, the global.asax or your individual code file.
For more information see:
https://learn.microsoft.com/en-us/iis/configuration/system.webserver/staticcontent/clientcache
https://thedeveloperblog.com/expiration#:~:text=Expiration%20is%20key%20to%20caching%20in%20ASP.NET.%20We,performance%2C%20resulting%20in%20pages%20being%20expired%20much%20sooner.
I have managed to configure my Nginx (on top of Nodejs) to serve static files without the html extension (e.g. going to site.com/about serves the about.html page) - with help from these past questions: how to serve html files in nginx without showing the extension in this alias setup and https://serverfault.com/questions/346994/hide-html-file-extensions-using-nginx-rewrites
But I am unable to figure out how to set up Cloudflare page rules to work with this setup (the current page rules are setup to include static html files as well as js, css, etc.).
How do I configure cloudflare to serve the about.html page when the user goes to site.com/about, and also serve the team.html page when the user goes to site.com/about/team? Do I need to do anything special, or is the Nginx setup sufficient?
If CloudFlare caching of your static pages isn't required, there's no need for you do do anything, everything should work out of the box.
If you want CloudFlare to also cache those static pages, try setting up page rules to Cache Everything on your site:
Domain > Page Rules
Pattern: *site.com/*
Custom Caching > Cache everything
Once you setup the page rules, CloudFlare should cache your static pages and site.com/page1 should work. To clarify, your server is still serving the pages, not CloudFlare. With the page rules, you are simply instructing CF to cache what your server sends for site.com/page1, as opposed to fetching the page from your server for every visitor.
You can then add other Page Rules with higher priorities should you want to exclude certain endpoints from caching (e.g. an admin section). You won't need to do this if you're just hosting static HTML.
If this doesn't work, or if you need more control over what's being cached, check this CloudFlare support doc for more options.
Good luck!
I want to follow Google's directive in terms of cache headers for images, scripts and styles.
After reading symfony's documentation about http cache, I decided to install FOSHttpCacheBundle. The I set up rules for path like ^/Resources/ or ^/css/. I then fail to see it the proper headers for my images using Chrome's console.
Alternatively, I have read that, since my server is handling the resource, this is not Symfony that deals with this matter (yet I read in the doc that Symfony Proxy was good for shared-hosting servers, which is what I have).
So should I just add lines to my .htaccess as explained in here, or am I simply misusing FOSHttpCacheBundle? (Or both.)
Static files (including javascript files, CSS stylesheets, images, fonts...) are served directly by the web server. As the PHP module is not even loaded for such files, you must configure the server to set proper HTTP headers. You can do it using a .htaccess file if you use Apache but doing it directly in httpd.conf/apache2.conf/vhost conf (depending of your configuration) will be better from a performance point of view.
If you also want want to set HTTP cache headers for dynamic content (HTML generated by Symfony...), then you must use FosHttpCache or any other method provided by Symfonny such as the #Cache annotation.
I tested my site using yslow and I got Grade B in Configure Entity tags.
I tried below condition in .htaccess and my site's Etags are removed, but not from JS included by CDN like validate.min.js
Header unset Pragma
FileETag None
Header unset ETag
Here is the image,
How to configure etags from Validate plugin from CDN.
It can be possible duplicate of How to off Etag with htaccess? except that here I am getting problem with js included by CDN.
I believe the answer is: you can't. Configurations like the ETags can only be controlled by the host, in this cast the CDN.
I think it's safe to not worry about this for your site. Loading that JS from a CDN is already a win, and this CDN is correctly supporting top performance rules like minification, gzip compression, and future expiration dates.
How do I get my website to save images to clients computer and use them, not redownload them every page reload?
I tried to send header("Cache-Control: max-age=3600"); but that had no effect.
You'll need to sand caching headers for the image files, not for your HTML document. You can use the header function only if the files are actually served by a PHP script - not if they are static files handled by the web server. If they are static files, check the documentation for your web server of choice.
Also consider sending en Expires header, and disable ETags.