All:
I am pretty new to Cache Control, I wonder how can I set cache policy for specific resource file.
Like:
I want to cache only JS file and image, but not css file(currently I am using Express.js and Chrome). A concrete example is appreciated.
Thanks
Related
My project with Nuxt JS is set with target:static and ssr: false.
This app need to connect to a local endpoint to retrieve some informations.
I have multiple endpoints and I need multiple instances of the app, every app must read only his endpoint.
The question is: how change the endpoint address for every app without rebuild everyone?
I tried with env file or a json file in the static folder (in order to have access to this file in the dist folder after the build process).
But if I modify the content of the env/json file in the dist folder and then reload the webpage (or also restart the web server that serve the dist folder), the app continue to use the original endpoint provided at the build time.
There is a way or I have to switch to server side rendering mode (which I would rather not use)?
Thank you!
When you use SSG, it will bundle your app at build time. Last time I checked, there was no hack regarding that. (I don't have the Github issue under my hand but it's a popular one)
And at the same time, I don't really see how it would be done since you want to mix something static and dynamic at the same time.
SSR is the only way here.
Otherwise, you may have some other logic to generate dynamic markup when updating your endpoints (not related to Nuxt) by fetching a remote endpoint I guess.
With the module nuxt content it's possible to create a folder "/content" in project directory and read json files from that directory.
After, when creating the dist with nuxt generate command, the "content" folder it's included in "_nuxt" folder of the dist and if you modify the content of the json file and refresh the webpage that read it, will take the new values.
I've just set up a static website on Amazon S3. I'm also using the Cloudfront CDN service.
According to Amazon, there are 2 methods available for clearing the Cloudfront cache: invalidation and versioning. My question is regarding the latter.
Consider the following example:
I link to an image file (image.jpg) from my index.html file. I then decide to replace the image. I upload a second image with the filename: image_2.jpg and change the link in my index.html file.
Will the changes automatically take effect or is some further action required?
What triggers the necessary changes if the edited and newly uploaded files are located in the bucket and not the cache?
Versioning in CloudFront is nothing more than adding (or prefixing) a version in the name of the object or 'folder' where objects are in stored.
all objects in a folder v1 and use a URL like
https://xxx.cloudfront.net/v1/image.png
all objects contain a version in their name like image_v1.png and use a URL like https://xxx.cloudfront.net/image_v1.png
The second option is often a bit more work but then you don't need to upload new files which do not require to be updated (=cheaper in the context of storage). The first solution is often more clear and requires less work.
Using CloudFront Versioning requires more S3 storage but is often cheaper than creating many invalidations.
The other way to invalidate the cache is to create invalidations (can be expensive). If you don't really need invalidations but just need more quick cache refreshes (default 24h) then you can update the origin TTL settings (origin level) or set cache duration for an individual object (object level).
Your cloudfront configuration has a cache TTL, which tells you when the file will be updated, regardless of when the source changes.
If you need it updated right away, use the invalidation function on your index.html file
I'll chime in on this in case anyone else comes here looking for what I did. You can set up Cloudfront with S3 versioning enabled and reference specific S3 versions if you know which version you need. I put it behind a presigned Cloudfront URL and ended up with this in the Java SDK:
S3Properties s3Properties... // Custom properties pulled from a config file
String cloudfrontUrl = "https://" + s3Properties.getCloudfrontDomain() + "/" +
documentS3Key + "?versionId=" + documentS3VersionId;
URL cloudfrontSignedUrl = new URL(CloudFrontUrlSigner.getSignedURLWithCannedPolicy(
cloudfrontUrl,
s3Properties.getCloudfrontKeypairId(),
SignerUtils.loadPrivateKey(s3Properties.getCloudfrontKeyfilePath()),
getPresignedUrlExpiration()));
I am using wp-minify and css and scripts file aggregation plugin for website optimization.
Can anybody answer the following
Which plugin is considered good for Database optimization?
How to add expiry headers to javascripts,images and stylesheet?
Which plugin is good for enabling cache for website's better performance?
There are several plugins that helps to create a cache and instead of fetching content from the database the content is loaded from the cache i.e. html version.
Moreover, you need to follow the few SEO guidelines that I have mentioned below to optimize your wordpress website for search engine like Google.
http://wordpress-tuts.blogspot.com/2017/05/best-ways-to-optimize-and-boost-seo-of.html
For expiry headers you can modify the .htaccess file in your website root folder. You can set the expiry time for all files in said root.
Here is a simple guide:
http://softstribe.com/wordpress/how-to-add-expires-headers-in-wordpress/
I've been trying to set up a static website on Amazon S3. I've got things set up to use my personal domain, and so far I've been able to access the content just fine. All the links work, both for pages in the "root" directory and pages in subfolders, so it seems that S3 can follow the paths I'm using.
The problem is that none of the CSS stylings is being applied to the pages (it works fine on the development server on my local machine). I've tried using relative and absolute paths, but this doesn't seem to be the problem. I can see the content just as it should be, and I can navigate the site normally, but there's just no styling.
I've tried messing with permissions on the folders, but I'm clearly not getting something right. Am I missing something obvious? Surely S3 can use individual stylesheets?
Thanks in advance for any thoughts.
The reason is, amazon S3 sets the content-type of css files to binary/octet-stream, follow this tutorial to solve this issue.
You need to select your css file and then from the Properties tab click on Metadata. This is to assign optional metadata to the object as a name-value pair. The Content-Type key must have the Value text/css
I am trying to use it to cache all the static files for my application (images, JS etc.) but I am running into a problem. My cache manifest file can looks like this:
CACHE MANIFEST
CACHE:
templates/v2/css/somecss.css
templates/v2/js/somejs.js
templates/v2/images/someimages.jpg
NETWORK:
*
This does cache those files that I have added to it (a few hundred so I omitted most of them out) but it also caches pages that I don't want (ex. index.php). It dramatically lowers the loadtime of the whole application but I need it not to cache any php files. I am using MultiViews if that makes any difference.
I have also tried adding a list of the files that I don't want cached under network but it still caches them. The full file can be found at https://app.emailsmsmarketing.com/cache.manifest
The problem might not be with the manifest itself.
Are you adding the manifest attribute to all your php pages? That could be the issue.
The manifest attribute should be included on every page of your web
application that you want cached. The browser does not cache a page if
it does not contain the manifest attribute (unless it is explicitly
listed in the manifest file itself. This means that any page the user
navigates to that include a manifest will be implicitly added to the
application cache.
http://www.html5rocks.com/en/tutorials/appcache/beginner/#toc-manifest-file-reference
You can also specify the .php files which you do not want to be cached in the NETWORK section. WHichever file you specify here will be accessed from the server.
You can make use of wildcard i believe for all php files