first optimization

udacity · Rajesh-Royal · Apr 1, 2020 · Apr 1, 2020 · Apr 1, 2020 · Apr 1, 2020
commit 0bfe4e097a7a6c613edca51b38e1a21f08d3820c
diff --git a/README.md b/README.md
@@ -2,6 +2,21 @@
 
 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. 
+
+### other optimization
+  #### mix content error console
+
+
+
+
+
 To get started, check out the repository and inspect the code.
 
 ### Getting started

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/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,78 @@
 <!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>
 
-    <!-- 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">
+  <!-- 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">
 
-    <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.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>
+  <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/images/pizzeria-thumbnail.jpg b/views/images/pizzeria-thumbnail.jpg
diff --git a/views/images/pizzeria.jpg b/views/images/pizzeria.jpg