preface

How important is the loading speed of a website? Anyway, I believe in coming beforeBlogger siteAt least 50% of people have closed the site before loading. Why to knead? Look at the picture

High clearly the figure

Home page complete load time 8.18s, it seems that can come in to see the blogger website is true love ah, ha ha. Normally, a webpage will lose a large part of users if it is not finished loading in 4s. However, the loading time of the blogger’s website actually reaches 8s, which is on the computer side. If it is on the mobile side, the loading time will be longer and the experience will be worse. In this case, no matter how bad the site is, it is no use for critics to get in, so the optimization of web page loading speed is imminent.

Based on the blogger’s previous optimization of other sites, so the blogger is ready to record the optimization process to share for everyone to learn.

1. Page analysis

Let’s take a look at the page before optimization:

Load time 8.18s, total 33 requests, load 1.38MB. It can be seen that it takes more than 5s to load resources for the slow Internet browsers, plus 33 request switching costs, which is simply not a pleasant play. So the next optimization means will start from the load traffic and the number of requests:

2. Polish your image

Images account for a large proportion of network traffic, so optimizing images plays a crucial role in reducing traffic.

Merge small images:

Many pages have a lot of small ICONS, loading one by one is equivalent to one request, merge these small images into one large image, use CSS to control the display range, so that only one request can load all the small images, instantly reduce a lot of network requests.

Optimize image format:

Many pictures without optimization directly uploaded to the web page will occupy a lot of extra traffic. For example, a screenshot of screen size is about 1MB after being directly captured by the screenshot tool. In this case, the traffic directly uploaded to the web page will occupy 1MB. There are many websites on the web that convert web images, and you can export them yourself if you have Photoshop:

Open the image in PHOTOSHOP, then click the menu bar “File” menu, select “Save for Web format”, the following dialog box appears:

Under normal circumstances, JPG images can be selected in quality, PNG images can be selected pNG8, but note that PNG images with transparent background should be selected PNG24, otherwise there will be white edge in the transparent background, GIF images can be selected without imitation color.

Generally, the size of the optimized picture will be at least 3 times the difference, and the larger the original size of the picture, the better the optimization result will be.

The most prominent image on the blogger’s site is the ghost image on the header, so take it first and optimize it through the above steps:

Instantly reduced by 4 times, the actual effect can be seen, there is no significant difference between the display effect of the picture representing the blogger’s facade after optimization and before optimization, while the file size is 4 times different.

3. Load third-party resources using the free CDN

All websites can use third-party resources for third-party resources, if you choose to make their own servers, so for small sites, this part is less bandwidth fairly is occupied by a public resource, aeriform in compressing the server bandwidth, if let third-party CDN to provide this part of the resources, then can have a big promotion to website loading speed.

The blogger chooses the CDN static library provided by Bootstrap Chinese website. The blogger has seen many domestic CDN static libraries, so it can be said that the Bootstrap static library is very honest, updated in time and rich in resources. Basic resources of the three parties used by the blogger can be found on it. Search for static resources + replace static resources:

<script src="/s/js/jquery.min.js"></script>Instead of<script src="/ / cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>Copy the code

Do not write the protocol header here, let the web page automatically decide whether to use HTTP or HTTPS (see our previous post on deploying HTTPS sites: Dressing Up your Site – HTTPS Free Deployment Guide).

4. Use CDN to store static resources

Generally, 90% of the traffic of websites is used for loading static resources. In addition to loading third-party resources with free CDN, you can also apply for cloud space to store your own static resources, further reducing the cost of the server, so that the server only focuses on providing data or webpage rendering services. For example, bloggers use X ox and store their pictures on X Ox. They have free traffic every month, which should be enough for personal websites.

5. Merge and compress JS and CSS

Remove references to the public library, web pages and many write js and CSS, if we bring the development environment of files directly with no doubt is a waste flow, so in written pages after the test, we should merge the CSS and js compressed into one or several files, this reduces the number of requests and reduce the flow of consumption, Kill two birds with one stone. Of course, there is HTML compression, but MS has some problems at the moment, so I won’t use it. When it comes to merging and compression, webpack came to mind at the first time. It is a front-end engineering artifact, and a simple configuration can completely complete the task:

