Boost Your Web App Speed: Proven Frontend Performance Hacks & Tools

Introduction

Performance optimization is a mandatory topic for every engineer. This guide collects practical techniques and tools, with source code and PPT shared freely.

Impact of Frontend Performance

Page load time directly affects user experience and search‑engine ranking. Google data shows that increasing load time from 0.4 s to 0.9 s can cut traffic and ad revenue by up to 90 %. Reducing a 100 KB page to 70‑80 KB can raise traffic by 10 % in the first week and 25 % over the next three weeks. Amazon reports that a 100 ms delay reduces sales by 1 %.

Debugging Tools

Network Panel

The Network tab displays resource loading details, including DOMContentLoaded (DOM ready) and Load (all resources loaded).

Key Metrics

Queueing

: time resources spend waiting in the queue. Stalled: stall time caused by queueing. DNS Lookup: DNS resolution time. Initial connection: time to establish HTTP connection. SSL: TLS handshake time. TTFB: time to first byte from the server. Content Download: time to download the resource.

Lighthouse

Lighthouse evaluates page quality and offers optimization suggestions, highlighting metrics such as First Contentful Paint (target <1 s) and Speed Index (target <4 s).

Performance Tab

Provides a professional analysis of the page’s runtime behavior.

webPageTest

Simulates different browsers, locations, and network conditions. Online at webpagetest.org .

webpack‑bundle‑analyzer

npm install --save-dev webpack-bundle-analyzer
// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'server',
      analyzerHost: '127.0.0.1',
      analyzerPort: 8889,
      openAnalyzer: true
    })
  ]
};

Source‑map

// webpack.config.js
module.exports = {
  mode: 'production',
  devtool: 'hidden-source-map'
};
// package.json
"analyze": "source-map-explorer 'build/*.js'"

Web APIs

Visibility Change

// Listen for page visibility changes
let vEvent = 'visibilitychange';
if (document.webkitHidden !== undefined) {
  vEvent = 'webkitvisibilitychange';
}
function visibilityChanged() {
  if (document.hidden || document.webkitHidden) {
    document.title = '客官，别走啊~';
    console.log('Web page is hidden.');
  } else {
    document.title = '客官，你又回来了呢~';
    console.log('Web page is visible.');
  }
}
document.addEventListener(vEvent, visibilityChanged, false);

Long‑Task Observation

const observer = new PerformanceObserver(list => {
  for (const entry of list.getEntries()) {
    console.log(entry);
  }
});
observer.observe({ entryTypes: ['longtask'] });

Network Change

var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
var type = connection.effectiveType;
function updateConnectionStatus() {
  console.log('Connection type changed from ' + type + ' to ' + connection.effectiveType);
  type = connection.effectiveType;
}
connection.addEventListener('change', updateConnectionStatus);

DOMContentLoaded Timing

window.addEventListener('DOMContentLoaded', () => {
  let timing = performance.getEntriesByType('navigation')[0];
  let diff = timing.domInteractive - timing.fetchStart;
  console.log('TTI: ' + diff);
});

Performance Metrics Calculation

DNS: domainLookupEnd - domainLookupStart TCP: connectEnd - connectStart SSL: connectEnd - secureConnectionStart TTFB: responseStart - requestStart Data Transfer: responseEnd - responseStart DOM Parse: domInteractive - responseEnd Resource Load:

loadEventStart - domContentLoadedEventEnd

Yahoo 35‑Rule Checklist

Reduce Cookie Transfer

Store less data in cookies.

Serve static assets from a cookie‑free domain.

Avoid Excessive Reflow & Repaint

let cards = document.getElementsByClassName('MuiPaper-rounded');
const update = timestamp => {
  for (let i = 0; i < cards.length; i++) {
    let top = cards[i].offsetTop;
    cards[i].style.width = (Math.sin(top + timestamp / 100 + 1) * 500) + 'px';
  }
  window.requestAnimationFrame(update);
};
update(1000);

Using fastdom to separate reads and writes eliminates the red marks shown by Chrome’s performance panel.

