udacity · Rajesh-Royal · Apr 1, 2020 · Apr 1, 2020 · Apr 1, 2020 · Apr 1, 2020
diff --git a/README.md b/README.md
@@ -2,6 +2,24 @@
 
 Your challenge, if you wish to accept it (and we sure hope you will), is to optimize this online portfolio for speed! In particular, optimize the critical rendering path and make this page render as quickly as possible by applying the techniques you've picked up in the [Critical Rendering Path course](https://www.udacity.com/course/ud884).
 
+
+## Optimization Work
+  #### 1. Properly Size images
+  #### 2. Compressed Images
+  #### 3. Levrage Font display feature :swap
+  #### 4. External Request count low
+  #### 5. minified css,js
+  #### 6. Cache Policy, mix content error console
+
+  live demo - [frontend-nanodegree-mobile-portfolio](https://rajesh-royal.github.io/frontend-nanodegree-mobile-portfolio/)
+
+## pizza.html optimization
+  #### 1. frames per second rate is 60 fps now :) 
+
+
+
+
+
 To get started, check out the repository and inspect the code.
 
 ### Getting started

diff --git a/cache.manifest b/cache.manifest
@@ -0,0 +1,11 @@
+CACHE MANIFEST
+css/style.min.css
+js/perfmatters.js
+img/2048.jpg
+img/cam_be_like.jpg
+img/devices.jpg
+img/instructors.jpg
+img/mobilewebdev.jpg
+img/profilepic.jpg
+img/profilepic.webp
+views/images/pizzeria-thumbnail.jpg
diff --git a/css/style.css b/css/style.css
@@ -6,7 +6,10 @@ html {
   -webkit-text-size-adjust: none;
 }
 body { margin: 0; font-size: 14px; line-height: 1.61; font-weight: 400; }
-body, button, input, select, textarea { font-family: 'Open Sans', sans-serif; color: #333; }
+body, button, input, select, textarea { 
+  font-family: 'Open Sans', sans-serif; 
+  color: #333; 
+}
 
 a { color: #12C; }
 a:visited { color: #61C; }

diff --git a/css/style.min.css b/css/style.min.css
diff --git a/img/2048.jpg b/img/2048.jpg
diff --git a/img/devices.jpg b/img/devices.jpg
diff --git a/img/instructors.jpg b/img/instructors.jpg
diff --git a/img/profilepic.webp b/img/profilepic.webp
diff --git a/index.html b/index.html
@@ -1,72 +1,79 @@
 <!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="description" content=" FILL ME IN ">
-    <meta name="author" content=" FILL ME IN ">
-    <title>Cameron Pittman: Portfolio</title>
+<html lang="en" manifest = "cache.manifest">
 
-    <!-- Hmm, what is the impact of web fonts on speed? Measure it... -->
-    <link href="//fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content=" FILL ME IN ">
+  <meta name="author" content=" FILL ME IN ">
+  <title>Cameron Pittman: Portfolio</title>
 
-    <link href="css/style.css" rel="stylesheet">
-    <link href="css/print.css" rel="stylesheet">
+
 
-    <script>
-      (function(w,g){w['GoogleAnalyticsObject']=g;
-      w[g]=w[g]||function(){(w[g].q=w[g].q||[]).push(arguments)};w[g].l=1*new Date();})(window,'ga');
+  <link href="css/style.min.css" rel="stylesheet">
+  <link href="css/print.css" rel="stylesheet" media="print">
 
-      // Optional TODO: replace with your Google Analytics profile ID.
-      ga('create', 'UA-XXXX-Y');
-      ga('send', 'pageview');
-    </script>
-    <script src="http://www.google-analytics.com/analytics.js"></script>
-    <script async src="js/perfmatters.js"></script>
-  </head>
+  <script>
+    (function (w, g) {
+      w['GoogleAnalyticsObject'] = g;
+      w[g] = w[g] || function () { (w[g].q = w[g].q || []).push(arguments) }; w[g].l = 1 * new Date();
+    })(window, 'ga');
 
-  <body>
-    <header>
-      <a href="/"><img src="img/profilepic.jpg"></a>
-      <p>Cameron Pittman<br><span>Course Developer</span></p>
-    </header>
+    // Optional TODO: replace with your Google Analytics profile ID.
+    ga('create', 'UA-XXXX-Y');
+    ga('send', 'pageview');
+  </script>
+  <script defer src="https://www.google-analytics.com/analytics.js"></script>
+  <script async src="js/perfmatters.js"></script>
+</head>
 
-    <div class="container">
-      <div class="hero">
-        <strong>I love web development!</strong> This is a template for a simple portfolio. I decided to use it to showcase a few Udacity courses I've taken and some teaching work, but you can use it to showcase any kind of project that you want the world to see :) <br> Contact me: me@email.com
-      </div>
+<body>
+  <!-- Hmm, what is the impact of web fonts on speed? Measure it...  moved to body tag -->
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap" rel="stylesheet">
+  <header>
+    <a href="/"><img class="lazy" src="img/profilepic.webp"></a>
+    <p>Cameron Pittman<br><span>Course Developer</span></p>
+  </header>
 
-      <div class="content">
-        <ul>
-          <li>
-            <img src="https://lh4.ggpht.com/kJEnfqhPvtm4m3EneSZ4fWYGS8lW4YNhEjk6zPkyrQaBUHc-2Y_ElDic99NHI0h-UBLXVbRCjFybFvrWxdk=s100">
-            <a href="project-2048.html">Build Your Own 2048!</a>
-            <p>I made my own version of 2048. How cool is that!?</p>
-          </li>
+  <div class="container">
+    <div class="hero">
+      <strong>I love web development!</strong> This is a template for a simple portfolio. I decided to use it to
+      showcase a few Udacity courses I've taken and some teaching work, but you can use it to showcase any kind of
+      project that you want the world to see :) <br> Contact me: me@email.com
+    </div>
 
-          <li>
-            <img src="https://lh6.ggpht.com/f_0W8h__3G99CWTjnMjD8BUKm7yp2-wJyApLtTwFoFtlal2ULf_JgHIsOQq2NiYfKOdMlXlMHDKNo5XVZLs=s100">
-            <a href="project-webperf.html">Website Performance Optimization</a>
-            <p>Hey... this class looks familiar.</p>
-          </li>
+    <div class="content">
+      <ul>
+        <li>
+          <img class="lazy" src="img/2048.jpg">
+          <a href="project-2048.html">Build Your Own 2048!</a>
+          <p>I made my own version of 2048. How cool is that!?</p>
+        </li>
 
-          <li>
-            <img src="https://lh5.ggpht.com/IKdCmTWn8a2nMhlwMYzryvzRN5CUZAOBr4tDrEAbszV7TIFe9pRAInA4kkYcgTXwrifJsBEsq1agTueuu-g=s100">
-            <a href="project-mobile.html">Mobile Web Development</a>
-            <p>Making mobile apps isn't so hard after all.</p>
-          </li>
+        <li>
+          <img class="lazy" src="img/instructors.jpg">
+          <a href="project-webperf.html">Website Performance Optimization</a>
+          <p>Hey... this class looks familiar.</p>
+        </li>
 
-          <li>
-            <img style="width: 100px;" src="views/images/pizzeria.jpg">
-            <a href="views/pizza.html">Cam's Pizzeria</a>
-            <p>Who wants a performant pizza?</p>
-          </li>
-        </ul>
-      </div>
+        <li>
+          <img class="lazy" src="img/devices.jpg">
+          <a href="project-mobile.html">Mobile Web Development</a>
+          <p>Making mobile apps isn't so hard after all.</p>
+        </li>
 
-      <footer>
-        <p>&copy; Web Performance 2014 <span id="crp-stats"></span></p>
-      </footer>
+        <li>
+          <img style="width: 100px;" src="views/images/pizzeria-thumbnail.jpg">
+          <a href="views/pizza.html">Cam's Pizzeria</a>
+          <p>Who wants a performant pizza?</p>
+        </li>
+      </ul>
     </div>
-  </body>
-</html>
+
+    <footer>
+      <p>&copy; Web Performance 2014 <span id="crp-stats"></span></p>
+    </footer>
+  </div>
+</body>
+
+</html>
diff --git a/js/perfmatters.js b/js/perfmatters.js
@@ -9,6 +9,3 @@ function logCRP() {
   stats.textContent = 'DCL: ' + dcl + 'ms, onload: ' + complete + 'ms';
 }
 
-window.addEventListener("load", function(event) {
-  logCRP();
-});
diff --git a/views/cache.manifest b/views/cache.manifest
@@ -0,0 +1,6 @@
+CACHE MANIFEST
+css/style.min.css
+css/bootstrap-grid.min.css
+js/main.min.js
+images/pizza.png
+images/pizzeria.jpg
diff --git a/views/css/bootstrap-grid.min.css b/views/css/bootstrap-grid.min.css
diff --git a/views/css/style.min.css b/views/css/style.min.css
diff --git a/views/images/pizzeria-thumbnail.jpg b/views/images/pizzeria-thumbnail.jpg
diff --git a/views/images/pizzeria.jpg b/views/images/pizzeria.jpg