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.