CODEWITHSUNDEEP
javascriptjqueryhtmlcssloading
LeCoda
LeCoda

Reputation: 1026

How to minimize load time of a landing page

I'm honestly confused about where to start with minimizing the load time of a website i'm building - https://projectrhea.herokuapp.com/ . Currently takes around 9 seconds to load the website which I want to try and bring down to sub 3 seconds.

I've done a diagnostic test, shown here https://www.webpagetest.org/result/171113_T2_851758db144ac117ab4e986a3798b1b5/1/details/#waterfall_view_step1 .

From what I can see there are three main reasons it would be taking awhile to load.

This is my first real time trying to solve an issue like this and I would really appreciate the knowledge a more experienced coder could bring to this. Thanks!

Upvotes: 1

Views: 721

Answers (5)

Viktor Reinok
Viktor Reinok

Reputation: 130

Use following automated tools:

  1. Optimize image sizes and quality. (Automated tools above provide You with the optimized images)
  2. Place Your CSS file at the beginning of your bootstrapping file such as index.html
    • Compress CSS files (remove the formatting)
  3. Place Your JS file at the bottom of the file.
    • Compress JS files (remove the formatting)

Upvotes: 2

Znaneswar
Znaneswar

Reputation: 3387

  1. The bigger your css, the longer the page takes to load. So try to reduce/minify css and try to use css in a single file. Same with JS also

  2. Use Lazy load for images so webpage displays quickly without calling images.

  3. Make sure server is using keep-alive as it can truly affect how your server fulfills requests.

  4. Enable gzip compression

  5. Minimize page redirects because it affect page speed

  6. Enable browser caching so your browser can load the page without having to send another HTTP request to the server.

Upvotes: 1

divsingh
divsingh

Reputation: 1232

Trying to address the specific points raised by you.

The first is the javascript.

I only need a small amount of it to run the site but I am very confused about how to separate the code I need from the code I don't need. I use it for the banner to show multiple phrases underneath the banner that I would rather keep.

Your JS files are not minified. Please make sure you are minifying your js files and order as suggested by Ante Jablan Adamović.

The second part is the shear amount of CSS files I'm drawing from.

I used a template to begin the site (it was a good way for me to learn how to design the site). Now I think this has meant there is way too many css and other files connected to this landing page.

You should combine and minify all the CSS files.

For minification and combining of JS and CSS you can use gulp. https://github.com/gulpjs/gulp

The third part is the video file I have.

I would love to keep this video as I just like how it fits in the site. I'll try and minimize the file size after I have worked out the above issues.

I can see that you are serving some resources through S3. See if you can move your video as well to S3 and serve it through cloudfront.

Upvotes: 1

MartinWebb
MartinWebb

Reputation: 2008

Well for a start -

Place the css at the top, consider using a js loader to load the js once the page has loaded.

If you can obviously remove everything you don't need their are tools to do this but in reality is a tough task especially if its a template

And finally with the video get an image of the first frame, show the image not the video when the page loads.

How to make a loading image when loading HTML5 video?

Upvotes: 1

Nisal Edu
Nisal Edu

Reputation: 7591

Place your css imports in the top of the page and import your javascript after your html body ends.

Upvotes: 1

Related Questions