Here is the link to the website whose source code is in this repository. Link to the Website.
Link to the google page speed insights for the index.html page - Check Out Page Speed Score
Link to the pizza.html with 60 FPS speed when scrolling - Scroll To Feel It
To get started, check out the repository and inspect the code.
- To Run the application locally open index.html in your browser.
- First clone or download this repository into your local machine.
- This website uses gulp task runner to minify css, js and images for optimization.
- You must have got a package.json file with the source code.
- Run
npm install
in cmd to download and install node modules. - After successfull installation of npm you can start making changes in the css and js files of your src folder.
- Any change to reflect in your website you'll have to run
gulp
from the cmd. - This ensures that all the css and js files are minified and copied into the dist folder to which the website is refering to.
- Check out the repository.
- This repository is hosted by github pages.
- Link to this website is given above.
- Link to the page speed is also given as well.
- List of all changes from top to bottom of the index.html page.
- Media queries for the css file(print.css) which was render blocking the page load.
- Inlining all the css styles from the style.css file so avoid one more network call to fetch the data.
- Using optimized images everywhere. Images were also minified using gulp.
- All the javascripts are moved just before closing of the
body
tag because no point downloading them before dom. - All javascripts are made async to avoid render blocking because none of them are needed early.
- If we look at at line 493. function
updatePositions()
, we can see that -
- I am fetching the list of mover elements by class.
- Calculating the scroll top outside loop.
- Creating the phases array using Math.sin method outside the layout paint loop helps prevent FSL.
- In the loop painting the layout I am using the translateX property which enables hardware acceleration.
-
In line 527. number of pizzas are reduced to 30 because 200 pizzas are not visible on the screen.
-
In style.css files for the mover class will-change property is added to generate the elements in a seperate layer. This avoids painting overhead in the main layer.
-
For decreasing time to resize pizza to 0ms -
- Line 439. function
changePizzaSizes(size)
, I am not calculating the absolute width for the given size of the element. - Line 425. function
determineDx(size)
, has a switch statement which gives the width(in percent) according to the size passed. - Line 442. saving this percent width in the
newwidth
variable. - Line 444. Again getting the list of elements and saving them in the
pizzas
variable. - Then looping each element in
pizzas
variable and updating thestyle.width
property with thenewwidth
.