Set an ETag on all images - apache

I'm trying to set an ETag on all images served through apache, per Google's recommendation here: https://developers.google.com/speed/docs/best-practices/caching. Here's my .htaccess:
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 5 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
</ifModule>
<IfModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf)$">
Header set Cache-Control "public"
FileETag MTime Size
</filesMatch>
</IfModule>
For some reason, that's not working. The HTTP headers on images have cache-control set but not an ETag. The website where I'm working this is: http://bestnovapainters.com/
Some other things running on the site (might be helpful to know): Wordpress 3.8.1, PHP 5.4.1, Clouflare CDN.
Thanks!

Related

is disabling ETAG and Last-Modifed a good option .htaccess

I'm using the below code for caching of files in .htaccess
<IfModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(css|scss)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(js)$">
Header set Cache-Control "private"
</filesMatch>
<filesMatch "\.(x?html?|xml)$">
Header set Cache-Control "private, must-revalidate"
</filesMatch>
#Header unset ETag
#Header unset Last-Modified
</IfModule>
I'm a bit confused if i should comment the #Header unset ETag and #Header unset Last-Modified or not
below is my default.conf file on apache
CacheQuickHandler off
CacheLock on
CacheLockPath /tmp/mod_cache-lock
CacheLockMaxAge 5
CacheIgnoreHeaders Set-Cookie
<Location />
CacheEnable disk
CacheHeader on
CacheDefaultExpire 600
CacheMaxExpire 86400
CacheLastModifiedFactor 0.5
ExpiresActive on
ExpiresDefault "access plus 1 week"
ExpiresByType image/x-icon "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/png "access plus 1 month"
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/ld+json "acesss plus 1 day"
# This part sets the expires for the fonts
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-opentype "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
#Header merge Cache-Control public
FileETag All
</Location>
Kindly anyone help me with this confusion what should i do to achieve maximum and best compression.
Etag and Last-Modified have nothing to do with compression, they are cache'ing options. Which is OK to unset anyway because they conflict with Cache-Control, which is a better cache method. So yes, you may disable it.
If you are looking for compression, look into Apache's mod_deflate, mod_gzip or mod_brotli.

How do I leverage browser caching of .woff fonts?

In PageSpeed Insights I keep seeing the message to leverage browser caching of a particular iconset/font I'm using: iconFont.woff (2 days)
I've set my .htaccess as so:
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType font/ttf "access 1 week"
ExpiresByType font/woff "access 1 week"
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 week"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES CACHING ##
Despite this I'm still getting the same message in PageSpeed Insights. How do I cache this properly?
This is doing the job for me, as Google page speed is no longer asking to fix it. The AddType is essential.
# Fonts
# Add correct content-type for fonts
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType image/svg+xml .svg
# Compress compressible fonts
# only uncomment if you dont have compression turned on already. Otherwise it will cause all other filestypes not to get compressed
# AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml
ExpiresActive on
# Add a far future Expires header for fonts
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-opentype "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType application/font-woff2 "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 year"
With the help of Seb's IT blog this worked for me:
<IfModule mod_expires.c>
# Activate mod
ExpiresActive on
# Declare fonts content-type
AddType application/x-font-woff2 .woff2
# Set cache duration
ExpiresByType application/x-font-woff2 "access plus 1 month"
# Append "public" to header "Cache-Control"
<IfModule mod_headers.c>
Header append Cache-Control "public"
</IfModule>
</IfModule>

Keep-Alive doesn't allow all persistent connections

I want to speed up my website. I runned test on http://www.webpagetest.org/ website that checks performance and optimization of website.
I enabled Keep-Alive inside .htaccess file. Problem is that result of testing says that only 18% of all connections are allowed (that ones that are linked or included via google)
ScreenShot:
Can someone explain to me how to allow all connection?
CODE THAT I USED:
<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On
# Default directive
ExpiresDefault "access plus 1 month"
# My favicon
ExpiresByType image/x-icon "access plus 1 year”
# Images
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
# CSS
ExpiresByType text/css "access 1 month”
# Javascript
ExpiresByType application/javascript "access plus 1 year"
</IfModule>
<IfModule mod_headers.c>
<FilesMatch ".(js|css|xml|gz|html)$">
Header append Vary: Accept-Encoding
</FilesMatch>
</IfModule>
<IFModule mod_deflate.c>
<filesmatch "\.(js|css|html|jpg|png|php)$">
SetOutputFilter DEFLATE
</filesmatch>
</IFModule>
<IfModule mod_headers.c>
Header set Connection keep-alive
</IfModule>
Enable KeepAlive configuration in your Apache Configuration file
KeepAlive On

XAMPP loaded modules cause 500 in .htaccess

Why I get error 500? It's caused by .htaccess file
RewriteEngine On
RewriteBase /
AddDefaultCharset UTF-8
<IfModule mod_expires.c>
Header set cache-control: public
ExpiresActive on
ExpiresDefault "access plus 1 month"
ExpiresByType text/html "access plus 1 days"
ExpiresByType application/rss+xml "access plus 1 week"
ExpiresByType image/png "access plus 10 month"
ExpiresByType image/jpg "access plus 10 month"
ExpiresByType image/jpeg "access plus 10 month"
ExpiresByType image/gif "access plus 10 month"
ExpiresByType video/ogg "access plus 10 month"
ExpiresByType audio/ogg "access plus 10 month"
ExpiresByType video/mp4 "access plus 10 month"
ExpiresByType image/x-icon "access plus 10 month"
ExpiresByType font/ttf "access plus 10 month"
ExpiresByType image/svg+xml "access plus 10 month"
</IfModule>
<IfModule mod_headers.c>
<FilesMatch "\.(js|css|xml|gz)$">
Header append Vary: Accept-Encoding
</FilesMatch>
</IfModule>
Removing both sections
<IfModule mod_headers.c>
<IfModule mod_expires.c>
resolves problem.
I use XAMPP and those modules are present in \xampp\apache\modules:
mod_expires.so
mod_headers.so
Both are loaded with \xampp\apache\conf\httpd.conf:
LoadModule expires_module modules/mod_expires.so
LoadModule headers_module modules/mod_headers.so
Server was restarted.

how to store gzipped files on server with .htaccess setting (apache 2)?

i'm looking for a rule to set on my .htaccess for store a gzipped file on the server when it will gzipped from the server. If is it possible i can save the cpu from always gzip the same files and the server could simply send the gzipped file instead of gzipped it "on the fly".
This is my .htaccess configuration
# BEGIN Compress text files
<ifModule mod_deflate.c>
<filesMatch "\.(css|js|x?html?|php)$">
SetOutputFilter DEFLATE
</filesMatch>
</ifModule>
# END Compress text files
# BEGIN Expire headers
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 216000 seconds"
ExpiresByType application/javascript "access plus 216000 seconds"
ExpiresByType application/x-javascript "access plus 216000 seconds"
ExpiresByType text/html "access plus 600 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>
# END Expire headers
# BEGIN Cache-Control Headers
<ifModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
<filesMatch "\.(css)$">
Header set Cache-Control "max-age=604800, public"
</filesMatch>
<filesMatch "\.(js)$">
Header set Cache-Control "max-age=216000, private"
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Header set Cache-Control "max-age=600, private, must-revalidate"
</filesMatch>
</ifModule>
# END Cache-Control Headers
# BEGIN Turn ETags Off
<ifModule mod_headers.c>
Header unset ETag
</ifModule>
FileETag None
# END Turn ETags Off
# BEGIN Remove Last-Modified Header
<ifModule mod_headers.c>
Header unset Last-Modified
</ifModule>
# END Remove Last-Modified Header
thanks