I am trying to enable Gzip compression as per the Google pagespeed suggestions as to how to get my site to load faster.
I have tried the suggested addition to my .htaccess file as found on https://varvy.com/pagespeed/enable-compression.html but it does not work correctly.
My current .htaccess file contains the following code. The rewrite rule works correctly as does the caching of the various file types. I am not experienced in working with the .htaccess file, so excuse me if I have made an obvious error. I have tried reading around the issue but can't seem to find the answer I need.
RewriteEngine On
RewriteCond %{HTTP_HOST} ^example.co.uk [NC]
RewriteRule ^(.*)$ http://www.example.co.uk/$1 [L,R=301]
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/png "access 1 month"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType image/x-icon "access 1 month"
ExpiresByType application/x-font-woff "access 1 month"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##
<IfModule mod_headers.c>
<FilesMatch "\.(js|css|xml|gz|html|htm)$">
Header append Vary: Accept-Encoding
</FilesMatch>
</IfModule>
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>
Looks like I needed mod_deflate instead of mod_gzip.
Added the following to my .htaccess file and it now compresses files correctly:
<FilesMatch "\.(html?|txt|css|js|php|pl)$">
SetOutputFilter DEFLATE
</FilesMatch>
Related
I have built my static html on heroku. Here's the link: https://askheating.herokuapp.com/
Now when I am performing a test on GTMetrix, I have got a very bad score due to leverage browser caching.
This is my .htaccess script
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
# BEGIN Expire headers
<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>
# END Expire headers
# BEGIN Cache-Control Headers
<ifModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(css)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(js)$">
Header set Cache-Control "private"
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Header set Cache-Control "private, must-revalidate"
</filesMatch>
</ifModule>
# END Cache-Control Headers
# This is for gzip, which compresses files
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>
#Remove the Need for www in Your URL
RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_HOST} ^www.askheating.herokuapp.com [NC]
RewriteRule ^(.*)$ https://askheating.herokuapp.com/$1 [L,R=301]
RewriteCond %{HTTPS} !on
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI}
# disable directory browsing
Options All -Indexes
But still I'm getting this
Now I dont know how to play with nginx, and whwre to find all that stuff..
please help!!
Browser caching for .htaccess
The code below tells browsers what to cache and how long to "remember" it. It should be added to the top of your .htaccess file.
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##
Save the .htaccess file and then refresh your webpage.
How to set different caching times for different file types
You can see in the above code that there are time periods like "1 year" or "1 month". These are associated with file types, as an example the above code states that a .jpg file (image) should be cached for a year.
If you want to change that and say you want your jpg images cached for a month you would simply replace "1 year" with "1 month". The values above are pretty optimized for most webpages and blogs.
Alternate caching method for .htaccess
The above method is called "Expires" and it works for most people using .htaccess so it takes care of caching for most people who are just getting started.
After you are more comfortable with caching, you may want to try Cache-Control, another method of caching which gives us more options.
It is also possible the expires method did not work for your server, in that case you may want to try to use Cache-Control.
Cache-Control
Cache-Control allows us to have a bit more control of our browser caching and many people find it easier to use once setup.
Example use in .htaccess file:
# 1 Month for most static assets
<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
The above code is setting a cache control header depending on file type.
https://varvy.com/pagespeed/leverage-browser-caching.html
https://medium.com/#codebyamir/a-web-developers-guide-to-browser-caching-cc41f3b73e7c
i have a wordpress site and i want to optimize website by htaccess
this is my gtmetrix analyze
https://gtmetrix.com/reports/akhbartop.com/nDZRjsNK
i want optimize my website without using plugin.before i used wp-rocket but does not effect in my website as well.
# 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
<files wp-config.php>
order allow,deny
deny from all
</files>
# Block the include-only files.
RewriteEngine On
RewriteBase /
RewriteRule ^wp-admin/includes/ - [F,L]
RewriteRule !^wp-includes/ - [S=3]
RewriteRule ^wp-includes/[^/]+\.php$ - [F,L]
RewriteRule ^wp-includes/js/tinymce/langs/.+\.php - [F,L]
RewriteRule ^wp-includes/theme-compat/ - [F,L]
#Gzip - compress text, html, javascript, css, xml
<ifmodule mod_deflate.c>
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
</ifmodule>
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>
#End Gzip
# BEGIN Compress text files
<ifModule mod_deflate.c>
<filesMatch "\.(css|js|x?html?|php|woff|ttf|png|jpg|gif)$">
SetOutputFilter DEFLATE
</filesMatch>
</ifModule>
# END Compress text files
<ifModule mod_headers.c>
Header set Connection keep-alive
</ifModule>
# BEGIN Expire headers
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType application/x-javascript "access plus 1 year"
ExpiresByType text/html "access plus 600 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"
ExpiresByType font/ttf "access plus 1 year"
ExpiresByType font/woff "access plus 1 year"
</ifModule>
# END Expire headers
# BEGIN Cache-Control Headers
<ifModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf|woff|ttf)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
<filesMatch "\.(css)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
<filesMatch "\.(js)$">
Header set Cache-Control "max-age=2592000, 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
I upload my angular 2 website on aws s3. Now, when I am checking page speed, It is saying to enable gzip compression to improve speed. I added .htaccess file in src folder with below code. But I can't see any effect of it.
<IfModule mod_deflate.c>
<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
</IfModule>
</IfModule>
# Compress all output labeled with one of the following MIME-types
# (for Apache versions below 2.3.7, you don't need to enable `mod_filter`
# and can remove the `<IfModule mod_filter.c>` and `</IfModule>` lines
# as `AddOutputFilterByType` is still in the core directives).
<IfModule mod_filter.c>
AddOutputFilterByType DEFLATE application/atom+xml \
application/javascript \
application/json \
application/ld+json \
application/rss+xml \
application/vnd.ms-fontobject \
application/x-font-ttf \
application/x-web-app-manifest+json \
application/xhtml+xml \
application/xml \
font/opentype \
image/svg+xml \
image/x-icon \
text/css \
text/html \
text/plain \
text/x-component \
text/xml
</IfModule>
</IfModule>
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/javascript.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "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"
</ifModule>
<ifModule mod_headers.c>
<filesMatch "\\.(ico|pdf|flv|jpg|jpeg|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 "\\.(xml|txt)$">
Header set Cache-Control "max-age=216000, public, must-revalidate"
</filesMatch>
<filesMatch "\\.(html|htm|php)$">
Header set Cache-Control "max-age=1, private, must-revalidate"
</filesMatch>
</ifModule>
<ifModule mod_headers.c>
Header unset ETag
</ifModule>
FileETag None
<ifModule mod_headers.c>
Header unset Last-Modified
</ifModule>
Please help me to achieve it.
S3 does not support .htaccess directives.
There are two options you can use.
Option 1.
Compress your content yourself, using gzip and then set the header Content-Encoding: gzip when you upload the objects in S3. Do not use a .gz extension on the uploaded object keys.
Option 2.
Use CloudFront + S3 for your site. In the CloudFront configuration, under Cache Behavior, enable Compress Objects Automatically.
I have one shopify site ,To increase my site speed i need to make some improvement in "caching" and "compression" section
For that i have some code that i need to add in .ht-access page
here is my code
Header unset Pragma
FileETag None
Header unset ETag
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##
<FilesMatch "\\.(js|css|html|htm|php|xml)$">
SetOutputFilter DEFLATE
</FilesMatch>
<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>
How this can be done . if not really possible what is the solution ?
Can any one help on this ?
Unfortunately, Shopify doesn't give you access to .htaccess file. Nevertheless, Shopify does an amazing job with the resources. Unless you are frequently changing theme files or adding new files to the files sections, Shopify's version caching is one of the best.
I just wish to check If code for .htacess file is good. I wish to implement catching on site, so I found code and edited just time for my needs.
I wish to cache flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|swf files for 1 month, gif|jpg|jpeg|png|js|css files for 2 weeks, xml|txt|htm|html files for 1 day and not to cache php|cgi|pl files.
What I need is this:
Is Code ok, or there is maybe some mistake in it?
Do I need both mod_headers.c and mod_expires.c in my .htacces file, and can be both, or just one?
This is code for .htaccess file:
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault A86400
ExpiresByType image/x-icon A2592000
ExpiresByType application/x-javascript A1209600
ExpiresByType text/css A1209600
ExpiresByType image/gif A1209600
ExpiresByType image/png A1209600
ExpiresByType image/jpeg A1209600
ExpiresByType text/plain A86400
ExpiresByType application/x-shockwave-flash A2592000
ExpiresByType video/x-flv A2592000
ExpiresByType application/pdf A2592000
ExpiresByType text/html A86400
</IfModule>
<ifmodule mod_headers.c>
## Turn on Expires and set default expires to 1 day
ExpiresActive On
ExpiresDefault A86400
## Set up caching on media files for 1 month
<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|swf)$">
ExpiresDefault A2592000
Header append Cache-Control "public"
</FilesMatch>
## Set up caching on images css and js files for 2 weeks
<FilesMatch "\.(gif|jpg|jpeg|png|js|css)$">
ExpiresDefault A1209600
Header append Cache-Control "public"
</FilesMatch>
## Set up 1 day caching on commonly updated files
<FilesMatch "\.(xml|txt|htm|html)$">
ExpiresDefault A86400
Header append Cache-Control "private, must-revalidate"
</FilesMatch>
## Force no caching for dynamic files
<FilesMatch "\.(php|cgi|pl)$">
ExpiresDefault A0
Header set Cache-Control "no-store, no-cache, must-revalidate, max-age=0"
Header set Pragma "no-cache"
</FilesMatch>
</ifmodule>
And do I need to put this too
<ifModule mod_headers.c>
Header unset ETag
</ifModule>
FileETag None
And also which is better for compression to use:
<ifModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript
</ifModule>
or
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>