diff --git a/README.md b/README.md
index e4a569e..7123c99 100644
--- a/README.md
+++ b/README.md
@@ -98,7 +98,15 @@ const Content = () => {
   <img src="./img/before-optimization.gif" width="400">
 </div>
 
-When we click the button, the rendering seems a bit laggy, right? That's because we need to wait for all the components to render. But not all components have the same priority. A better way is to render the important content first, and then the rest, the more important content will be shown more quickly.
+When we click the button, the rendering seems a bit laggy, right? That's because we need to wait for all the components to render.
+
+When we open the Chrome Performance tool, we can see:
+
+<div align="center">
+  <img src="./img/before-optimization-performance.png" width="400">
+</div>
+
+This means it is not good for the user experience. But not all components have the same priority. A better way is to render the important content first, and then the rest, the more important content will be shown more quickly.
 
 Let's say the priority of those components is Content > Sidebar > Header = Footer, then we can pass a `priority` field to represent the priority of each component.
 
@@ -143,4 +151,10 @@ const Content = () => {
   <img src="./img/after-optimization.gif" width="400">
 </div>
 
+When we open the Chrome Performance tool, we can see:
+
+<div align="center">
+  <img src="./img/after-optimization-performance.png" width="400">
+</div>
+
 The performance is better. Important content will be displayed to users more quickly, thereby providing a better user experience.
diff --git a/img/after-optimization-performance.png b/img/after-optimization-performance.png
new file mode 100644
index 0000000..8edf69d
Binary files /dev/null and b/img/after-optimization-performance.png differ
diff --git a/img/before-optimization-performance.png b/img/before-optimization-performance.png
new file mode 100644
index 0000000..5720df1
Binary files /dev/null and b/img/before-optimization-performance.png differ