Given below is the code in my .htaccess file. On checking PageSpeed Insights, it still tells me to Leverage browser caching only for my png and jpg files. Could someone point out what could be wrong with the code? Would appreciate help! (The site is using a wordpress theme)
<IfModule mod_headers.c>
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf|svg)$">
Header set Expires "Wed, 15 Apr 2020 20:00:00 GMT"
Header set Cache-Control "public"
</FilesMatch>
</IfModule>
Assuming it is working correctly for the other extensions, my best guess is that perhaps your .jpg and .png files have uppercase letters in their extension (e.g. .JPG or .PNG). If that's the case try making your FilesMatch regular expression be case insensitive (see How to make this .htaccess rule case insensitive?).
Related
I have a static website hosted with Heroku's hobby tier. I have an issue where everytime I push a new deployment from my GitHub repository, my stylesheet doesn't update for hours (even though my HTML does). As the stylesheet displays correctly on an incognito tab and after clearing "Cached Images and Files," I assume locally cached website files are the issue. Is there a way to bypass this in order to update my CSS stylesheet after every deploy?
My stylesheet is ~600 lines if it matters.
Adding the following to my htaccess file worked for me.
<FilesMatch "\.(html|htm|js|css)$">
FileETag None
<IfModule mod_headers.c>
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 12 Jan 1980 05:00:00 GMT"
</IfModule>
</FilesMatch>
This prevents caching for HTML, HTM, JS, and CSS files.
so I get this for my website, https://gettysburgconnection.org when I run Google pagespeed insights.
Serve images in next-gen formats
17.1 s
Image formats like JPEG 2000, JPEG XR, and WebP often provide better compression than PNG or JPEG, which means faster downloads and less data consumption. Learn more.
WordPressConsider using a plugin or service that will automatically convert your uploaded images to the optimal formats.
OK, but I also know that adding plugins is not ideal. How should I (easily) convert my images going forward to .webp?
A plugin is your best option for WordPress unless you don't mind manually converting all your images to .webp.
However if you are against plugins (and I understand why given that they tend to cause endless issues and security holes) and you don't mind converting your images over using a custom or command line utility etc. there is an easy way to serve webP images.
What we do is use .htaccess to tell the server to look for the header that says a browser accepts webp images and redirect all requests for .jpg / .jpeg to the .webp version.
In case you have other formats you want to convert I have included conversion of .png files as well (RewriteRule ^/?(.+?)\.(jpe?g|png)$ /$1.$2.webp ) so that you can see how to add other image types using the | character in the regular expression.
For the following to work your .webp images must be placed in the same folder and named the same.
.htaccess for serving webp images
AddType image/webp .webp
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} -f
RewriteCond %{REQUEST_FILENAME}.webp -f
RewriteRule ^/?(.+?)\.(jpe?g|png)$ /$1.$2.webp [NC,T=image/webp,E=EXISTING:1,E=ADDVARY:1,L]
<IfModule mod_headers.c>
<FilesMatch "(?i)\.(jpe?g|png)$">
Header append "Vary" "Accept"
</FilesMatch>
</IfModule>
</IfModule>
It isn't ideal
The problem with the above is that it will serve webP images, but they will still have the .jpg extension.
They will render just fine as the browser will look at the mime type but it could cause some confusion if people try to save any images from your website.
Short answer is - find a decent and secure plugin to do this for you as the good ones will actually rename the files correctly and do all of the conversion for you.
I am trying to get mp4's to download immediately when they are opened. And I've succeeded at that. However, I'm also trying to make this happen, only when the link is accessed from a specific subdomain. I run a Wordpress Multisite
I've run the following code in the Ifmodule to no avail. All the videos download immediately, no matter where they are accessed from. I'm pretty sure I'm using the conditioning wrong, but I can't find a good example of how to do this.
RewriteCond %{HTTP_HOST} ^www\.subdomain.example\.com$
<FilesMatch "\.(mp4|MP4)">
ForceType application/octet-stream
Header set Content-Disposition attachment
</FilesMatch>
Thanks for reading! (Double thanks for any help.)
Put the FileMatch directive in the vhost configuration for your domain. So, if the file sub.conf contains information about www.subdomain.example.com, you just have to add the following there:
<FilesMatch "\.[mM][pP]4">
ForceType application/octet-stream
Header set Content-Disposition attachment
</FilesMatch>
Instead of relying on the server to gizip compress css and js file, is it a good/bad idea to gzip the file, store these on the server and link to those files in the html.
Instead of
<script src="../Scripts/compiled.js"></script>
Have this:
<script src="../Scripts/compiled.js.gzip"></script>
And same with CSS?
I tried but it's not working; the files don't seem to decompress. I get Resource interpreted as Stylesheet but transferred with MIME type application/x-gzip: Is this even possible?
Your Gzip file should have response header Content-Encoding: gzip while Content-Type should be text/javascript for JavaScript files or text/css for CSS files.
For me, following .htaccess rules does work:
AddEncoding x-gzip .gz
RewriteEngine On
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.*)$ $1.gz [QSA,L]
<FilesMatch \.js\.gz$>
ForceType "text/javascript; charset=utf-8"
Header set Cache-control: private
</FilesMatch>
Header set Vary: Accept-Encoding can be used instead of Header set Cache-control: private to prevent returning Gzipped version to user-agents that do not support Gzip compression.
.htaccess file should be placed in directory that contains js.
Gzipped and nongzipped versions should be placed side by side (filename for gzipped version contains .gz postfix). Gzip-encoded version is returned transparently (if .gz version exists and browser supports Gzip which Accept-encoding request header is responsible for) when requesting usual file without Gzip mentioned explicitly in its URL.
P.S. Ah, you are using ASP.net, and therefore it's apparently running under IIS. Well, recent versions of IIS have .htaccess-like functionality, AFAIK.
On a page with update panel on a button click I have put some code to generate CSV .
When I click on Open in File dialog CSV file shown comes from browser cache.Every time it shows old csv.I have checked on server the csv file is created new but browser show old files.
Rather than impractical work arounds, you should instead focus on changing the servers cache control settings, provided you are on an apache server, then update your .htaccess file with:
<filesMatch "\.(csv)$">
FileETag None
<ifModule mod_headers.c>
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
</ifModule>
</filesMatch>
This will switch off caching of .csv files.
A Simple way to avoid that is to add a random string on the end of the file, something like
/YourFile.csv?rnd=4707
or you can place some cache headers to not let it cache, for example
Response.Cache.SetExpires(DateTime.UtcNow.AddYears(-4));
Response.Cache.SetNoStore();
Response.Cache.SetValidUntilExpires(false);
Response.Cache.SetCacheability(HttpCacheability.NoCache);