How to speed up web page access_html/css_WEB-ITnose

How to improve web page loading speed?

1. Minimize HTTP requests

80% of the time is spent on requests for images, stylesheets, scripts, Flash
and so on.
Then the best way to improve website speed is to simplify your design.

. Simplify the elements on your page
. Use CSS instead of images whenever possible
. Merge multiple stylesheets into one
. Reduce scripts and put them on the page Bottom

2. Reduce server response time

(1) chrome page speed check plug-in pagespeed

(2) Online detection

(3) Use YSlow to detect

3. Enable compression

Consider using gzip compression to transmit 90% of browser support gzip
such as yahoo reduces download time by 70%

apache: use mod_deflate
nginx: use HttpGzipMoudle
iis: use Configure HTTP Compression

(1) apache
English website
http://httpd.apache.org/docs/current/mod/mod_deflate.html
Chinese website
http://apache.chinahtml.com/mod/mod_deflate.html

Add format:
AddOutputFilterByType DEFLATE text/html text/plain text/xml
For detailed usage
please refer to:

(2)nginx
Official documentation:
http://wiki.nginx.org/HttpGzipModule
Detailed configuration example:
http://blog.chinaunix.net/uid-20622737-id-3464367.html

http:// www.jb51.net/article/48995.htm
Note that this module is built-in and does not need to be compiled

    gzip on;    gzip_min_length 1k;    gzip_buffers 16 64k;    gzip_http_version 1.1;    gzip_comp_level 6;    gzip_types text/plain application/x-javascript text/css application/xml;    gzip_vary on;

(3)iis

https://technet.microsoft.com/en-us/library/cc753681(v=ws.10).aspx

4. Start browsing Server cache

Method 1: Last-Modified Last-modified time

Last-modified: Fri, 16 Mar 2007 04:00:25 GMT File Contents (could be an image, HTML, CSS, Javascript...)
When the browser makes a request, it will automatically compare whether the last modified
time has been updated. If it has not been updated, 304 enables cached files

Method 2: ETag Verify Signature

ETag: ead145f File Contents (could be an image, HTML, CSS, Javascript...)

What if the server time is originally wrong? The signature is the only proof that each A
unique identifier of a file
If the file is modified, the ETag will automatically change

Method 3: Expires Set expiration time

Expires: Tue, 20 Mar 2007 04:00 :25 GMT File Contents (could be an image, HTML, CSS, Javascript...)
Set cache expiration time,

Method 4: Max-Age maximum lifetime

How to Settings:
apache:

Enable mod_headers and mod_expires modules

Configure expiration headers

ExpiresActive OnExpiresDefault A0# 1 YEAR - doesn't change often<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$">ExpiresDefault A31536000</FilesMatch># 1 WEEK - possible to be changed, unlikely<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">ExpiresDefault A604800</FilesMatch># 3 HOUR - core content, changes quickly<FilesMatch "\.(txt|xml|js|css)$">ExpiresDefault A10800</FilesMatch>

Configure maximum lifetime header

# 1 YEAR<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$">Header set Cache-Control "max-age=31536000, public"</FilesMatch># 1 WEEK<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">Header set Cache-Control "max-age=604800, public"</FilesMatch># 3 HOUR<FilesMatch "\.(txt|xml|js|css)$">Header set Cache-Control "max-age=10800"</FilesMatch># NEVER CACHE - notice the extra directives<FilesMatch "\.(html|htm|php|cgi|pl)$">Header set Cache-Control "max-age=0, private, no-store, no-cache, must-revalidate"</FilesMatch>

5. Compress resources

(1) Compress HTML
Use the chrome extension for compression, click to view "Optimized content"
to see the compression effect
(2) Compress CSS
(3) Compress javascript

6. Optimize images

Image size: Use as large a picture as possible
Image format: jpeg is best, png is the next best (old browsers do not support it)
Use gif less
src attribute to avoid empty src attribute. If it is empty, the browser will automatically request
current entire page

7. Optimize css

to avoid Adding attributes directly in the tag
is to reduce inline css styles
Try to add repeated attributes to a css class and encapsulate them

8. Embed some css styles The

part of the page comes from external files

9. Reduce the number of website plug-ins used

10. Reduce redirects

Click for details:
https://developers.google.com/speed/docs/insights/rules