A website’s page speed performance is measured in terms of
the time to download and display the site’s pages on the
user’s browser. The performance benchmark is 2 seconds for a webpage, however for mobile devices
web designers should aim for 1 second or less.
Google’s PageSpeed Insights is one of a number of tools one may use to measure a site’s
performance. As can be seen from Exhibit 25.21 it provides a rating from
0 to 100, where scores of 90 and above are considered fast.
Because page speed has important bearing on user experience, slower sites may be
penalized by search algorithms. There are several common approaches that web designers can use to
improve site performance:
- Compress images: Large image files often consume considerable time to
upload, so compressing them can greatly improve performance. To further optimize loading times,
images should be properly sized and uploaded in next-gen formats such as AVIF short for AV1
Image File, and WebP which stands for Web Picture Format.
- Replace animated GIFs with video: Animated GIFs can be large files that
slow down page loading, so replacing them with video can improve performance.
- Avoid redirects: Redirects can add extra time to page loading, so
minimizing or avoiding them can help improve performance.
- reload scripts and styles, and consider deferring non-critical JS/CSS:
Preloading scripts and styles can help speed up the rendering process, while deferring
non-critical JS/CSS can improve overall page speed by only delivering critical elements inline.
- Minify code (html, css, js): Minification is the process of minimizing
code by removing redundant data, comments and unused code, as well as using shorter variable and
function names. This can help reduce the size of the code and improve loading times.
- Eliminate render-blocking resources: Render-blocking resources, such as
CSS and JavaScript, can prevent the page from rendering quickly. Eliminating or reducing these
resources can help improve page speed.
