About me

ZOLLHOF & partners

We are a tech incubator based in Nuremberg with a lot of cool partners.

Web performance is important.

But why? Everybody has a fast connection nowadays.^*

^* Spoiler: not really

No.

But even if...

A lot of people don't have flatrates on mobile.

better performance across all devices
=
better user experience

$$$

Faster websites are ranked higher in Google results

So what can we do?

Here are 10 low hanging fruits that increase your website's performance

1. Choose image formats wisely

rule of thumb:

SVG for icons & logos
JPEG for photos
PNG everything else

1a. Icon fonts

Don't use icon fonts.
Especially not if you only need a couple of icons.

icomoon.io allows you to download single icons from a lot of icon sets

2. Compress / optimise images

SVG: SVGOMG
SVG / JPEG / PNG: Compressor

FileOptimizer   ImageOptim   Trimage

Lossy optimisations are much smaller than their lossless counterparts. Try lossy optimisations too but always compare the output to the original if it's good enough for your needs.

Source: CASAVIONE

Source: CASAVIONE

3. Use image sprites

If you have lots of small PNG and JPEG files try using image sprites. Sprites combine these images into a single file. CSS code then lets you use the images.
SpriteCow is a tool that helps you generate the sprite and the code you need.

4. Minify CSS & JavaScript

Minifiers save a lot of traffic: a compressed version of jQuery for example is only 33% of it's original size.

CSS Minifier / JavaScript Minifier

5. Concatenate your CSS & JavaScript

Take the minified CSS files and add them into a single file. Do the same with your JavaScript. This leads to less HTTP requests which again improves performance.

6. Avoid CSS @import

Rather use a <link> tag per @import instead. This allows your browser to download the styles in parallel rather than downloading one file after the other.

7. Move your <script> tags to the end of the page

Your browser downloads website assets parallelly. When it encounters <script> tags it switches to sequencial downloading, slowing your website down. Moving scripts to right before </body> prevents this.

8. Mark your JavaScript as deferred

Adding the defer-attribute to your website enables the browser to download all assets in parallel and render the website before executing any JavaScript code.

<script src="my-script.js" defer></script>

9. Use a CDN

Cloudflare offers a free content distribution network that moves your static assets closer to your users' locations.

10. Check your assets

Do you need all the web fonts, JavaScript libraries and CSS frameworks you use? "You might not need jQuery" and "You might not need jQuery plugins" are a good start.

Any questions?

Apply your knowledge