web: load the first row of event images eagerly

web/src/components/events/EventContainer.tsx

@@ -169,8 +169,15 @@ const EventList = ({ events }: { events: EventOverviewItemFragment[] }) => {
   }
   return (
     <ul className={styles.eventList}>
-      {events.map((event) => (
+      {events.map((event, index) => (
-        <EventItem key={event.id} event={event} mode="list" />
+        <EventItem
+          key={event.id}
+          event={event}
+          mode="list"
+          // the first row is above the fold and holds the largest image
+          imageLoading={index < 3 ? "eager" : undefined}
+          imageFetchPriority={index < 3 ? "high" : undefined}
+        />
       ))}
     </ul>
   );