Tangled front-end Optimization

I. Reason

1. A website is ready, but it is found that the access speed is too slow. Although this is also true for previous projects... The website has become a problem. It is too troublesome to modify the background code, and there is no front-end optimization.
    

Ii. webpage performance testing tools

Page Speed: https://developers.google.com/speed/pagespeed/download? Hl = zh-CN

This plug-in includes firefox and chrome

The top one represents the reason that most affects the performance of the Web page. Each item can be expanded with corresponding suggestions for optimization.

 

Iii. Optimization

Front-end optimization mainly reduces the number of http requests and the size of requested files

1. optimize images and merge Images

Many images can be lossless compressed (removing additional information that does not affect image quality). You can click optimized versions to have a lossless compression version. Or use a YUI-based online image optimization tool created by the YUI team by Smush. it ----- to compress images.

CSS Sprites-integrate multiple images into one image and then use CSS to locate the image. This reduces the number of http requests.

For example, you can view an image on the Google homepage.

2. Compress and merge JavaScript and css

Many line breaks, spaces, and comments appear in js and css to increase readability, which increases the file size and transmission time, we can use some online compression software for JavaScript and css before each website release, but this is too troublesome and especially troublesome for any modifications. However, there is an open-source component that does not need to be manually compressed every time. Instead, it automatically compresses js and css referenced by web pages and can be merged. You can click here to download. Add the dll to the Reference

After adding a reference, add the following code to compress and merge:

 

Before adding the above Code, JavaScript and css are not compressed and merged.

After adding

The referenced CSS files are merged into squish_css.css, And the referenced js files are merged into squish_js.js. The merged file is smaller, for example

Squish_css.css = 1.6KB <904B + 1.31KB + 786B. Because the merge is compressed at the same time, excluding comments, useless line breaks, spaces, and so on.

 

3. gzip Compression

 

Add DC. Web. HttpCompress. dll to reference and configure web. config.

 

   1: <configSections>

   2:   <sectionGroup name="DCWeb">

   3:     <section name="HttpCompress" type="DC.Web.HttpCompress.Configuration,DC.Web.HttpCompress"/>

   4:   </sectionGroup>

   5: </configSections>

   1: <DCWeb>

   2:    <HttpCompress compressionType="GZip">

   3:      <PathSettings jsPath="js/" cssPath="css"/>

4: <! -- Configure the type of resource to be compressed -->

   5:      <IncludedMimeTypes>

   6:        <add mime="text/html"/>

   7:        <add mime="image/gif"/>

   8:        <add mime="image/jpeg"/>

   9:        <add mime="image/png"/>

  10:        <add mime="text/css"/>

  11:        <add mime="application/x-javascript"/>

  12:      </IncludedMimeTypes>

13: <! -- Use the following to configure which types of resources are not compressed:

  14:            <ExcludedMimeTypes>

  15:                <add mime="text/html" />

  16:            </ExcludedMimeTypes>

17: Note: you only need to configure ExcludedMimeTypes and IncludedMimeTypes. If ExcludeMimeTypes is configured as above, other resources except html resources will be compressed -->

  18:      <!--<ExcludedPaths>

19: Set the page path for which compression is not enabled. If the default. aspx page is set below, the compression function is not enabled, but the compression function is enabled for other pages.

  20:        <add path="Default.aspx"/>

  21:        </ExcludedPaths>-->

  22:    </HttpCompress>

  23:  </DCWeb>

   1: 

 
2: <! -- Set the parameters for enabling the compression module -->

 
   3:         <add name="HttpCompressModule"

 
   4:             type="DC.Web.HttpCompress.HttpModule,DC.Web.HttpCompress"/>

 
   5: 

 
After the http transfer is complete, the content is encoded as gzip. The following two images are the comparison before and after gzip compression.

 

Look, content-Encoding is gzip, and Content-Length is greatly reduced.
4. There are still many optimization methods on the front end, such as caching, css optimization, and js code optimization. They are insufficient in strength and stop writing.
Four-digit code pageoptimization.rar