- All the files where minified (HTML, CSS, JavaScrpit).
- All the images where optimized.
- Async attribute was used in Google Analytics script tags to avoid CRP in
index.html. - The print.css was called with print media query to avoid CRP in
index.html. - External CSS was inlined to avoid CRP in
index.html. - Removed GoogleFonts API to avoid CRP in
index.html. - Eliminated two instances of Forced Synchronous Layouts in
views/js/main.jsthat occured while scrolling and changing the size of pizza. - Added
will-change: transform;andtransform: translateZ(0);under mover class inviews/css/style.cssto create a new layer. - Added requestAnimationFrame in
views/js/main.js. - Reduced the number of pizza in the page dynamically with respect the size of screen.
- Open a browser tab or window.
- Go to PageSpeed Insights.
- Paste in the URL of index.html.
- Click on ANALYZE.
-
Open up Google Chrome browser.
-
Open pizza.html on your browser.
-
To open the DevTools
- Select the Chrome menu at the top-right of your browser window, then select Tools > Developer Tools.
- Right-click on any page element and select Inspect Element
- Use CTRL + SHIFT + I or F12 (or CMD + OPT + I on Mac).
-
To check the resize time
- If the console drawer is not visible, click on >_ at the top-right of the DevTools window.
- Click the left or size side of the slider.
- The message
Time to resize pizzas:followed by the time in milliseconds will display on the console.
-
To check the frame rate
- Click on Timeline in the DevTools menu.
- To start recording a new timeline, click the record toolbar button at the top-left (below the search button) of the DevTools window, or press CTRL + E.
- While recording, scroll the Cam's Pizzeria page up and down a few times.
- Click the record toolbar button or press CTRL + E to stop recording.
- Select an area of interest in the overview by dragging. Zoom and pan the timeline with the mousewheel or WASD keys.
- Mobile - 93/100
- Desktop - 94/100