/webroot/static/ SRC /js/ static/dist/js/

New folder webpack under /webroot/, go to folder webpack and create package.json:

{
  "name": "RaPo3"."version": "1.0.0"."description": ""."main": "index.js"."scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "rapospectre"."license": "ISC"."devDependencies": {
    "css-loader": "^ 0.24.0"."style-loader": "^ 0.13.1." "."webpack": "^ 1.13.2"."webpack-dev-server": "^ 1.15.1"}}Copy the code

After saving, execute:

NPM install // or CNPM install // if you have oneCopy the code

Then create a new webpack configuration file, webpack.config.js:

var webpack = require('webpack'); module.exports = { entry: { base: ['../static/js/src/http.js', '../static/js/stickUp.min.js', '../static/js/src/base.js'], index: ['../static/js/src/index.js'], detail: ['../static/js/editormd.js', '../static/js/src/article.js'], know: ['../static/js/editormd.js', '../static/js/src/know.js'], list: ['../static/js/src/list.js'] }, output: { path: '.. /static/js/dist/', filename: '[name].js' }, plugins: [ new webpack.optimize.UglifyJsPlugin({ output: { comments: false }, compress: { warnings: true } }), ] }Copy the code

The important thing to note here is that if your references between js files are traditional HTML after import references, remember to set your referenced methods \ objects etc as global when merging them. For example, b.js refers to the function c in a.js. Before merging, add this to a.js (of course, if you have been writing JS in ES6 /node, you don’t need to read this) :

window.c = c; Or this. C = c;Copy the code

Otherwise c would be wrapped as a local function.

After the modification, I ran Webpack and saw that the consolidated and compressed file had been output in dist directory. After the previous 12KB file was compressed and merged, it was only 6KB in size, and then we could replace it into the web page.

6. Code optimization

Page code optimizations also have a significant impact on page loading speed, most notably:

JavaScript in the HTML header and Style in HTML tags block rendering of the page, so CSS is placed at the header and introduced using Link and JavaScript is introduced at the end

Secondly, there are:

  1. On-demand loading, the statistics, sharing js in the page onload after loading, can improve the speed of access;
  2. Optimize cookie and reduce cookie volume;
  3. avoidSRC is empty;
  4. Avoid setting the image size as far as possible, because resetting the image size for many times will cause the image to be redrawn for many times, affecting the performance.
  5. Proper use of display attributes: 
    A. display: Inline should not be used after width, height, margin, padding and float b.display:inline-block should not be used after float C. display:block should not be used vertical-align d.display:table-* should not be used margin or floatCopy the code
  1. Don’t abuse Float and Web fonts;
  2. Use CSS3 animations whenever possible;
  3. Load part of the request asynchronously using Ajax;

7. HTTP2 with gzip

HTTP2 is based on SPDY. The SPDY family of protocols was developed by Google and made public in 2009. It is designed to reduce page load time by 50%, so HTTP2 is also designed to optimize page load time in large part. HTTP2 also supports multiplexing, which simply means that all requests are completed concurrently over a SINGLE TCP connection. And gZIP is no stranger to everyone, is a kind of compression web page technology, of course, compression web page transmission is to increase some compression burden to the server, of course, this sacrifice is worth it.

How to enable HTTP2 and gzip? Nginx + uWSGI, so simply enable HTTP2 and gzip on nginx:

Open HTTP2

Nginx does not support HTTP2 until 1.9.5, and the compiler parameters need to be configured to enable HTTP2

Open the gzip

Open the nginx configuration file, such as the blogger’s /etc/nginx/nginx.conf, and add:

server{ gzip on; gzip_comp_level 6; gzip_proxied any; gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml  application/xml+rss text/javascript application/x-font-woff; }Copy the code

Then restart nginx

Finally, let’s clear the cache and open the site again:

The total load traffic is 527KB, and the page load time is 1.84s, compared with 8.18s and 1.38MB before, the overall time has increased by more than 4 times! Use mobile phone terminal access test, simply fast fly, do not believe you also visit (cheat traffic face) try ah ~

Finally, attach the source code and directory structure of this website, so that you can see the optimization process more intuitively through the COMMIT record:

Github.com/bluedazzle/…

Welcome to star haha.

Author: rapospectre