let cards = document.getElementsByClassName('MuiPaper-rounded');
const update = timestamp => {
  for (let i = 0; i < cards.length; i++) {
    fastdom.measure(() => {
      let top = cards[i].offsetTop;
      fastdom.mutate(() => {
        cards[i].style.width = Math.sin(top + timestamp / 100 + 1) * 500 + 'px';
      });
    });
  }
  window.requestAnimationFrame(update);
};
update(1000);

Compression

Gzip

Enable gzip in Nginx or generate .gz files during the build and serve them directly.

Server‑Side Compression

const express = require('express');
const compression = require('compression');
const path = require('path');
const app = express();
app.use(compression());
app.use(express.static('build'));
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '/build/index.html'));
});
app.listen(process.env.PORT || 3000, () => {
  console.log(`Listening on port ${process.env.PORT || 3000}`);
});

JS / CSS / HTML Minification

UglifyJS, webpack‑parallel‑uglify‑plugin, terser‑webpack‑plugin for JavaScript.

mini‑css‑extract‑plugin for CSS.

HtmlWebpackPlugin for HTML.

Webpack Optimizations

DllPlugin

const path = require('path');
const webpack = require('webpack');
module.exports = {
  mode: 'production',
  entry: { react: ['react', 'react-dom'] },
  output: {
    filename: '[name].dll.js',
    path: path.resolve(__dirname, 'dll'),
    library: '[name]'
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]',
      path: path.resolve(__dirname, 'dll/[name].manifest.json')
    })
  ]
};

splitChunks

optimization: {
  splitChunks: {
    cacheGroups: {
      vendor: {
        name: 'vendor',
        test: /[\\/]node_modules[\\/]/,
        minSize: 0,
        minChunks: 1,
        priority: 10,
        chunks: 'initial'
      },
      common: {
        name: 'common',
        test: /[\\/]src[\\/]/,
        chunks: 'all',
        minSize: 0,
        minChunks: 2
      }
    }
  }
},

Skeleton Screens

Use CSS placeholders or libraries such as react-placeholder to show a skeleton while resources load.

Windowing (Virtualization)

import { FixedSizeList as List } from 'react-window';
const Row = ({ index, style }) => (<div style={style}>Row {index}</div>);
const Example = () => (
  <List height={150} itemCount={1000} itemSize={35} width={300}>
    {Row}
  </List>
);

Caching Strategies

HTTP Cache

Enable keep-alive in Nginx.

Configure Cache‑Control, Expires, Max‑Age.

Use Etag / If‑None‑Match and Last‑Modified / If‑Modified‑Since for validation.

Service Worker

new WorkboxWebpackPlugin.GenerateSW({
  clientsClaim: true,
  exclude: [/\.map$/, /asset-manifest\.json$/],
  importWorkboxFrom: 'cdn',
  navigateFallback: paths.publicUrlOrPath + 'index.html',
  navigateFallbackBlacklist: [new RegExp('^/_'), new RegExp('/[^/?]+\.[^/]+$')]
});
new ManifestPlugin({
  fileName: 'asset-manifest.json',
  publicPath: paths.publicUrlOrPath,
  generate: (seed, files, entrypoints) => {
    const manifestFiles = files.reduce((manifest, file) => {
      manifest[file.name] = file.path;
      return manifest;
    }, seed);
    const entrypointFiles = entrypoints.app.filter(f => !f.endsWith('.map'));
    return { files: manifestFiles, entrypoints: entrypointFiles };
  }
});

Preload & Prefetch & Lazy Loading

Preload

Add

<link rel="preload" href="..." as="font" crossorigin="anonymous">

for critical assets.

Prefetch

Use rel="prefetch" for resources needed on the next navigation.

Lazy Loading Images

Native lazy loading via <img src="..." loading="lazy"> or responsive srcset patterns.

Route‑Level Code Splitting

const Page404 = () => import(/* webpackChunkName: "error" */ '@views/errorPage/404');

SSR & react‑snap

Server‑Side Rendering with frameworks like Next.js (React) or Nuxt.js (Vue). react‑snap uses Puppeteer to pre‑render static pages.

Experience Optimizations

Implement loading placeholders, skeleton screens, and fast DOM updates to eliminate white‑screen flashes and improve perceived performance.