How do I make my production optimised website load faster?

Support
, ,
1

Hi,

My deployed site https://grooma.net seems to load slow, I’m unsure if the build size (vuejs dist/) is small enough to be cached? It is 1.84mb on my local desktop (i really don’t know how to reduce it further as the code is production ready).

Netlify url is https://main--whimsical-cucurucho-dba809.netlify.app/

Deploy Logs:

12:20:02 PM: ────────────────────────────────────────────────────────────────
12:20:02 PM:   Netlify Build                                                 
12:20:02 PM: ────────────────────────────────────────────────────────────────
12:20:02 PM: ​
12:20:02 PM: ❯ Version
12:20:02 PM:   @netlify/build 27.1.2
12:20:02 PM: ​
12:20:02 PM: ❯ Flags
12:20:02 PM:   baseRelDir: true
12:20:02 PM:   buildId: 6286fabd3bc5ba00081c547a
12:20:02 PM:   deployId: 6286fabd3bc5ba00081c547c
12:20:02 PM: ​
12:20:02 PM: ❯ Current directory
12:20:02 PM:   /opt/build/repo
12:20:02 PM: ​
12:20:02 PM: ❯ Config file
12:20:02 PM:   No config file was defined: using default values.
12:20:02 PM: ​
12:20:02 PM: ❯ Context
12:20:02 PM:   production
12:20:02 PM: ​
12:20:02 PM: ────────────────────────────────────────────────────────────────
12:20:02 PM:   1. Build command from Netlify app                             
12:20:02 PM: ────────────────────────────────────────────────────────────────
12:20:02 PM: ​
12:20:02 PM: $ npm run build
12:20:03 PM: > grooma@0.1.0 build
12:20:03 PM: > vue-cli-service build
12:20:03 PM: -  Building for production...
12:20:30 PM:  WARNING  Compiled with 2 warnings2:20:30 AM
12:20:30 PM:  warning 
12:20:30 PM: asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
12:20:30 PM: This can impact web performance.
12:20:30 PM: Assets:
12:20:30 PM:   js/chunk-vendors.9aaf9c5c.js (463 KiB)
12:20:30 PM:   js/makeaccount.4836dc74.js (841 KiB)
12:20:30 PM:  warning 
12:20:30 PM: entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
12:20:30 PM: Entrypoints:
12:20:30 PM:   app (672 KiB)
12:20:30 PM:       css/chunk-vendors.a98944cb.css
12:20:30 PM:       js/chunk-vendors.9aaf9c5c.js
12:20:30 PM:       css/app.8f4135d1.css
12:20:30 PM:       js/app.318e8c18.js
12:20:30 PM:   File                                      Size             Gzipped
12:20:30 PM:   dist/js/makeaccount.4836dc74.js           841.49 KiB       400.91 KiB
12:20:30 PM:   dist/js/chunk-vendors.9aaf9c5c.js         463.04 KiB       154.33 KiB
12:20:30 PM:   dist/js/SearchBase.5082385f.js            40.23 KiB        9.46 KiB
12:20:30 PM:   dist/js/createAd~editAd.6546d823.js       36.65 KiB        9.26 KiB
12:20:30 PM:   dist/js/Ad~admin~base~createAd~editAd~    35.31 KiB        11.73 KiB
12:20:30 PM:   login~makeaccount.536d7e2c.js
12:20:30 PM:   dist/js/terms.ff551cb2.js                 34.99 KiB        11.21 KiB
12:20:30 PM:   dist/js/Ad.8c80a162.js                    30.71 KiB        9.03 KiB
12:20:30 PM:   dist/js/editAd.a573fdf1.js                30.69 KiB        5.78 KiB
12:20:30 PM:   dist/js/admin.82461d0d.js                 27.19 KiB        7.74 KiB
12:20:30 PM:   dist/js/login.c1ed3536.js                 25.52 KiB        7.89 KiB
12:20:30 PM:   dist/js/createAd.56c4b7e0.js              21.38 KiB        4.31 KiB
12:20:30 PM:   dist/js/privacypolicy.192d80b0.js         18.54 KiB        5.81 KiB
12:20:30 PM:   dist/js/settings.509651b8.js              16.77 KiB        6.04 KiB
12:20:30 PM:   dist/js/app.318e8c18.js                   16.61 KiB        5.52 KiB
12:20:30 PM:   dist/js/home.ba4775a9.js                  16.27 KiB        5.25 KiB
12:20:31 PM: Creating deploy upload records
12:20:30 PM:   dist/js/base.78e2aebe.js                  12.52 KiB        4.48 KiB
12:20:30 PM:   dist/js/help.dd35065b.js                  3.57 KiB         1.56 KiB
12:20:30 PM:   dist/js/Search.cc066c1f.js                2.30 KiB         1.12 KiB
12:20:30 PM:   dist/js/invoices.a82a8085.js              1.93 KiB         0.77 KiB
12:20:30 PM:   dist/js/404.ba26c18f.js                   1.76 KiB         0.92 KiB
12:20:30 PM:   dist/css/app.8f4135d1.css                 150.59 KiB       51.75 KiB
12:20:30 PM:   dist/css/chunk-vendors.a98944cb.css       42.02 KiB        5.43 KiB
12:20:30 PM:   Images and other types of assets omitted.
12:20:30 PM:  DONE  Build complete. The dist directory is ready to be deployed.
12:20:30 PM:  INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
12:20:31 PM: ​
12:20:31 PM: (build.command completed in 28.7s)
12:20:32 PM: Starting post processing
12:20:31 PM: ​
12:20:31 PM: ────────────────────────────────────────────────────────────────
12:20:31 PM:   2. Deploy site                                                
12:20:31 PM: ────────────────────────────────────────────────────────────────
12:20:32 PM: Post processing - HTML
12:20:31 PM: ​
12:20:31 PM: Starting to deploy site from 'dist'
12:20:31 PM: Creating deploy tree 
12:20:31 PM: 4 new files to upload
12:20:31 PM: 0 new functions to upload
12:20:32 PM: Site deploy was successfully initiated
12:20:32 PM: ​
12:20:32 PM: (Deploy site completed in 552ms)
12:20:32 PM: ​
12:20:32 PM: ────────────────────────────────────────────────────────────────
12:20:32 PM: Post processing - header rules
12:20:32 PM:   Netlify Build Complete                                        
12:20:32 PM: ────────────────────────────────────────────────────────────────
12:20:32 PM: ​
12:20:32 PM: (Netlify Build completed in 29.3s)
12:20:32 PM: Post processing - redirect rules
12:20:32 PM: Caching artifacts
12:20:32 PM: Started saving node modules
12:20:32 PM: Finished saving node modules
12:20:32 PM: Started saving build plugins
12:20:32 PM: Finished saving build plugins
12:20:33 PM: Post processing done
12:20:32 PM: Started saving pip cache
12:20:32 PM: Finished saving pip cache
12:20:32 PM: Started saving emacs cask dependencies
12:20:32 PM: Finished saving emacs cask dependencies
12:20:32 PM: Started saving maven dependencies
12:20:32 PM: Finished saving maven dependencies
12:20:32 PM: Started saving boot dependencies
12:20:32 PM: Finished saving boot dependencies
12:20:32 PM: Started saving rust rustup cache
12:20:32 PM: Finished saving rust rustup cache
12:20:32 PM: Started saving go dependencies
12:20:32 PM: Finished saving go dependencies
12:20:32 PM: Build script success
12:20:35 PM: Site is live ✨
12:21:12 PM: Finished processing build request in 1m29.249037726s

