Skip to content
This repository has been archived by the owner on Jun 28, 2022. It is now read-only.

[Draft] add website optimizations #155

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 22 additions & 12 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,10 @@

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).

To get started, check out the repository and inspect the code.
To get started, check out the repository, inspect the code,

### Getting started

#### Part 1: Optimize PageSpeed Insights score for index.html

Some useful tips to help you get started:

1. Check out the repository
Expand All @@ -19,23 +17,17 @@ Some useful tips to help you get started:
```

1. Open a browser and visit localhost:8080
1. Download and install [ngrok](https://ngrok.com/) to the top-level of your project directory to make your local server accessible remotely.
1. Download and install [ngrok](https://ngrok.com/) to make your local server accessible remotely.

``` bash
$> cd /path/to/your-project-folder
$> ./ngrok http 8080
$> ngrok 8080
```

1. Copy the public URL ngrok gives you and try running it through PageSpeed Insights! Optional: [More on integrating ngrok, Grunt and PageSpeed.](http://www.jamescryer.com/2014/06/12/grunt-pagespeed-and-ngrok-locally-testing/)
1. Copy the public URL ngrok gives you and try running it through PageSpeed Insights! [More on integrating ngrok, Grunt and PageSpeed.](http://www.jamescryer.com/2014/06/12/grunt-pagespeed-and-ngrok-locally-testing/)

Profile, optimize, measure... and then lather, rinse, and repeat. Good luck!

#### Part 2: Optimize Frames per Second in pizza.html

To optimize views/pizza.html, you will need to modify views/js/main.js until your frames per second rate is 60 fps or higher. You will find instructive comments in main.js.

You might find the FPS Counter/HUD Display useful in Chrome developer tools described here: [Chrome Dev Tools tips-and-tricks](https://developer.chrome.com/devtools/docs/tips-and-tricks).

### Optimization Tips and Tricks
* [Optimizing Performance](https://developers.google.com/web/fundamentals/performance/ "web performance")
* [Analyzing the Critical Rendering Path](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp.html "analyzing crp")
Expand All @@ -53,3 +45,21 @@ The portfolio was built on Twitter's <a href="http://getbootstrap.com/">Bootstra

* <a href="http://getbootstrap.com/css/">Bootstrap's CSS Classes</a>
* <a href="http://getbootstrap.com/components/">Bootstrap's Components</a>

### Sample Portfolios

Feeling uninspired by the portfolio? Here's a list of cool portfolios I found after a few minutes of Googling.

* <a href="http://www.reddit.com/r/webdev/comments/280qkr/would_anybody_like_to_post_their_portfolio_site/">A great discussion about portfolios on reddit</a>
* <a href="http://ianlunn.co.uk/">http://ianlunn.co.uk/</a>
* <a href="http://www.adhamdannaway.com/portfolio">http://www.adhamdannaway.com/portfolio</a>
* <a href="http://www.timboelaars.nl/">http://www.timboelaars.nl/</a>
* <a href="http://futoryan.prosite.com/">http://futoryan.prosite.com/</a>
* <a href="http://playonpixels.prosite.com/21591/projects">http://playonpixels.prosite.com/21591/projects</a>
* <a href="http://colintrenter.prosite.com/">http://colintrenter.prosite.com/</a>
* <a href="http://calebmorris.prosite.com/">http://calebmorris.prosite.com/</a>
* <a href="http://www.cullywright.com/">http://www.cullywright.com/</a>
* <a href="http://yourjustlucky.com/">http://yourjustlucky.com/</a>
* <a href="http://nicoledominguez.com/portfolio/">http://nicoledominguez.com/portfolio/</a>
* <a href="http://www.roxannecook.com/">http://www.roxannecook.com/</a>
* <a href="http://www.84colors.com/portfolio.html">http://www.84colors.com/portfolio.html</a>
1 change: 1 addition & 0 deletions css/style-min.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 5 additions & 0 deletions css/style-phone.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
/* Smartphones (portrait) */
@media only screen and (max-width: 480px) {
body { font-size: 12px;}
header p { padding-left: 4.5em;}
}
Binary file added img/profilepic-min.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions index-min.html
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<!DOCTYPE html><html lang="en"> <head> <style>html{font-size:100%;overflow-y:scroll;-webkit-tap-highlight-color:transparent;-ms-text-size-adjust:100%;-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}a{color:#12C}a:visited{color:#61C}a:focus{outline:dotted thin}a:active,a:hover{color:#c00;outline:0}b,strong{font-weight:700}code,pre{font-family:monospace,monospace;font-size:1em}ol,ul{margin:1em 0;padding:0 0 0 20px}img{border:0;max-width:100%}body{background:#fff}.container,footer,header{max-width:45em;margin:0 auto}header{padding:0 .5em;color:#C90B0B}header img{border-radius:40px;float:left}header p{font-size:1.5em;font-weight:700;padding-left:4em}header p span{font-size:.8em;font-weight:400}.hero{padding:2em;background-color:#f8f8f8;font-size:1.2em;border-bottom:1px solid #ccc;border-top:1px solid #ccc}.content{padding:1em}.content li{list-style-type:none;font-size:1.1em}li img{float:left;padding-right:1em}li p{font-size:.9em;font-style:italic}footer{padding:0 .5em;border-top:1px solid #ccc}footer span{float:right;font-style:italic}@media only screen and (max-width:480px){body{font-size:12px}header p{padding-left:4.5em}}</style> <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>Nuwan Tissera: Portfolio</title> <link href="//fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet"> <link href="css/print.css" rel="stylesheet" media="print"> <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'); // 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" async></script> <script async src="js/perfmatters.js"></script> </head> <body> <header> <a href="/"><img src="img/profilepic-min.jpg"></a> <p>Nuwan Tissera<br><span>Software Engineer</span></p></header> <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: [email protected] </div><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><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><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 style="width: 100px;" src="views/images/pizzeria-min3.jpg"> <a href="views/pizza.html">Cam's Pizzeria</a> <p>Who wants a performant pizza?</p></li></ul> </div><footer> <p>&copy; Web Performance 2014 <span id="crp-stats"></span></p></footer> </body></html>
32 changes: 18 additions & 14 deletions index.html
Original file line number Diff line number Diff line change
@@ -1,34 +1,38 @@
<!DOCTYPE html>
<html lang="en">
<head>
<style>
html{font-size:100%;overflow-y:scroll;-webkit-tap-highlight-color:transparent;-ms-text-size-adjust:100%;-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}a{color:#12C}a:visited{color:#61C}a:focus{outline:dotted thin}a:active,a:hover{color:#c00;outline:0}b,strong{font-weight:700}code,pre{font-family:monospace,monospace;font-size:1em}ol,ul{margin:1em 0;padding:0 0 0 20px}img{border:0;max-width:100%}body{background:#fff}.container,footer,header{max-width:45em;margin:0 auto}header{padding:0 .5em;color:#C90B0B}header img{border-radius:40px;float:left}header p{font-size:1.5em;font-weight:700;padding-left:4em}header p span{font-size:.8em;font-weight:400}.hero{padding:2em;background-color:#f8f8f8;font-size:1.2em;border-bottom:1px solid #ccc;border-top:1px solid #ccc}.content{padding:1em}.content li{list-style-type:none;font-size:1.1em}li img{float:left;padding-right:1em}li p{font-size:.9em;font-style:italic}footer{padding:0 .5em;border-top:1px solid #ccc}footer span{float:right;font-style:italic}@media only screen and (max-width:480px){body{font-size:12px}header p{padding-left:4.5em}}
</style>
<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>
<title>Nuwan Tissera: 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">
<!--<link href="//fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet"> -->

<link href="css/style.css" rel="stylesheet">
<link href="css/print.css" rel="stylesheet">

<!--<link href="css/style-min.css" rel="stylesheet"> -->
<link href="css/print.css" rel="stylesheet" media="print">

<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');

// Optional TODO: replace with your Google Analytics profile ID.
// 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 src="http://www.google-analytics.com/analytics.js" async></script>
<script async src="js/perfmatters.js"></script>
</head>

<body>
<header>
<a href="/"><img src="img/profilepic.jpg"></a>
<p>Cameron Pittman<br><span>Course Developer</span></p>
<a href="/"><img src="img/profilepic-min.jpg"></a>
<p>Nuwan Tissera<br><span>Software Engineer</span></p>
</header>

<div class="container">
Expand Down Expand Up @@ -57,16 +61,16 @@
</li>

<li>
<img style="width: 100px;" src="views/images/pizzeria.jpg">
<img style="width: 100px;" src="views/images/pizzeria-min3.jpg">
<a href="views/pizza.html">Cam's Pizzeria</a>
<p>Who wants a performant pizza?</p>
</li>
</ul>
</div>

<footer>
<p>&copy; Web Performance 2014 <span id="crp-stats"></span></p>
</footer>
</div>

<footer>
<p>&copy; Web Performance 2014 <span id="crp-stats"></span></p>
</footer>
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
</body>
</html>
Binary file added js/.DS_Store
Binary file not shown.
8 changes: 4 additions & 4 deletions project-2048.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<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>
<title>Nuwan Tissera: 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"> -->
Expand All @@ -17,7 +17,7 @@
(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');

// Optional TODO: replace with your Google Analytics profile ID.
// TODO: replace with your Google Analytics profile ID.
ga('create', 'UA-XXXX-Y');
ga('send', 'pageview');
</script>
Expand All @@ -28,7 +28,7 @@
<body>
<header>
<a href="/"><img src="img/profilepic.jpg"></a>
<p>Cameron Pittman<br><span>Course Developer</span></p>
<p>Nuwan Tissera<br><span>Software Engineer</span></p>
</header>

<div class="container">
Expand All @@ -38,7 +38,7 @@

<div class="content">

<img class="img-responsive" src="img/2048.png">
<img class="img-responsive" src="http://cameronwp.github.io/udportfolio/img/2048.png">

<p>Bacon ipsum dolor sit amet et pork belly porchetta excepteur dolor, laborum laboris magna labore dolore in fugiat beef ribs. Fugiat leberkas nulla do kevin dolore. Flank hamburger dolor swine prosciutto sirloin pig jerky sunt consequat pariatur. Mollit meatloaf nostrud laboris shoulder excepteur velit officia meatball nisi turkey. Nulla jowl spare ribs, et drumstick magna frankfurter.</p>

Expand Down
6 changes: 3 additions & 3 deletions project-mobile.html
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
(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');

// Optional TODO: replace with your Google Analytics profile ID.
// TODO: replace with your Google Analytics profile ID.
ga('create', 'UA-XXXX-Y');
ga('send', 'pageview');
</script>
Expand All @@ -28,7 +28,7 @@
<body>
<header>
<a href="/"><img src="img/profilepic.jpg"></a>
<p>Cameron Pittman<br><span>Course Developer</span></p>
<p>Nuwan Tissera<br><span>Software Engineer</span></p>
</header>

<div class="container">
Expand All @@ -37,7 +37,7 @@
</div>

<div class="content">

<p>Bacon ipsum dolor sit amet et pork belly porchetta excepteur dolor, laborum laboris magna labore dolore in fugiat beef ribs. Fugiat leberkas nulla do kevin dolore. Flank hamburger dolor swine prosciutto sirloin pig jerky sunt consequat pariatur. Mollit meatloaf nostrud laboris shoulder excepteur velit officia meatball nisi turkey. Nulla jowl spare ribs, et drumstick magna frankfurter.</p>

<img src="img/mobilewebdev.jpg">
Expand Down
8 changes: 4 additions & 4 deletions project-webperf.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<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>
<title>Cameron Pitman: 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"> -->
Expand All @@ -17,7 +17,7 @@
(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');

// Optional TODO: replace with your Google Analytics profile ID.
// TODO: replace with your Google Analytics profile ID.
ga('create', 'UA-XXXX-Y');
ga('send', 'pageview');
</script>
Expand All @@ -28,7 +28,7 @@
<body>
<header>
<a href="/"><img src="img/profilepic.jpg"></a>
<p>Cameron Pittman<br><span>Course Developer</span></p>
<p>Nuwan Tissera<br><span>Software Engineer</span></p>
</header>

<div class="container">
Expand All @@ -37,7 +37,7 @@
</div>

<div class="content">

<p>Thanks to everyone at Udacity and Google who made this class happen! Now for a very true meme and some <strike>lorem</strike> bacon ipsum.</p>

<img src="img/cam_be_like.jpg">
Expand Down
Binary file added views/.DS_Store
Binary file not shown.
Binary file added views/css/.DS_Store
Binary file not shown.
10 changes: 10 additions & 0 deletions views/css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,16 @@
-box-sizing: border-box;
}



#movingPizzas {
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Chrome, Safari, Opera */
transform: translate(50px,100px);
}



body {
font-family: "Trebuchet MS", Helvetica, sans-serif;
background: black;
Expand Down
Binary file added views/images/.DS_Store
Binary file not shown.
Binary file added views/images/pizza-min.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added views/images/pizzeria-min.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added views/images/pizzeria-min2.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added views/images/pizzeria-min3.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added views/js/.DS_Store
Binary file not shown.
Loading