Web Page Loading Optimization Guide

The author observed a homepage load time of 8.18 seconds, 33 requests, and 1.38 MB of data, leading to high bounce rates, and decided to document a comprehensive optimization process.

1. Page analysis : Measured the initial performance to identify bottlenecks.

2. Image optimization : Combined small icons into sprites, converted images to web‑optimized formats (JPEG quality settings, PNG8/PNG24, GIF64), and reduced image sizes up to four times.

3. Use free CDN for third‑party resources : Replaced local script references with CDN links (e.g., jQuery from bootcdn) and omitted the protocol to let the browser choose http or https.

4. Store static assets on a CDN/cloud storage : Uploaded images and other static files to a free cloud storage service (X牛) to offload bandwidth from the origin server.

5. Merge and compress JS/CSS : Created a package.json and a webpack.config.js to bundle and minify JavaScript and CSS, using webpack.optimize.UglifyJsPlugin. This reduced a 12 KB file to 6 KB.

{
  "name": "RaPo3",
  "version": "1.0.0",
  "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"
  }
}

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 }
    })
  ]
};

6. Code‑level optimizations : Moved JavaScript to the page footer, lazy‑loaded non‑essential scripts after onload, minimized cookie size, avoided empty src attributes, prevented repeated image resizing, and applied appropriate CSS display rules.

7. Enable HTTP/2 and gzip : Added gzip directives to Nginx and noted that HTTP/2 requires Nginx 1.9.5+ with proper compilation.

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;
}

Result: After applying all measures, total transfer dropped to 527 KB and load time fell to 1.84 seconds (≈4× speedup), with similarly fast performance on mobile devices.