Have you ever got irritated due to the slow speed of a website?
In this course you’ll learn how to optimize any website for speed. Broadly, you’ll learn about the Critical Rendering Path, or the set of steps browsers must take to convert HTML, CSS and JavaScript into living, breathing websites. From there, you’ll start experimenting with tools to measure performance and simple strategies to deliver the first pixels to the screen as early as possible.
Assessment
This course does not involve any written exams. Students need to answer 5 assignment questions to complete the course, the answers will be in the form of written work in pdf or word. Students can write the answers in their own time. Each answer needs to be 200 words (1 Page). Once the answers are submitted, the tutor will check and assess the work.
Certification
Edukite courses are free to study. To successfully complete a course you must submit all the assignment of the course as part of the assessment. Upon successful completion of a course, you can choose to make your achievement formal by obtaining your Certificate at a cost of £49.
Having an Official Edukite Certification is a great way to celebrate and share your success. You can:
- Add the certificate to your CV or resume and brighten up your career
- Show it to prove your success
Course Credit:Google
Course Curriculum
Website Performance Optimization | |||
Instructor Introduction | 00:02:00 | ||
Final Project Overview | 00:01:00 | ||
Tech Requirements | 00:01:00 | ||
Setup for mobile | 00:01:00 | ||
Using dev tools on mobile | 00:01:00 | ||
Mobile tools for iOS | 00:01:00 | ||
Using Screencast | 00:01:00 | ||
The Critical Rendering Path | |||
Critical Rendering Path Walkthrough | 00:01:00 | ||
Converting HTML to the DOM | 00:02:00 | ||
Fast Google Search Responses | 00:01:00 | ||
Exploring Timeline Traces | 00:01:00 | ||
Building the DOM | 00:01:00 | ||
Converting CSS to the CSSOM | 00:03:00 | ||
Which styles render faster? | 00:01:00 | ||
Recalculating CSS Styles in DevTools | 00:02:00 | ||
The Render Tree | 00:03:00 | ||
Which screen elements are visible? | 00:01:00 | ||
Finding Examples of Expensive Layouts | 00:01:00 | ||
Calculating Layout | 00:01:00 | ||
Analyzing Layout in DevTools | 00:01:00 | ||
Finding Examples of Expensive Layouts | 00:01:00 | ||
Time to Paint the Page! | 00:01:00 | ||
Analyzing Paint in DevTools | 00:01:00 | ||
Steps to Render the Page | 00:01:00 | ||
Analyzing the Entire CRP in DevTools | 00:02:00 | ||
Practice Optimizing the CRP | 00:02:00 | ||
CRP Wrap Up | 00:01:00 | ||
Optimizing the CRP | |||
Optimizing the DOM | 00:01:00 | ||
When will the page render? | 00:01:00 | ||
Unblocking CSS with Media Queries | 00:03:00 | ||
Which stylesheets are render blocking? | 00:01:00 | ||
JavaScript and the CRP | 00:02:00 | ||
How will the text be rendered? | 00:01:00 | ||
External JavaScript Dependencies | 00:02:00 | ||
More on JavaScript Dependencies | 00:01:00 | ||
What optimizations would you try? | 00:01:00 | ||
Async JavaScript | 00:02:00 | ||
Pick the JavaScript Approach | 00:01:00 | ||
General Strategies and CRP Diagrams | 00:04:00 | ||
CRP Diagrams with External CSS | 00:01:00 | ||
Can you Calculate CRP Metrics from HTML? | 00:01:00 | ||
CRP Metrics Discussion | 00:01:00 | ||
What strategies would you try? | 00:01:00 | ||
Can you Calculate CRP Metrics from HTML? | 00:01:00 | ||
The Preload Scanner | 00:02:00 | ||
Draw a CRP Diagram – Easy | 00:01:00 | ||
Draw a CRP Diagram – Hard | 00:01:00 | ||
The Final Project Overview | 00:02:00 | ||
TCP Bonus Question | 00:01:00 | ||
Assessment | |||
Submit Your Assignment | 00:00:00 | ||
Certification | 00:00:00 |
Course Reviews
No Reviews found for this course.