Boost Your Website Performance - The Practical Guide
Published 4/2024
MP4 | Video: h264, 1920x1080 | Audio: AAC, 44.1 KHz
Language: English
| Size: 5.04 GB
| Duration: 4h 48m
Measure , analyze and improve your web pages load time and responsivenes using real world tools
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
Requirements
A knowledge of HTML, CSS and JavaScript is required
Description
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-100Every 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
Overview
Section 1: Introduction
Lecture 1 Web performance and motivation
Lecture 2 Important questions
Lecture 3 Why this course
Lecture 4 Project structure
Lecture 5 Sections
Lecture 6 How to make the most out of this course
Section 2: Sample 1 - optimize the performance score of expanding cards to 100
Lecture 7 Setup
Lecture 8 Simulate slow network
Lecture 9 Lighthouse tool
Lecture 10 Web vitals and lighthouse perfromance score
Lecture 11 Local lighthouse tool and limitation
Lecture 12 Web hosting and page speed insight
Lecture 13 Lighthouse tool vs page speed insight
Lecture 14 LCP and its phases
Lecture 15 WebPageTest and browser rendering pipeline
Lecture 16 Understand the limitation of remote fonts
Lecture 17 How to use local font
Lecture 18 Use local images
Lecture 19 Use hero image instead of hero div with background-image
Lecture 20 Responsive images , srcset and LintImages
Lecture 21 Crop hero image to get performance score of 100
Lecture 22 Further improvments
Section 3: Sample 2 - optimize the performance score of WebPageTest demo page to 96-99
Lecture 23 Section introduction
Lecture 24 WebPageTest analysis
Lecture 25 Render blocking resources
Lecture 26 4xx response in WebPageTest
Lecture 27 TBT and performance tab
Lecture 28 Use webp format and sharp package
Lecture 29 Remove wrong lazy load
Lecture 30 Responsive image and srcset for dog image
Lecture 31 Use production javascript packages
Lecture 32 chrome coverage tab to remove non used resources
Lecture 33 Convert a render-blocking resource into a non-render-blocking one
Lecture 34 Reduce cls using aspect ratio part 1
Lecture 35 Reduce cls using aspect ratio part 2
Lecture 36 Summary
Section 4: Sample 2 - optimize the SEO and accessability to score 100
Lecture 37 Introduction
Lecture 38 Optimize the accessability to score 100
Lecture 39 Optimize the seo to score 100
Section 5: Sample 3 - optimize the performance of natours to score 100
Lecture 40 Introduction
Lecture 41 Performance analysis
Lecture 42 Fix error serve image in next-gen format
Lecture 43 WebPageTest analysis
Lecture 44 Solve render blocking issue with local font
Lecture 45 Responsive images with srcset
Lecture 46 More responsive images with srcset
Lecture 47 Use smaller small hero for 100 performance score
Section 6: Sample 3 - optimize seo + accessability of natours to score 100
Lecture 48 Motivation
Lecture 49 Optimize accessability for score 100
Lecture 50 Optimize seo for score 100
Section 7: Sample 4 - advanced performance issues
Lecture 51 Motivation
Lecture 52 Setup
Lecture 53 Psi automation part 1 - collect samples
Lecture 54 Psi automation part 2- get api kei
Lecture 55 Psi automation part 3 - filter samples
Lecture 56 Reduce actual css file size with purgeCss
Lecture 57 Bundle and minify css\js files
Section 8: Summary
Lecture 58 Summary
Frontend developers,Fullstack developers,Web developers
Free search engine download: Boost Your Website Performance - The Practical Guide
