Boost Your Website Performance - Practical for Developers

You’re here because you have a website with pages loading slowly and you don't know how to fix this.

I am here because I can help you accomplish your mission. I have B.s.c + M.s.c in mechanical engineering. I have been making software applications for over 20 years in the Hi-Tec industry and have much teaching experience. You can trust me and my teaching methods. I have learned many technologies in the past (check my LinkedIn profile), and I know exactly what is needed to learn and how.

In this course, I show you three practical examples, actually three web pages, and walk you step by step through how to improve their load time and responsiveness so that they will reach a performance score of 99-100

Every website has a front-end side. The front end comprises files: HTML, JavaScript, CSS, Fonts, and Images. These files have a huge effect on how fast your web pages load and respond and this will be the focus of this course.

There is a lot of theory behind web performance and most courses concentrate on theory, but not this course. This course concentrates on real life - you have a web page with bad performance and you want to improve its load time and responsiveness.

When you come to handling web performance issues you need to answer all the following questions which most developers do not have answers to:

- How to measure performance straightforwardly?

- How to analyze performance?

- How to fix the performance issues and reach a performance score of 100 using a clear procedure.

All of these questions will be demonstrated and answered in this course using three web pages.

To make you an expert on this issue we will learn the following concepts

- Core Web Vitals, in particular: LCP, CLS, TBT

- Measure performance correctly using Page Speed Insight and Lighthouse

- Analyze web performance using WebPageTest

- Learn a clear procedure that will lead you to improve the webpage performance score to 100

- Convert image format to WEBP format and how to crop image file using the image processing package - sharp

- Lazy load images using HTML properties

- Use responsive images and srcset for smart image loading per viewport

- Reduce CSS file size using purgeCSS

- Minimize JavaScript and CSS files using the bundler

- Improve SEO, accessibility, and best practices

- Track unused CSS and javascript using Chrome dev tools

- Remove unused JavaScript function using Tree Shaking

- Use Chrome Dev Tools to pinpoint functions that consume a lot of CPU

- Optimizes load of web font using self-host and woff2 format