How to Actually Optimize Your Website

I know how to do this.

By Hanno Zhuan

You might finish reading in 2 minutes

Here are my answers:

  • Minify CSS with Lightning CSS or DuckDuckGo CSS Minifier.
  • Minify HTML with HTML Minifier. You can use HTML Minifier in your browser.
  • Minify JavaScript with Terser. You can use Terser in your browser.
  • Reduce the image file size with Squoosh.
  • Resize the image—for example, from 3000x200 to 1500x100—for all decorative images to reduce the image file size.
  • Prefer using SVG over raster graphics. Raster graphics are files with an ending such as .png, .jpg, or .jpeg.
  • When using raster graphics, offer better image compression, such as AVIF and WebP, with the <picture> element.
  • Minify SVG with SVGOMG.
  • Reduce the file size of custom fonts by importing the necessary characters only through the Google Fonts API. For example, we want to use a lowercase "h" of Roboto, so we add text=h to the Google Fonts API request. Usually, we only need alphabets, numbers, and common punctuation marks.
    abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!"#$%&'()*+,-—–./:;<=>?@[]^_`{|}~
  • Use Web Open Font Format (WOFF) files. Use .woff2 format.
  • Use the <link> tag for importing Google Fonts. Do not use @import.
  • Prefer downloading the Google Fonts woff2 files and hosting your font within your website's domain. For example, if your website domain is example.com, your font may be located at example.com/fonts/roboto-regular.woff2. Simply, self-host your fonts.
  • Sort CSS properties for better GZIP compression. (optional)
  • Sort elements inside your HTML head with the following order:
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
<link>
<meta>
<script>
<noscript>
  • Delete unnecessary images.
  • Delete unnecessary code.
  • Just have fewer things on your website.
  • Convert videos into WebM format.
  • Prefer using Modern Font Stacks or pre-installed fonts.
  • Avoid heavy CSS frameworks. (Don't make me mention Bootstrap.)
  • Agree to have a fast website.
  • Prefer text over images, unless you are making a comic or a photo gallery.
  • Use a lighter website analytics, instead of Google Analytics. If you do not need it, do not have it.
  • Prefer simple layouts. Use CSS flexbox and grid for a responsive layout with very few media queries or even none at all.
  • Use Utopia to generate fluid size and fluid space. This prevents your from maintaining media queries.
  • Simplify, simplify, simplify.
  • Be normal.