Do you know? Ten measures to lighten the website

The fast loading of web sites is a prerequisite for a good user experience. However, the continuous increase in the functionality of the website, the package is constantly bloated, resulting in a large number of Web site access to download, ultimately affecting the response speed. No one likes to wait, how to reduce the amount of code, to deduct too much burden on the site, Craig Buckler published an article on the SitePoint website, "Ten Quick and easy Fixes to Reduce Page Weight", Share 10 tips for reducing your website's burden. The following is the compilation of this article.

In 2013, the weight of the site page increased by 32%, reaching 1.7MB, including 96 separate HTTP requests. This is just an average value, with nearly half of the sites already exceeding this value. Over-bloated websites are trending, and the big responsibility lies with Web developers.

Overly cumbersome sites will seriously affect the site's final experience, mainly in the following four areas:

• Larger downloads, resulting in a slower user experience. Not everyone has a 20M network connection, especially for those underdeveloped areas. No matter how good your website is, users never want to wait.
• Mobile Web Access is growing rapidly, with mobile internet users accounting for almost 1/4 of all netizens. Under a typical 3G network connection, a 1.7MB site load takes nearly a minute. If your site doesn't work efficiently with these mobile devices, what's the use of responsive web design technology?
• Website loading speed has been added by Google to the ranking algorithm. Slow loading reduces site rankings and also affects search engine optimization.
• The more code the site contains, the longer it will take to update and maintain it.

Craig Buckler predicts that the weight of the 2014 Web page will fall. How to streamline the code, to reduce the burden on the site? Craig Buckler gives 10 suggestions. The techniques involved in these recommendations are well-known.

　　1. Enable gzip compression

According to the data on w3techs.com, nearly half of the sites have not been compressed. On the web host, gzip compression is turned on with simple server settings.

　　2. Support Browser cache

If the browser can easily cache a file, it does not have to download the file over and over again. One solution to this feature is to set the appropriate Expires header, last modification time, or etags used in the HTTP header.

You can configure the server to do the above tasks automatically. Below is the. htaccess file in Apache, where the code implements the "cache all pictures for one months" feature.

12345678

<IfModule mod_expires.c>ExpiresActive On <FilesMatch "\.(jpg|jpeg|png|gif|svg)$">ExpiresDefault "access plus 1 month"</FilesMatch></IfModule>

　　3. Using CDN

The browser limits the number of concurrent HTTP requests that can be processed concurrently in each domain: 4 to 8. If your Web page needs to load 96 resources from a domain, the browser can set up to 12 concurrent requests. (This situation does not actually occur because the file size is different, but the restriction still applies.) ）

If you request a static file from another domain, you can double the number of HTTP requests processed by the browser. In addition, a file is called and a cached file is generated for use by the next site that invokes it. We can choose JavaScript libraries (such as jquery) and font libraries, and you can also consider dedicated picture hosting.

　　The three tips mentioned earlier can speed up the loading of your website, and the following suggestions will help us check our website code to effectively reduce the weight of your website.

　　4. Delete the unused resources

The website has been in the midst of change. If you no longer use a component, remove the CSS and JavaScript associated with it. If they are contained in a separate file, it is easy to process. Otherwise, you'll need tools such as Chrome's audit development tools, JSLint, Dust-me selectors, CSS Usage, unused-css.com, and tools to grunt-uncss such.

　　5. Merging and compressing CSS

Ideally, you only have one CSS file (if you use RWD to support an older version of IE, you need two CSS files.) It's also reasonable to build and maintain several separate CSS files, but before you deploy to a product server, you should assemble them together and delete unnecessary whitespace.

A preprocessor such as Saas, less, and stylus can help you do these painful tasks. Tools such as Grunt.js, gulp, and more can automate your workflow. If you prefer the GUI, you can use the free cross-platform app provided by koala.

If you find this cumbersome, you can also manually centralize CSS files with command-line tools, such as in Windows, using the following code:

1	copy file1.css+file2.css file.css

In Mac/linux, you can use the following code:

1	cat file1.css file2.css > file.css

The final file can be run after being compressed by online CSS compression tools such as Cssminifier.com, CSS Compressor & Minifieror, and so on.

Finally, remember to load all the CSS in the head (head) so that the browser can show the next HTML element, and also prevent the browser from redrawing the page element the next time.

　　6. Compressing and merging JavaScript

On average, 18 JavaScript files are loaded on each page, so we're going to merge and compress our own JavaScript code. We can build our own compression tools, or we can use online tools such as YUI Compressor, Closure compiler and Compressorrater.

Compression using the JavaScript compression tool must be very cautious. Your code is a little bit problematic, and even if you lose a semicolon, the compression process may fail. In any case, compressing a JavaScript file reduces the number of HTTP requests, which can improve site performance.

It's a good idea to load JavaScript before </body>, which ensures that the script does not hinder the loading of other content, and that the contents of the page are loaded and readable before the script is downloaded and executed.

　　7. Use the correct picture format

Incorrectly using the picture format increases the load on the Web page. Picture formats usually have the following usage guidelines:

• Photos using JPG format;
• The other uses PNG format.

When you have small images, they contain only a limited number of color sets, in GIF format, which can compress better. This article does not discuss vector graphs at this stage.

Now there are a lot of free graphics packages that can be used to convert the image format. Which like XnView allows you to batch process these files. Keep in mind the following two principles:

JPG is a lossy compression format with a quality between 0 (poor quality, smaller files) to 100 (the best quality, larger file). Most pictures from 30 to 70 show better results.

PNG supports 256 color tables and 24-bit true colors. If you don't need to be transparent, and you can control the palette, the 256 PNG image color pattern might compress better.

　　8. Resize the large picture

Even for the most entry-level smartphones (3 million megapixels), the photos are often too large to be displayed on the site. But most content editors tend to upload images directly from the camera directly onto the website. Therefore, we need a system that can automatically adjust the image size.

The size of a picture never exceeds the maximum value of its container. If the site template has a maximum width of 800px, the width of the image cannot exceed that value. Some high-resolution, retina displays can display images with a width of 1600px, but this is still smaller than the images that are output directly from the camera.

In reducing the weight of the page, the image size adjustment plays an important role. Reduce the size of the file by reducing the size of the picture by 50% and saving up to 75% of the total space.

　　9. Further compress the picture

Even if you've adjusted the picture to the correct format and size, you can still compress the picture further using some tools for analyzing and optimizing the image. These tools include OptiPNG, PNGOut, Jpegtran, and Jpegoptim. Most tools can be installed independently or integrated into the process you build. In addition, there are some online tools, such as Smush, which can work on the cloud.

　　10. Remove unnecessary fonts

Web fonts have been a major overhaul of design, reducing the use of image-based fonts. However, with traditional fonts, the amount of code in a Web page tends to increase by hundreds of KB. So the use of this font in the site as far as possible to control within two or three kinds.

Using the method mentioned above, most websites can subtract the weight of 30~50%. For the general site, you can lose 800KB of code, access speed can be significantly improved. (Compile: Chen)

Do you know? Ten measures to lighten the website