Now that we have learnt how to measure and optimise your websites for speed. Lets put this knowledge into practice by optimising some websites from scratch. Below are two demo websites for you to play with. Lets see who can get the highest PageSpeed score.

4.1.1 SassConf.com


Why not try optimising the offical sassconf.com website.

  1. Check out the repository from here: https://github.com/phamann/sassconf-demo/
  2. To inspect the site on your phone, you can run a local server
    • cd /path/to/your-project-folder
    • $> python -m SimpleHTTPServer 8080
    • Open a browser and visit localhost:8080
  3. Download and install ngrok to make your local server accessible remotely.
    • $> cd /path/to/your-project-folder
    • $> ngrok 8080
  4. Copy the public URL ngrok gives you and try running it through PageSpeed Insights!

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

4.1.3 Portfolio demo


Ilya Grigorik has a great Udacity course on optimising the critical rendering path, part of which they have made a great sample portfolio website that is in need of some optimisation.

Why not try optimising the portfolio site, and even make it look like your own.

  1. Check out the repository from here: https://github.com/phamann/sassconf-demo/
  2. To inspect the site on your phone, you can run a local server
    • cd /path/to/your-project-folder
    • $> python -m SimpleHTTPServer 8080
    • Open a browser and visit localhost:8080
  3. Download and install ngrok to make your local server accessible remotely.
    • $> cd /path/to/your-project-folder
    • $> ngrok 8080
  4. Copy the public URL ngrok gives you and try running it through PageSpeed Insights!

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

4.1.3 Try your own?


Alternatively why not try optimising your own project. Make sure to share your findings with the rest of the group.