Boost Your Website Performance - The Practical Guide

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 - www.nathankrasney.com 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