Thank you

2

hi there,

could you capture a HAR file (you’ll need to upload and share it from somewhere like pastebin or a google drive) so we can take a look at your load times? It would be good to get a HAR from a cached pageload and also a brand new one where no assets were cached (i might suggest an incognito window)

obviously load times depend on many different factors - mostly, the size of your pages assets, but also where you are located in the world, what your ISP is like, and much more, but some HAR files are a good start.

3

Deepest apologies for delayed response. Please find cached and uncached HAR files at HAR Logs - Google Drive

4

Hi @Leon1,

Could you explain which of that seems to be a slow request? I can see a majority of requests done within 300 ms and a few are less than 600 ms. That’s expected speed. Are you seeing slower requests than that?

5

Hi,

On a different wifi network outside of my main workplace that looked fast enough for other sites, my site was having a slow initial load of approx. 5 seconds and a slow cached reload of around 3 seconds before first contentful paint.

My home internet is fast and the site loads quick, however the thing I want to confirm with you is that my site is caching correctly in Netlify CDN, I had concerns about the build size not meeting your caching requirements.

Leon

6

We can’t confirm if the site has been cached or not - because it’s not the site as a whole that is cached but each individual asset. Plus, we’ve more than 80+ CDN nodes to check this, as chances are an asset is cached on 1 node and not on the other.

So all in all, confirming the cache status of your site is going to be a tedious task, which won’t even serve the purpose as by the time we complete the report, chances are the cache status might have changed on some nodes.

The HAR file that you shared didn’t have any files that were too huge. Note that, files do get cached, regardless of the size (at least till 10 MB), just that, files with higher sizes get dropped before the smaller files.

7

Thanks so much for the info and your time. Happy to close this case.