1

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.

  • 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.

  • 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.

  • 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.

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!

LeCoda
  • 538
  • 7
  • 36
  • 79
  • I suppose, the question will be closed as too broad. Try to use google speed insights and follow its advices https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fprojectrhea.herokuapp.com%2F First, you should group css and js into two minified files. – shukshin.ivan Nov 13 '17 at 07:39
  • @shukshin.ivan I don't see why this would be considered a _too broad_ question, he clearly stated and gave statistics on his loading components. – anteAdamovic Nov 13 '17 at 07:40
  • 1
    @MichaelHolborn What's making your website so slow is mainly the loading of 2 `JS` files: `mc-validate.js` and `plugins.js`. Now If you don't need `mc-validate.js` I would remove that as 6 seconds load time is a lot ... about `plugins.js` try moving to at the __END__ of your `` tag, will make your page load first then start download. – anteAdamovic Nov 13 '17 at 07:42
  • Thanks for that. the MC-Validate is used to get subscribers for the site. I will have to find out how to get it to work without it taking 6 seconds to load! – LeCoda Nov 13 '17 at 07:46

5 Answers5

2

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)
Viktor Reinok
  • 113
  • 13
1

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

Nisal Edu
  • 7,237
  • 4
  • 28
  • 34
1

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?

MartinWebb
  • 1,998
  • 1
  • 13
  • 15
1

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.

divsingh
  • 1,172
  • 8
  • 15
  • I'll have a go at doing each of these things. Appreciate your help! – LeCoda Nov 13 '17 at 07:55
  • Sure. Would love to know how much you could bring down the latency after these steps. – divsingh Nov 13 '17 at 07:57
  • I've used a CDN that has minified versions of bootstrap and jquery, already saved around 2 seconds. Next step is fixing the mailchimp jquery form - it is taking an absurd amount of load time so going to get that under control next! – LeCoda Nov 13 '17 at 08:08
1

  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.

Znaneswar
  • 3,329
  • 2
  • 16
  • 24