Do you know? Ten measures for reducing website losses and ten measures for reducing website losses

Do you know? Ten measures for reducing website losses and ten measures for reducing website losses

Fast website loading is a prerequisite for good user experience. However, the increasing number of website functions and the bloated package lead to a large download volume during Website access, which ultimately affects the response speed. No user like to wait. How to Reduce the amount of code and Reduce the excessive burden on the website? Craig Buckler published an article 10 Quick and Easy Fixes to Reduce Page Weight on the sitepoint website. share 10 suggestions for reducing the website burden. The following is the compilation content of this document.

The weight of the website page is increased by 32%, which reaches 1.7 MB, including 96 independent HTTP requests. This is only an average value, and nearly half of the websites have already exceeded this value. Over-bloated websites are becoming more popular, with a major responsibility being Web developers.

A website that is too bulky will seriously affect the website's final experience, mainly manifested in the following four aspects:

Larger downloads lead to slower user experience. Not everyone has 20 m of network connections, especially for underdeveloped areas. No matter how good your website is, users never want to wait.
Mobile Web access is developing rapidly, and mobile Internet users account for almost 1/4 of all Internet users. In a typical 3G network connection, it takes nearly one minute to load a 1.7Mb website. If your website cannot efficiently work on these mobile devices, what is the use of responsive Web design technology?
The website loading speed has been added to the ranking algorithm by Google. Slow loading will lower the website ranking and affect the search engine optimization.
The more code a website contains, the longer it takes to update and maintain it.
Craig Buckler predicts that the weight of the web page will drop. So how can we streamline code and reduce the burden on websites? Craig Buckler provides 10 suggestions. The technologies involved in these suggestions are well known.

1. Enable GZIP Compression

According to data on W3Techs.com, nearly half of the websites have not been compressed. On the Web host, you can enable GZIP compression with simple server settings.

2. Support for browser caching

If the browser can easily cache a file, it does not need to download it repeatedly. A solution for implementing this function is to set the appropriate Expires Header in the HTTP Header, the last modification time, or the ETags used.

You can configure the server to automatically complete the above work. The following is the. htaccess file in Apache. The Code implements the "cache all images for one month" function.

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

　　

3. Use CDN

The browser limits the number of concurrent HTTP requests that can be processed simultaneously in each domain: 4 to 8. If your webpage needs to load 96 resources from the domain, the browser can set up to 12 concurrent requests. (Because the file size is different, this does not actually happen, but this restriction still applies .)

If a static file is requested from another domain, the number of HTTP requests processed by the browser can be doubled. In addition, after a file is called, a cache file is generated for the next website that calls it. We can use JavaScript libraries (such as jQuery) and library, and you can also consider dedicated image hosting.

The three suggestions mentioned above can speed up website loading. The suggestions below will help us check website code to effectively reduce website weight.

4. Delete useless Resources

The website has been changing. If you no longer use a component, delete the associated CSS and JavaScript. If they are contained in a single file, it will be easy to process. Otherwise, you need to use tools such as Chrome's Audit development tool, JSLint, Dust-Me Selectors, CSS Usage, unused-css.com, you can also build tools such as grunt-uncss.

5. Merge and compress CSS

Ideally, you only have one CSS file. (If you use RWD to support earlier versions of IE, you need two CSS files .) It is reasonable to construct and maintain several separate CSS files, but before deploying them to the product server, you should combine them and delete unnecessary blank areas.

Pre-processors such as Saas, LESS, and Stylus can help you complete these painful tasks. Grunt. js, Gulp, and other tools can automate your workflow. If you prefer GUI, you can use the free cross-platform applications provided by Koala.

If you think this is troublesome, you can also use the command line tool to combine CSS files. For example, in Windows, you can use the following code:

 

copy file1.css+file2.css file.css

　　

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

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.

Finally, remember to load all CSS in the header so that the browser can display the following HTML elements, and avoid re-painting the page elements in the browser next time.

6. Compress and merge JavaScript

On average, 18 JavaScript files need to be loaded on each page, so we need to merge and compress the JavaScript code compiled by ourselves. We can build our own compression tools or use online tools, such as YUI Compressor, Closure Compiler, and CompressorRater.

Exercise caution when using JavaScript compression tools for compression. Your code has a small problem. Even if you lose a semicolon, the compression process may fail. In any case, compressing JavaScript files reduces the number of HTTP requests and improves website performance.

It is best to load JavaScript before </body> to ensure that the script does not impede loading of other content. At the same time, the page content has been loaded before the script is downloaded and executed, you can also read it.

7. Use the correct image format

Incorrectly using the image format will increase the webpage load. Image formats generally have the following usage principles:

The photo is in JPG format;
Others are in PNG format.
When you have small images that contain only a limited number of color sets and adopt GIF format, the compression effect may be better. This article does not discuss vector graphs for the moment.

There are a large number of free graphics software packages available to convert the image format. XnView allows you to batch process these files. Remember the following two principles:

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

PNG supports 256 colors and 24-bit true color. If you do not need transparency and can control the color palette, the 256 PNG Image color mode may be compressed better.

8. resize the size of a large image

Even for the camera (3 million pixels) on the most entry-level smartphone, the photos taken are usually too large to be displayed on the website. However, most content editors usually upload images directly from cameras to websites. Therefore, we need a system that can automatically adjust the image size.

The image size cannot exceed the maximum size of its container. If the maximum width of a website template is 800px, the image width cannot exceed this value. Some high-resolution, Retina Display displays images with a width of PX, but this is still smaller than the images directly output from the camera.

Image size adjustment plays an important role in reducing the page weight. Reducing the image size by 50% saves 75% of the total space, which is equivalent to reducing the file size.

9. Further compress the image

Even if you have adjusted the image to the correct format and size, you can use some analysis and image optimization tools to further compress the image. These tools include OptiPNG, PNGOUT, javastran, and javasoptim. Most tools can be installed independently or integrated into your build process. In addition, some online tools such as Smush can work on the cloud.

10. Remove unnecessary Fonts

The Web font has made significant changes to the design, reducing the use of image-based fonts. However, after a traditional font is used, the amount of Web Page code is usually increased by several hundred KB. Therefore, the use of such fonts on websites should be controlled within two or three types.

Using the method mentioned above, most websites can subtract 30 ~ 50% weight. For general websites, the code size can be reduced by kb, And the access speed can be significantly improved. (Compilation: Chen qiuge)