Improving web page load time from source code

2025-familiarisation-se-q10 · Short Answer · 4 marks

Source: NESA 2025 HSC Software Engineering Familiarisation Q10

Question

Consider the following source code for a web page.

<html>
  <body>
    <link rel="stylesheet" href="style3.css"/>
    <script src="image-gallery.js"></script><!--this script is slow to load-->
    <link rel="stylesheet" href="styles1.css"/>
    <link rel="stylesheet" href="styles2.css"/>
    <h1>My Awesome Website!</h1>
    <p>I hope you like my website, I spent a lot of time designing it.</p>
    <h2>Photos from my holiday</h2>
    <img src="holiday1_4000x3000.jpg" width="640" height="480"/>
    <img src="holiday2_4000x3000.jpg" width="640" height="480"/>
    <img src="holiday3_4000x3000.jpg" width="640" height="480"/>
    <img src="holiday4_4000x3000.jpg" width="640" height="480"/>
  </body>
</html>

The web page is loading too slowly. Explain how the load time of this page can be improved.

Reveal answer

The large images should be resized and compressed to the displayed size instead of loading 4000 x 3000 files. The three CSS files could be combined and minified to reduce requests. The slow JavaScript file could be deferred, loaded asynchronously or moved after important content so it does not block rendering. Caching could also be used for repeated visits.

Marking rubric

Marks	Description
4	Explains several relevant improvements linked to the source code.
3	Describes relevant improvements to load time.
2	Identifies relevant load-time strategies.
1	Provides some relevant information.

Explanation

The code loads oversized images, multiple stylesheets and a slow script before content.

Metadata

Submitter: Seed data
Created: 2026-05-02
Status: published
Syllabus: y12-web-load-times
Tags: load time web performance images CSS JavaScript