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

gh-pages #131

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open
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
14 changes: 14 additions & 0 deletions .htaccess
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<IfModule mod_expires.c>
Header append Cache-Control "public"
FileETag MTime Size
ExpiresActive On
ExpiresDefault "access plus 0 minutes"
ExpiresByType image/ico "access plus 1 years"
ExpiresByType text/css "access plus 1 years"
ExpiresByType text/javascript "access plus 1 years"
ExpiresByType image/gif "access plus 1 years"
ExpiresByType image/jpg "access plus 1 years"
ExpiresByType image/jpeg "access plus 1 years"
ExpiresByType image/bmp "access plus 1 years"
ExpiresByType image/png "access plus 1 years"
</IfModule>
56 changes: 3 additions & 53 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,55 +1,5 @@
## Website Performance Optimization portfolio project
https://github.com/TrLuda/frontend-nanodegree-mobile-portfolio/tree/gh-pages

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).
https://trluda.github.io/frontend-nanodegree-mobile-portfolio/

To get started, check out the repository and 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
1. To inspect the site on your phone, you can run a local server

```bash
$> cd /path/to/your-project-folder
$> python -m SimpleHTTPServer 8080
```

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.

``` bash
$> cd /path/to/your-project-folder
$> ./ngrok http 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/)

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")
* [Optimizing the Critical Rendering Path](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/optimizing-critical-rendering-path.html "optimize the crp!")
* [Avoiding Rendering Blocking CSS](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css.html "render blocking css")
* [Optimizing JavaScript](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript.html "javascript")
* [Measuring with Navigation Timing](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/measure-crp.html "nav timing api"). We didn't cover the Navigation Timing API in the first two lessons but it's an incredibly useful tool for automated page profiling. I highly recommend reading.
* <a href="https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/eliminate-downloads.html">The fewer the downloads, the better</a>
* <a href="https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer.html">Reduce the size of text</a>
* <a href="https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization.html">Optimize images</a>
* <a href="https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching.html">HTTP caching</a>

### Customization with Bootstrap
The portfolio was built on Twitter's <a href="http://getbootstrap.com/">Bootstrap</a> framework. All custom styles are in `dist/css/portfolio.css` in the portfolio repo.

* <a href="http://getbootstrap.com/css/">Bootstrap's CSS Classes</a>
* <a href="http://getbootstrap.com/components/">Bootstrap's Components</a>
https://developers.google.com/speed/pagespeed/insights/?hl=ru&url=https%3A%2F%2Ftrluda.github.io%2Ffrontend-nanodegree-mobile-portfolio%2F&tab=mobile
2 changes: 1 addition & 1 deletion css/print.css
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,4 @@
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3{ page-break-after: avoid; }
}
}
50 changes: 1 addition & 49 deletions css/style.css

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

Binary file added img/2048.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 img/mobile.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 modified img/profilepic.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 img/webperf.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
40 changes: 13 additions & 27 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,67 +6,53 @@
<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">

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

// 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>

<body>
<header>
<a href="/"><img src="img/profilepic.jpg"></a>
<p>Cameron Pittman<br><span>Course Developer</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: me@email.com
</div>

<div class="content">
<ul>
<li>
<img src="https://lh4.ggpht.com/kJEnfqhPvtm4m3EneSZ4fWYGS8lW4YNhEjk6zPkyrQaBUHc-2Y_ElDic99NHI0h-UBLXVbRCjFybFvrWxdk=s100">
<img 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://lh6.ggpht.com/f_0W8h__3G99CWTjnMjD8BUKm7yp2-wJyApLtTwFoFtlal2ULf_JgHIsOQq2NiYfKOdMlXlMHDKNo5XVZLs=s100">
<img src="img/webperf.jpg">
<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">
<img src="img/mobile.jpg">
<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.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>
<script async>
(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');
ga('create', 'UA-XXXX-Y');
ga('send', 'pageview');
</script>
<script async src="http://www.google-analytics.com/analytics.js"></script>
<script async src="js/perfmatters.js"></script>
</body>
</html>
<link href="css/style.css" rel="stylesheet">
<link href="css/print.css" rel="stylesheet" media="print">
15 changes: 1 addition & 14 deletions js/perfmatters.js

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

Binary file added ngrok.exe
Binary file not shown.
Binary file modified views/images/pizzeria.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions views/js/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -462,7 +462,7 @@ var resizePizzas = function(size) {
window.performance.mark("mark_end_resize");
window.performance.measure("measure_pizza_resize", "mark_start_resize", "mark_end_resize");
var timeToResize = window.performance.getEntriesByName("measure_pizza_resize");
console.log("Time to resize pizzas: " + timeToResize[timeToResize.length-1].duration + "ms");
console.log("Time to resize pizzas: " +timeToResize[timeToResize.length-1].duration + "ms");
};

window.performance.mark("mark_start_generating"); // collect timing data
Expand Down Expand Up @@ -535,4 +535,4 @@ document.addEventListener('DOMContentLoaded', function() {
document.querySelector("#movingPizzas1").appendChild(elem);
}
updatePositions();
});
});