Chapter 1: Optimizing Blog Services
Introduction to the practical training content
____Optimization techniques you will learn in this chapter
Introducing the ____Analysis Tool
Service exploration and code analysis
____Download Code
____Service Execution
____Service Exploration
____Code Analysis
Page Inspection Using the Lighthouse Tool
____Check with Lighthouse
____Lighthouse Test Results
Image size optimization
____Inefficient image analysis
____Image CDN
____Optimized for appropriate image size
Bottleneck code optimization
____Explore the Performance panel
____Look at the page load process
____Bottleneck code improvement
____Before and after optimization comparison
Code Splitting & Lazy Loading
____Bundle File Analysis
____What is code splitting?
Applying ____code splitting
Text compression
____production environment and development environment
What is ____text compression?
____Apply text compression

Chapter 2: Optimizing Olympic Statistics Services
Introduction to the practical training content
____Optimization techniques you will learn in this chapter
Introducing the ____Analysis Tool
Service exploration and code analysis
____Download Code
____Service Execution
____Service Exploration
____Code Analysis
Animation optimization
____Find the animation in question
____The principles of animation
____Browser rendering process
____Reflow and repaint
____Hardware acceleration (GPU acceleration)
____Animation Optimization
____Comparison before and after optimization
Lazy loading of components
____Bundle File Analysis
____Separate the modal code
Component preloading
____Disadvantages of lazy loading
____Component preloading timing
Image preloading
____Slow image loading
____Image preloading

Chapter 3: Website Optimization
Introduction to the practical training content
____Optimization techniques you will learn in this chapter
Introducing the ____Analysis Tool
Service exploration and code analysis
____Download Code
____Service Execution
____Service Exploration
____Code Analysis
Lazy loading of images
____Network Analysis
____Intersection Observer
Applying ____Intersection Observer
Image size optimization
____Analyzing slow image loading
____Image format type
Converting images using ____Squoosh
____Comparison before and after optimization
Video Optimization
____Video Content Analysis
____Video Compression
____Apply compressed video
____Comparison before and after optimization
____tip
Font optimization
____FOUT, FOIT
____How to optimize fonts
Cache optimization
What is ____cache?
____Cache-Control
____Cash applied
____Appropriate cache expiration time
Remove unnecessary CSS
____PurgeCSS

Chapter 4 Image Gallery Optimization
Introduction to the practical training content
____Optimization techniques you will learn in this chapter
Introducing the ____Analysis Tool
Service exploration and code analysis
____Download Code
____Service Execution
____Service Exploration
____Code Analysis
Avoid layout shifts
What is ____Layout Move?
____Causes of layout shift
____Layout movement solution
Lazy loading of images
Redux rendering optimization
____React's rendering
____Causes of re-rendering
____useSelector problem resolution
Bottleneck code optimization
____Image Modal Analysis
Analysis of the ____getAverageColorOfImage function

"Why is my web so slow?"
A book that will give you a break from the tedious web service!

Even for web services that appear identical, user satisfaction varies depending on performance.
If your website displays content too slowly or the layout changes suddenly, forcing users to click on unwanted elements, they will leave.
If you want your carefully implemented features to be effectively communicated to users, ‘performance optimization’ is essential.

Pinterest increased search traffic and signups by 15% by reducing load times by 40%, and COOK reduced its average page load time to 850 milliseconds, reducing its bounce rate by 7%.
In other words, improving web performance keeps users on the service, which leads to the success of the service.
If you want to find the cause of service performance degradation, check the optimization points recommended in this book.
This book will be the refreshing soda that will make the stuffy sweet potato-like web service more refreshing.

As the web becomes lighter, Google search rankings also rise.
Practice web minimalism to reduce the burden on users!

Google displays search results that show web pages with fast loading speeds at the top.
People want to find answers to their questions as quickly as possible, and they really care about page speed.
Google has been interested in the topic of 'web performance' for a long time and has been making various attempts to improve performance.
In the process, technologies such as Lighthouse and AMP were born.
Additionally, we periodically update our performance-related policies and encourage you to improve the performance of pages you want to appear in Google searches.

PMs, designers, and developers alike must consider user experience as a fundamental consideration.
If you want users to enjoy the web service you create, you need to be a minimalist who reduces the burden on user performance.
Let's carefully check the optimization points in this book to ensure that unnecessary code is not loaded, that cache settings are appropriate, and that the content size is not larger than necessary.