Website optimization using Google PageSpeed Insights score to evaluate page speed. The second part of the project is the optimization of Frames per Second(fps) in pizza.html.

Click here for the live index.html for PageSpeed Insights evaluation

Click here for the live pizza.html for frames per second evaluation Open the console window to review statistics.

PageSpeed Insights Score Before Optimization:

Mobile: 27/100

Desktop: 29/100

1. Compress images. Images have a huge impact on page speed.
2. Use a font loader. "After images, fonts are the normally the largest assets in your web page."(See #1, Resources).
3. Concatenate, minify and inline css.
4. Move google analytics code from the head to right before the closing body tag.

PageSpeed Insights Score After Optimization:

Mobile: 97/100 😃

Desktop: 97/100 😃

1. Change querySelector to getElementById (See #3, Resources)
2. Use class, not style. (See #4, Resources)
3. Put operations outside of loops when possible.

1. How to Improve Page Performance with a Font Loader
2. Loading Web Fonts with the Web Font Loader
3. Performance: getElementById vs. querySelector
4. Performance: Class vs. Style
5. Where did rendering go in Chrome DevTools
6. Markdown Cheat Sheet
7. Photo Resizer
8. Photo Compressor
9. Timeline Profiling with Chrome DevTools
10. Interesting perspective from a Chromium Developer
11. document.createDocumentFragment()
12. Faster DOM
13. Web Page Test
14. Progressive JPEGs
15. Cloudinary
16. Using Chrome Developer Tools to Analyze Web Performance
17. Web Performance Optimization Blog

Scrolling speed may not be 60 fps on more modest devices. For those devices, enabling hardware accelerated composition makes a huge difference. You could use translateX instead of style.left in the main.js file, or, a little trick to make it simpler. Add these properties to .mover in the css file.

-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
backface-visibility: hidden;

• DOM, CSSOM and blocking
• Latency, not bandwidth, is the problem
  • Testing responsiveness on variety of devices
  • Audit tab and how to use it
  • Pinpoint JS bottlenecks
  • Waterfall chart
  • Various times of navigation timing
  • Factors that effect performance