Tangled front-end Optimization

Source: Internet
Author: User
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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.