How to optimize html and css files?

Asked

Viewed 195 times

4

Optimization does not compress html and css files. After compressing them into minifier html and minifier css and putting the following code in htaccess(see below) still not accusing the compression in the reader I use, woorank, that is, what I lack for the seo reader to accuse the compression? 

<IfModule deflate_module>
    # Enable compression for the following file types.
    AddOutputFilterByType            \
     DEFLATE                         \
      application/javascript         \
      text/css                       \
      text/html                      \
      text/javascript                \
      text/plain                     \
      text/xml
</IfModule>
html css htaccess

  • Boas Here is a site where you have tools that can help you... http://richardstoolbox.com/ But for your case I advise you to look for something like GZIP Compression

  • Thanks for the tip. It has very useful tools. I have the Gzip code in htaccess, the server is correct and the test is compressed but at the speed of devices continues the request to compress css

1 answer

1

Use this code in . htaccess to cache and improve performance:

#Força a utilizar Cache-Control e Expires header
<IfModule mod_headers.c>
  Header unset ETag
</IfModule>

FileETag None

<IfModule mod_expires.c>

 ExpiresActive on
 ExpiresDefault "access plus 1 month"
 ExpiresByType text/cache-manifest "access plus 0 seconds"

 # 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
 ExpiresByType image/x-icon "access plus 1 year"

 # 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
 ExpiresByType text/x-component "access plus 1 month"

 # Webfonts
 ExpiresByType application/x-font-ttf "access plus 1 month"
 ExpiresByType font/opentype "access plus 1 month"
 ExpiresByType application/x-font-woff "access plus 1 month"
 ExpiresByType image/svg+xml "access plus 1 month"
 ExpiresByType application/vnd.ms-fontobject "access plus 1 month"

 # CSS / JS
 ExpiresByType text/css "access plus 1 year"
 ExpiresByType application/javascript "access plus 1 year"
 ExpiresByType application/x-javascript  "access plus 1 year"

</IfModule>

#Força o IE a sempre carregar utilizando a última versão disponível
<IfModule mod_headers.c>
  Header set X-UA-Compatible "IE=Edge,chrome=1"
  <FilesMatch "\.(js|css|gif|png|jpeg|pdf|xml|oga|ogg|m4a|ogv|mp4|m4v|webm|svg|svgz|eot|ttf|otf|woff|ico|webp|appcache|manifest|htc|crx|oex|xpi|safariextz|vcf)$" >
    Header unset X-UA-Compatible
  </FilesMatch>
</IfModule>

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-httpd-fastphp
AddOutputFilterByType DEFLATE application/x-httpd-eruby
AddOutputFilterByType DEFLATE text/html

SetOutputFilter DEFLATE

BrowserMatch ^Mozilla/4 gzip-only-text/html

BrowserMatch ^Mozilla/4.0[678] no-gzip

BrowserMatch ^HMSI[E] !no-gzip !gzip-only-text/html

SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary
</IfModule>

  • Thanks Fabricio for the tip

Browser other questions tagged html css htaccess

You are not signed in. Login or sign up in order to post.