Building a super fast portfolio page 🚀

Dimitris Kiriakakis | SDC 2024

Fullstack Developer @ ZEAL

dimitris kiriakakis

Who am i

  • Writing code professionally since 2013
  • Sharing blog posts about Web Vitals, web performance, Angular and other topics on Medium and Dev.To (@dimeloper)

Hamburg office

ZEAL

  • Germany's largest provider of online lotteries through the brands LOTTO24 and Tipp24
  • B2B businesses through GMX.net, Web.de and NTV
  • Supporting numerous charity projects and good causes
  • 200+ employees, hybrid working environment

We are working with technologies such as Angular, NextJS, Typescript, Kotlin, GoLang, Swift, AWS, K8S..

..and we are hiring! 🎉

Objectives

Understand Core Web Vitals metrics

Choose the right framework to pass them

Create a foundation for our own portfolio page

Deploy it and make sure that we can continue building it

repository

https://github.com/dimeloper/astro-portfolio-workshop

CORE WEB VITALS

A set of metrics that measure real-world user experience for loading performance, interactivity and visual stability of a web page.

Loading Performance

Largest Contentful Paint (LCP) is the Core Web Vital metric for measuring load speed. 

 

It reports the render time of the largest image or text block visible in the viewport, relative to when the user first navigated to the page.

 

To provide a good user experience, sites should strive to have LCP of 2.5 seconds or less.

DETECTING LCP

Improving LCP

  • Prioritise the load of the LCP section
  • Optimise the LCP image (reduce size / convert to webp)
  • Eliminate rendering delays (Server side rendering)
  • Defer loading of parts of our page that are not in the viewport
  • Load as less Javascript as possible until it becomes necessary

interactivity

Interaction to Next Paint (INP) is the Core Web Vital metric for measuring interactivity.

 

INP observes the latency of all click, tap, and keyboard interactions with a page throughout its lifespan, and reports the longest duration. 

 

An INP equal to or less than 200 ms means our page has good responsiveness.

MEASURING INP

For the purposes of INP, only the following interaction types are observed:

  • Clicking with a mouse.
  • Tapping on a device with a touchscreen.
  • Pressing a key on either a physical or onscreen keyboard.

 

Interactions can consist of multiple events. The event with the longest duration within the interaction is chosen as the interaction's latency.

Source: web.dev

Improving INP

  • Give early feedback to the user
  • Move heavy tasks to the backend
  • Avoid unnecessary state updates and use cache techniques
  • Implement debouncing or throttling wherever necessary

Source: web.dev

VISUAL STABILITY

Cumulative Layout Shift (CLS) is the Core Web Vital metric for measuring visual stability. 

It helps quantify how often users experience unexpected layout shifts.

 

A low CLS helps us to ensure that our page is delightful.

 

To provide a good user experience, our site must have a CLS score of 0.1 or less.

MEASURING CLS

Cumulative Layout Shift is the sum of individual layout shifts in a certain time window. The time window can cover up to 5 seconds.

Improving CLS

  • Reserve space for images or other types of async content before it is fully loaded
  • Using placeholders or skeleton boxes for media assets prevent unexpected shifts as content loads.

summary

If we want to build a blazing fast portfolio page, we need to find a framework which allows us to do the following:

  • Prioritise LCP section load.
  • Render parts of our pages on the server.
  • Load NO Javascript until it becomes necessary.
  • Offers out of the box tools to help us hit our Web Vitals goals.

 

  • Enables us to utilise knowledge we have from other frameworks. ⭐

Why not SPA?

Using a typical Single Page Application framework like Angular, React or Vue, typically require loading the framework's base bundles before we can start rendering pages.

  • SPA frameworks are built to support dynamic content
  • Unfortunately they ship too much Javascript (Angular ~20KB, React ~35KB, Vue ~17KB)
  • Only when JS is loaded and evaluated, our page will be rendered
  • Frameworks like Next and Nuxt do a better job but they are still hydrating the whole page, thus injecting unnecessary JavaScript.

ASTRO

Astro is a Static Site Generator that is based on JavaScript as a language but ships NO JavaScript by default on the client side.

  • To support parts of our page that require interactivity, it offers us "Interactive Islands".
  • Offers out of the box tools to help us hit our Web Vitals goals (loading priority, image optimisation etc.)

 

  • Enables us to utilise knowledge we have from other frameworks. ⭐

ASTRO

Our goal

STATUS check

Prerequisites for the coding part:

  • Have an active GitHub account

  • Install GIT

  • Install Node and NPM

 

You can verify that the required tools are available by opening a new terminal and checking their versions.

and so it begins..

Plugins

We are going to need some additional dependencies

to gain access to sets of SVG icons.

npm run astro add astro-icon
npm install @iconify-json/mdi

UI deps

Additionally we are going to need some UI dependencies

to support our SCSS theme and the Open Sans font.

npm install sass -D
npm install @fontsource/open-sans

structure

  • All images included into the src directory will be automatically optimised by Astro.
  • Astro components will be rendered on the server.
  • Within the pages directory we are using the path names we want since Astro offers file based routing.

Coding time!

1. Download the assets.zip file from the workshop repository and export its content into your src folder.

2. Copy over the content of the following folders to your own repo:

  • src/components/
  • src/layouts/
  • src/pages/

 

3. Finally, within pages/index.astro

comment out lines 8 and 93.

THEMing 

Once we are done with the project setup, we can already modify the page theming and replace the sample images with our own.

  • There are SCSS variables (main.scss, line 19) that define the colour palette.
  • As we replace images we should make sure that the dimensions are sensible and the format of the images is .webp (see "Tooling Appendix").

 

🎨

interactivity

Our contact form might include some additional interactivity, therefore we are going to write a React component for it.

npm run astro add react

Astro will take care of all necessary configuration adjustments.

Then we can simply go to our index.astro and import our React component.

deployment

Finally, we are going to deploy our new page on the web using Netlify.

npm run astro add netlify

Astro will take care of all necessary configuration adjustments.

Then we need to go to the Netlify dashboard, login with our Github and import our fresh repository.

questions?

thank you!

- https://dimeloper.com

- https://dev.to/dimeloper

- https://medium.com/@dimeloper

Building a super fast portfolio page

By Dimitris Kiriakakis

Made with Slides.com

Building a super fast portfolio page

  • 231

More from Dimitris Kiriakakis