Reducing page load time

TomD · January 19, 2019, 9:03am

I’ve been wondering about the possible performance issues related to Wappler placing script references in the <head> section.

I experimented on a page which is fairly straightforward but includes quite a few images, using Google’s Pagespeed. This was the result:

I made a simple change in the code; I added ‘defer’ as below (excluding AppConnect and jQuery):

This was the result:

I suppose there could be problems depending on what happens when the page loads, but in most cases I would have this was a good idea with obvious benefits.

There is a minor issue. At one point - I’m not sure when - Wappler modified what I had added to:

I just re-edited and I don’t think it’s happened again.

George · January 19, 2019, 9:49am

This is interesting! The defer option continues to render the page and don’t block it till the scripts are loaded.
Can gain indeed some performance, but I’m not sure if it won’t cause flashing of the components renderings.

Maybe @patrick can advise on that.

As for the empty quotes in code view - that is an unfortunate legacy even in de modern HTML DOM parsers we use from the browsers. They internally make all empty attributes = “” to be backwards compatible with HTML4 and such. So it isn’t a bit problem for now - we will see if can deal better with this in the future.

TomD · January 19, 2019, 10:15am

I haven’t tested this much but I haven’t noticed any extra flashing.

I see now that defer is changed to defer="" when the file is closed/reopened, not when it’s saved.

I just ran a pagespeed test on two pages - one with the quotes added. It didn’t make any difference. I don’t know if the quotes could cause other problems.

nshkrsh · January 19, 2019, 10:21am

I was just running page speed tests yesterday and was about to post on community for suggestions to improve on that. Will try defer asap.

George · January 19, 2019, 10:22am

The quotes doesn’t matter at all.

I’m curious about the effects of defer - if it works fine there should be definitely a big performance gain. I do think some older browsers like IE had some problems with it in the past but all new evergreen browsers should be fine

George · January 19, 2019, 10:28am

Some background reading:

Seems defer is a big winner and we should always use it

George · January 19, 2019, 1:18pm

Yes try to measure as Tom did and post charts of the loading times on complicated sites as comparison with and without defer. And check of course if everything is running just as it should.

George · January 19, 2019, 1:19pm

And maybe our load time/SEO freak @psweb should join in - he tries to squeeze every byte possible
I wonder where he is

nshkrsh · January 19, 2019, 2:01pm

After adding defer and async, I see a jump in the score of about 10 points for mobile view.
Desktop view is ok, but mobile view get a very low score of 56 due to too many CSS files and the biggest culprit being bootstrap.min.css. Another big file is dmxAppConnect.js, but I haven’t added defer on it. If @patrick or you can confirm its safe to defer/async it, performance should a bit get better.

Mobile observations:

Mobile results:

Desktop results:

George · January 19, 2019, 2:08pm

You should add only defer not a sync!
Also not to dmxAppConnect.js or jquery those really need to be loaded first

nshkrsh · January 19, 2019, 2:10pm

Another thing I found in my code was unused JS & CSS files. I had tried swiper component, but decided not to use it and deleted it. But, there were two JS files & one CSS file still getting included because that code was added automatically, but not removed.

If there could be some button to initiate a check (if not automatic) for unused links & scripts, it would be great.

George · January 19, 2019, 2:11pm

And check the loading graph and timings in chrome dev tools, network tab

Make sure you check with browser cache cleared first or ctrl+f5

nshkrsh · January 19, 2019, 2:13pm

I have used async on jquery, defer on all scripts, and nothing on dmxAppConnect.js.
Could not find anything for CSS. Google’s docs suggest to use MEDIA attribute, but that is something I can do for my own CSS, and not for component supporting CSS files.

nshkrsh · January 19, 2019, 2:15pm

I find using Incognito Mode much accurate than using hard reload.

Also, there is a hidden ultra-hard-reload option when inspect element is open in Chrome, which is again better than Ctrl+F5 or Ctrl+Shift+F5.
Right-click on reload button to use it.

nshkrsh · January 19, 2019, 2:19pm

Tried out the Coverage tab first time. Interesting results. Lots of unused bytes!

George · January 19, 2019, 2:32pm

Coverage is a whole different thing measuring unused code but that is always a lot bacause of functionality that just might not be called yet or cross browser stuff

nshkrsh · January 19, 2019, 2:43pm

True. But its good to have for own CSS or JS files.

nshkrsh · January 19, 2019, 2:47pm

Found an issue. Can’t really say its because of defer though.
I added tooltips to icons on the home page, but they refuse to show up.

The admin panel too has tooltips, and they are working fine even after deferred script loading. Am I missing something else?

Dave · January 19, 2019, 3:05pm

We have found that Rocket Loader provided by CloudFlare works really well, and have seen no issues with Wappler/DMX files. I believe it’s a similar approach to defer although more similar to async?

We ignored dmxAppConnect.js using data-cfasync=“false” but even without this we see no adverse issues.

psweb · January 19, 2019, 8:05pm

Hi @George, sorry I only got back to my computer now, lol, and yes i spend every waking moment trying to find ways to make my files load as fast as possible.

To be extremely honest though, it is a very manual process the way i do it, but @ben uses an application that can put all the scripts together to stop so many small files being loaded, it rather loads one much larger one which is much quicker.

A single css file and a single js file for the end result is always my ultimate goal, although i hardly ever achieve that, but if i can get 20 js files into 3 and 10 css files into 2 it makes a massive difference.

I also use lazy load, and different size images for every viewport, which again is quite a pain, and quite a manual process of saving 5 images for every 1, each one optimised one at a time for the smallest possible filesize in photoshop, and never exceeding 135kb including meta info.
All images are also then put through a cleaner, imageoptim to remove all unused meta information.

Lastly i use a really fast hosting server, well at least i think so, it is a VPS with SSD’s, then all the images go through cludinary, and cloudflare or stackpath sit behind all that.

So yes I jump through hoops to ensure i get the best possible speed. Accommodation websites are very competitive, bookings.com has a .5 second load time, and with everything i have done, i have less on the page, and have a .9 second load time still. So clearly I still have work to do.

EDIT: I have been visiting a lot less because I have been shmoozing my bigger clients in the UK and USA, so the last 2 weeks I have spent more time on planes than I ever wanted to in my entire life. I am back home now but playing catch up, so hardly any time to play since the start of the new year.