Measure , analyze and improve your web pages load time and responsivenes using real world tools
You’re here because you have a website with pages loading slowly and you don’t know how to fix this.
What you’ll learn
- This course is a practical guide !!!! You will learn hands-on how to improve the performance of your website.
- You will get a procedure with clear steps and tools that will lead you on the correct path to improve the performance of your website.
- You will learn hands-on to measure the performance of your website pages using page speed insight.
- Learn hands-on to analyze the performance of your website pages using web page test and other tools.
- Learn hands-on to use page speed insight and get recommendation for imroving your website performance.
- Learn hands-on to improve the SEO , accessability and best practice metrics of your web pages.
- Learn performance related concepts like : core web vital : CLS, LCP , TBT, crticial rendering path , render blocking.
- Learn to convert image format to webp and crop files using the image processing packahe – sharp.
- Learn to reduce the css file size using minify and purgeCSS.
- Learn how responsive images , srcset and lazy loading can reduce load time of image files.
- Learn how to optimize the loading time of your web fonts.
Course Content
- Introduction –> 6 lectures • 6min.
- Sample 1 – optimize the performance score of expanding cards to 100 –> 16 lectures • 1hr 33min.
- Sample 2 – optimize the performance score of WebPageTest demo page to 96-99 –> 14 lectures • 1hr 30min.
- Sample 2 – optimize the SEO and accessability to score 100 –> 3 lectures • 8min.
- Sample 3 – optimize the performance of natours to score 100 –> 8 lectures • 45min.
- Sample 3 – optimize seo + accessability of natours to score 100 –> 3 lectures • 9min.
- Sample 4 – www.nathankrasney.com advanced performance issues –> 7 lectures • 36min.
- Summary –> 1 lecture • 2min.
Requirements
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