Web Development

Dr Derek Bridge
School of Computer Science & Information Technology
University College Cork

Lecture Objectives

learn what slows your web site down
learn some simple techniques for improving performance

Objectives

are usable by all users;
are usable on all devices;
are usable in all browsers;
rank highly in search engine results;
load quickly;
are maintainable.

Web Page Performance

Web pages are getting bigger.

Connection speeds are not increasing so quickly.

Hence, the web is getting slower.

Measuring Performance

Measure and analyse!

E.g. the Network tab on Chrome's Developer Tools.

E.g. the Lighthouse tab on Chrome's Developer Tools.

General Advice

Things web & network administrators can do to help us:

Configure servers to make as much use of caching as possible;
Distribute load over multiple servers;
…

General Advice

Things web developers can do:

Reduce the number of requests;
Decrease the size of each resource;
Consider conditional loading or lazy loading;
…

Reduce the Number of Requests

E.g.:

Do you really need all those images? fonts? videos? audio files?

Eliminate some!

Reduce the Number of Requests

E.g.:

Use image sprites (background, foreground).

By merging resources, this reduces requests.

Decrease the Size of Each Resource

E.g.:

Minify your HTML, CSS and JavaScript.

Compress your HTML, CSS and JavaScript.

Minify means use a program to remove line breaks, whitespace and comments. Can demonstrate with Irish Examiner.

Compression of HTML, for example, looks for repeated text and replaces that text with a shorter code. E.g. if you have lots section start and end tags, we can replace them all by a shorter code. You can either run a program to do this or you can configure your server to compress everything that it serves 'on-the-fly'.

We'll discuss compression again in the context of images later in this lecture.

For the former, where you've already compressed, I think you just use mod_mime to add info about compression in a Content-Encoding HTTP header.

For the latter, you need this directive: SetOutputFilter Deflate. Or to apply this to only certain kinds of file such as text: AddOutputFilterByType Deflate text/* These insert appropriate stuff into the Content-Encoding HTTP headers to tell the browser that the resource is compressed (so the browser knows to decompress it), e.g. Content-Encoding: gzip This latter solution is usually part of content negotiation, where the browser has already said whether or not it will accept compressed resources, so it's a bit more complicated.

Why do it on-the-fly? (a) if the file is very large, we might not want to store both versions, even if the second is the smaller of the two, especially if the resource or the compressed version of the resource is only rarely accessed; (b) if we change the file a lot, then it may be inconvenient to remember to compress it each time we change it (of course, we could automate this with a script, so this isn't a compelling reason), and (c) if the resource isn't static, then there is no file to compress and store: we have to do it on the fly; mod_deflate is an output filter, so it can compress the output of any handler including CGI scripts.

Conditional Loading and Lazy Loading

Conditional loading:
Only fetch resources that the client needs.

Lazy loading:
Delay fetching non-essential resources until the essential parts of a page are on-screen.

Images

Since images are a major cause of performance problems, we look at them further in more detail.

Two Major Types of Images

There are bitmapped images (aka raster images).
Bitmapped image formats include
GIF, JPEG, PNG, and WebP (also AVIF and JPEG XL).

There are also vector images.
The most popular vector format is
Scalable Vector Graphics (SVG).

AVIF is a new alternative to JPEG, based on AV1 video format, with both lossy and lossless compression but smaller file sizes even than WebP. It is soon to be more widely supported. Chrome 85+ already supports it. This article compares some images in different formats: https://jakearchibald.com/2020/avif-has-landed/

JPEG XL similarly offers lossy and lossless compression. The X is just something the JPEG have been including in recent releases of standards, the L means long-term because they expect it to be a long-lived replacement for JPEG.

Both allow animations, I think. AVIF 30% better, JPEG XL 20-40% better? JPEG XL progressive decode, faster encode, less loss? But less support right now.

Bitmapped Images

Consist of pixels (coloured dots) in a grid.
Their quality depends on their resolution: the number of pixels per inch.
When software decreases the size of such images, it throws pixels away.
When software increases the size of such images, it inserts new pixels and must guess their colour.

Bitmapped Images

There are two kinds of bitmapped images.

direct colour	indexed colour
e.g. JPEG	e.g. GIF

Some image formats support both, e.g. PNG, WebP.

Direct Colour Images

The image file specifies the colour of each pixel by giving, e.g., an RGB code.

Good for images with continuous changing shades and soft transitions, e.g. photos.

Indexed Colour Images

The image file contains a palette of colours.
It then specifies the colour of each pixel by giving the colour's position on the palette.

E.g. GIF — uses a palette of up to 256 colours.

Good for images with large areas of solid, flat colour, e.g. logos, icons, charts, cartoons.

Vector Images

Vector images are defined using code, which describes lines, rectangles, circles, etc.
E.g. SVG:


<svg>
    <circle cx="50" cy="50" r="50" 
            stroke="blue" fill="red" />
</svg>

You can include SVG images in separate files or directly in your HTML.

SVG

Advantages:
scalable without loss of quality
smaller than bitmapped images
text remains accessible
can be styled by CSS or targetted by JavaScript.

Disadvantage:
for anything other tham simple diagrams, they require a lot of code.

Advantages:

Scalable without the kinds of loss of quality that we get when we resize bitmapped images.
SVG files tends to be smaller than bitmapped image files because you're not giving info about each pixel individually.
Any text in an SVG remains accessible to screenreaders and search engine crawlers: they can see it, in the textcode> tag.
Under certain circumstances, they are part of the tree, so they can be styled by CSS or scripted by JavaScript.

Disadvantages:

when there is a lot of code, browsers may take time to render the image;
you'll need software (e.g. Inkscape) to help you create the SVG.

Quick Comparison

	compression	transparency	animation
JPEG	lossy	no	no
GIF	lossless	no	yes
PNG	lossless	yes	no
WebP	both	yes	yes
SVG	lossless	yes	yes

GIF uses LZW compression
- assigns a short code to certain sequences
- if the sequence repeats, the repeat is replaced by the code
Hence, lossless compression
JPEG compression (discrete cosine transform) is lossy: info is thrown away
- choose the compression rate when saving the image
- higher rates do more compression but may make the image 'blocky'
PNG uses lossless compression that compresses more than GIF but less than JPEG
WebP compression can be lossless (e.g. LZW) or lossy like JPEG compression but Google claims 25-34% smaller files with no discernible loss of quality

For animation, note that there is an apng format that supports animations.

Decreasing the Size of Images

Choose a format that results in smaller files:
- E.g. SVG rather than bitmapped (often).
- E.g. PNG rather than GIF (often).
- E.g. WebP or PNG rather than JPEG .
- E.g. AVIF or JPEG XL when available.
For formats such as JPEG, PNG, WebP, AVIF and JPEG XL, increase the compression level as much as you can and reduce the resolution if you can.

Web Development

Lecture Objectives

Objectives

Web Page Performance

Measuring Performance

General Advice

General Advice

Reduce the Number of Requests

Reduce the Number of Requests

Decrease the Size of Each Resource

Conditional Loading and Lazy Loading

Images

Two Major Types of Images

Bitmapped Images

Bitmapped Images

Direct Colour Images

Indexed Colour Images

Vector Images

SVG

Quick Comparison

Decreasing the Size of Images

G'luck!