I got a website with Zymic free hosting service and I added the following .htaccess to the main folder:
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
</ifmodule>
<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 week”
# Javascript
ExpiresByType application/javascript "access plus 3 month"
</IfModule>
This is for caching and compressing but when I check with google PageSpeed insights and other tools like it it's telling me there is no compressing or caching in my site.
What might be the problem?
Related
I'm trying to add browser caching rules to my .htaccess file, with different expiry rules for files in a certain directory. The general rules are being applied OK but the directory specific rules are not.
This is the section in my .htaccess file (the FilesMatch rule is to target the directory):
<IfModule mod_expires.c>
ExpiresActive On
# Images
ExpiresByType image/jpeg "access plus 1 day"
ExpiresByType image/gif "access plus 1 day"
ExpiresByType image/png "access plus 1 day"
ExpiresByType image/webp "access plus 1 day"
ExpiresByType image/svg+xml "access plus 1 day"
ExpiresByType image/x-icon "access plus 1 day"
# CSS, JavaScript
<FilesMatch "^(assets/foundation/5.5.3)$">
ExpiresByType text/css "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
</FilesMatch>
ExpiresByType text/css "access plus 1 day"
ExpiresByType text/javascript "access plus 1 day"
ExpiresByType application/javascript "access plus 1 day"
# Others
ExpiresByType application/pdf "access plus 1 day"
</IfModule>
These are the files I'm trying to target:
https://cm.anyware.co.nz/assets/foundation/5.5.3/css/normalize.css
https://cm.anyware.co.nz/assets/foundation/5.5.3/css/foundation.min.css
https://cm.anyware.co.nz/assets/foundation/5.5.3/js/vendor/modernizr.js
https://cm.anyware.co.nz/assets/foundation/5.5.3/js/vendor/jquery.js
https://cm.anyware.co.nz/assets/foundation/5.5.3/js/foundation.min.js
https://cm.anyware.co.nz/assets/foundation/5.5.3/js/foundation.dropdown.js
https://cm.anyware.co.nz/assets/foundation/5.5.3/js/foundation.topbar.js
GTMetrix says these static components do not have a far-future expiration date.
What am I doing wrong please?
<FilesMatch "^(assets/foundation/5.5.3)$">
The <FilesMatch> (and <Files>) directive matches against the filename only, eg, normalize.css, foundation.min.css, etc. which is not what you require.
The easiest way to target this specific directory only is to create another .htaccess file in this directory with the necessary overrides.
Alternatively, you can use an Apache Expression on Apache 2.4+ and check against the REQUEST_URI, although this isn't necessarily the same as the directory (depending on your system).
For example:
<If "%{REQUEST_URI} =~ m#^/assets/foundation/5\.5\.3/#">
ExpiresByType text/css "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
</If>
I have pasted this code :
BEGIN Leverage Browser Caching Headers
<IfModule mod_expires.c>
ExpiresActive on
# Perhaps better to whitelist expires rules? Perhaps.
ExpiresDefault "access plus 1 month"
# cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
ExpiresByType text/cache-manifest "access plus 0 seconds"
# Your document html
ExpiresByType text/html "access plus 0 seconds"
# Data
ExpiresByType text/xml "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType application/json "access plus 0 seconds"
# Feed
ExpiresByType application/rss+xml "access plus 1 hour"
ExpiresByType application/atom+xml "access plus 1 hour"
# Favicon (cannot be renamed)
ExpiresByType image/x-icon "access plus 1 week"
ExpiresByType image/icon "access plus 1 week"
ExpiresByType image/ico "access plus 1 week"
# Media: images, video, audio
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"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"
# HTC files (css3pie)
ExpiresByType text/x-component "access plus 1 month"
# 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
AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml
# 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 image/svg+xml "access plus 1 year"
# CSS and JavaScript
ExpiresByType text/css "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
<IfModule mod_headers.c>
Header append Cache-Control "public"
</IfModule>
</IfModule>
END Leverage Browser Caching Headers
BEGIN Enable Gzip
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
Or, compress certain file types by extension:
<files *.html>
SetOutputFilter DEFLATE
</files>
END Enable Gzip
BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
END WordPress
when I run GoogleInsights anlayze tool I see that de compression(code) is recognized but the browser cashing code is not been recognized !!! I don't understand why because this is default code (for Apache server)which been advised? my website is http://computertechnet.nl .
how I can solve this problem ?
thanks
johannes
This is a non-issue. When I run your site through Google Page Insights, it does flag "Leverage browser caching" under the "Consider Fixing" section, but when I expand this I see the following:
Leverage browser caching
Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded
resources from local disk rather than over the network.
Leverage browser caching for the following cacheable resources:
http://maps.googleapis.com/…ps/api/js?v=3.exp&sensor=false&ver=4.3.1
(30 minutes)
In other words everything hosted on your site is cached correctly, but a bit of Javascript you pull in from another site (Google ironically enough!) is only being cached for 30 mins and Google Page Insights thinks that's not long enough.
So everything else on your site is being cached. If it wasn't it would be flagged under the "Should Fix" section. So don't worry about this.
Yes it's annoying that Google Page Insights doesn't recognise that 1) This is an external resource and 2) It's a Google external resource so they should not flag it.
I suspect you're concentrating too much on the headline number (60/100) but that's mainly caused by the fact that your server is too slow (3 seconds to respond), you have a, quick frankly, ridiculous 22 different css stylesheets (adding another 3 seconds to load time) and you have a 1.5Mb image.
See here:
http://www.webpagetest.org/result/151126_DX_17W7/
Websites should load in under 2 seconds - ideally in under 100ms to be completely unnoticeable to users but that's pretty much impossible to achieve. Your website takes at least 9 seconds.
I'm trying to achieve the best caching/ gzip/ speed with my .htaccess so far I have nothing, can some one help me achieve this?
GZip and caching don't really work together if you are serving all your resources from a single Apache server (or any server as far as I can tell). It's complicated, but you can read about it here:
https://issues.apache.org/bugzilla/show_bug.cgi?id=39727
Skip to Roy Fielding's synopsis of the futility of this approach here:
https://issues.apache.org/bugzilla/show_bug.cgi?id=39727#c31
Basically, you undermine some of HTTP's verbs (PUT and conditional GETs) in such a way that it becomes very difficult to manage when you're dealing with a chain of servers.
The short story is, just enable client-side caching for the biggest single performance boost. If you can serve different files from different servers (e.g. staticfiles.mydomain.com and dynamicfiles.mydomain.com) then you can enable GZip on the dynamic content if you are NOT caching it.
Here is a basic setup for static file caching in .htaccess (RECOMMENDED):
# Apache Cache Setting
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 hours"
ExpiresByType text/html "modification plus 1 days"
ExpiresByType text/css "modification plus 1 days"
ExpiresByType application/x-javascript "modification plus 1 days"
ExpiresByType application/javascript "modification plus 1 days"
ExpiresByType image/gif "access plus 1 years"
ExpiresByType image/jpeg "access plus 1 years"
ExpiresByType image/jpg "access plus 1 years"
ExpiresByType image/png "access plus 1 years"
EXpiresByType application/x-shockwave-flash "access plus 1 years"
ExpiresByType video/x-flv "access plus 1 years"
</IfModule>
In case you don't care about the arguments above, there is a work-around
if you really want to enable both caching and GZip (but it is NOT recommended):
SetOutputFilter DEFLATE
<IfModule mod_deflate.so>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE image/svg+xml
</IfModule>
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 hours"
ExpiresByType text/html "modification plus 1 days"
ExpiresByType text/css "modification plus 1 days"
ExpiresByType application/x-javascript "modification plus 1 days"
ExpiresByType application/javascript "modification plus 1 days"
ExpiresByType image/gif "access plus 1 years"
ExpiresByType image/jpeg "access plus 1 years"
ExpiresByType image/jpg "access plus 1 years"
ExpiresByType image/png "access plus 1 years"
EXpiresByType application/x-shockwave-flash "access plus 1 years"
ExpiresByType video/x-flv "access plus 1 years"
</IfModule>
# remove the ETag (which circumvents the problem but invalidates
# an important part of the caching (i.e. uniqueness).
# This is not a good thing!!
FileETag None
Good luck! :)
I am having issues with Leverage browser caching.
I have created this .htaccess file and am using it on my server but it doesnt appear to be working, i copied this from here "http://www.samaxes.com/2011/05/improving-web-performance-with-apache-and-htaccess/".
I am most likly making a basic mistake so any help would be nice.
here are some details. I am working on a subdomain lets call it "sub" and the main domain "example".
so i want everything in http://sub.example.com/ for the htaccess file to work on.
on my server i placed the .htaccess file in sub's main directory which is seperate to the main one for example.
I am running an apache2 server with both mod_headers and mod_expires enabled also.
Cheers.
<ifModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/xml text/css text/plain
AddOutputFilterByType DEFLATE image/svg+xml application/xhtml+xml application/xml
AddOutputFilterByType DEFLATE application/rdf+xml application/rss+xml application/atom+xml
AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript application/json
AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-otf
AddOutputFilterByType DEFLATE font/truetype font/opentype
</ifModule>
<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"
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>
<filesMatch "\\.(ico|pdf|flv|jpg|jpeg|png|gif|swf|mp3|mp4)$">
Header set Cache-Control "max-age=2592000, private"
Header set Expires "Sun, 17 July 2013 20:00:00 GMT"
</filesMatch>
<filesMatch "\\.(css|css.gz)$">
Header set Cache-Control "max-age=604800, private"
</filesMatch>
<filesMatch "\\.(js|js.gz)$">
Header set Cache-Control "max-age=604800, private"
</filesMatch>
<filesMatch "\\.(xml|txt)$">
Header set Cache-Control "max-age=216000, private, must-revalidate"
</filesMatch>
<filesMatch "\\.(html|htm)$">
Header set Cache-Control "max-age=7200, private, must-revalidate"
</filesMatch>
FileETag None
looks very messy.
You also have redundant rules like
ExpiresByType application/javascript "access plus 216000 seconds"
and
<filesMatch "\\.(js|js.gz)$">
Header set Cache-Control "max-age=604800, private"
</filesMatch>
Try using the cleaner (and up to date) rules from the html5-boilerplate or checkout all the
h5bp server configs
only use this one and have a try:
<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"
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>
Like #Anthony Hatzopoulos pointed out, you are using duplicate configurations and they might be conflicting. Of course if you like you can use "fileMatch" way as well but the thing is they are not nice code. Please note if you use "fileMatch" then you don't use the code.
I am still pretty new to CakePHP and am having trouble figuring out how to optimize asset caching.
Back when I still coded in pure PHP, this is what I would do with my .htaccess and header.inc.php files:
.htaccess:
<IfModule mod_rewrite.c>
# Turn the rewrite engine on
RewriteEngine On
# The following rewrite rule makes it so that if a URL such as
# http://example.com/css/style.1291314030.css is requested
# then it will actually load the following URL instead (if it exists):
#
# http://example.com/css/style.css
#
# This is to increase the efficiency of caching. See http://bit.ly/9ZMVL for
# more information.
RewriteCond %{DOCUMENT_ROOT}/$1/$2.$3 -f
RewriteRule ^(css|js)/(.*)\.[0-9]+\.(.*)$ /$1/$2.$3 [L]
</IfModule>
<IfModule mod_expires.c>
# Optimize caching - see http://yhoo.it/ahEkX9 for more information.
ExpiresActive On
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"
ExpiresByType image/x-icon "access plus 1 month"
ExpiresByType text/css "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType application/x-javascript "access plus 1 year"
</IfModule>
header.inc.php:
foreach ($css_to_use as $current_css)
{
echo "\n\t\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/$current_css." . filemtime("{$_SERVER['DOCUMENT_ROOT']}/css/$current_css.css") . ".css\">";
}
This setup worked quite well because when I worked on client websites, I never had to tell the client to perform a hard refresh or clear their cache; it was totally automatic and still had the benefits of caching.
I see that in CakePHP's "app/config/core.php" file, one can use this line of code:
Configure::write('Asset.timestamp', 'force');
However, that only makes the URLs look like this:
<link rel="stylesheet" type="text/css" href="/css/style.css?1291314030" />
So it doesn't work the way I'd like it to. What is the best way to achieve asset caching?
Thanks!
Appending a query string is effectively the same as changing the url, browsers will consider it different and reload the asset, be it CSS, images or anything else.
Step 1: Change your webroot .htacess to this
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
## EXPIRES CACHING ##
Step 2: sudo a2enmod expires
Step 3: sudo service apache2 restart
Step 4: Drink a beer, life is good.