My Beef with Bootstrap

Coffee Lounge
#1

Beef #1: jQuery
Beef #2: CSS

Example: If I lived in the tropics (e.g. Cairns), I do not need a heater in my car. Yet every time I buy a car I have to pay for the heater.

The same goes for jQuery and Bootstrap CSS. Every time I deploy a site, I have to pay (as in bandwidth and loading time) for the extra bytes that are not required for the project.

Fortunately, Bootstrap has seen the light. Very soon we will have version 5 without jQuery!

This leaves the CSS. What if Wappler could magically reduce a CSS file size from 159KB to barely 60KB? Well, this can be done right now. Have a look at:

How would it be if Wappler included this as part of the program?

For more info:

What do you think?

8 Likes
Remove Unused Class/ID Styles
#2

Sounds good to me!

#3

Yep, sounds good for sure!

#4

+1
Why isn’t this a feature request yet?

#5

This has cropped up a couple of times - and was requested here.

2 Likes
#6

Sounds like you need a new host Ben! I understand the point but as an example we load full on applications spanning several databases, pulling all that together, in a Bootstrap page with a lot of customisations in milliseconds… We don’t pay extra for bandwidth or sacrifice any speed the end user will ever notice. Back in the days of dial-up and limited bandwidth maybe a different story… But these days with fiber (I’m in the back end of nowhere and we have fiber) a few KBs is absolutely nothing man… Another side is we have been handed over sites from clients where the previous designer/developer has butchered the CSS in a pursuit of performance measured, again, in milliseconds and KBs… Another flip-side is Wappler and its reliance upon Bootstrap as a framework. Yes it gives a very few people the ability to be absolutely anal about their file sizes, but in truth, most won’t sacrifice the bells and whistles that are available with the full framework. Can always build your own styles and stop relying upon Bootstrap would be my suggestion. Don’t wish to come across as moody but in todays day and age of high speed connections its more the designer/developer that cares more so than the end user. Just my input (pardon the pun).

1 Like
#7

This is a site that is built with bootstrap and very few database interactions.

image
image1451×739 117 KB

This is a site that has not been built using Bootstrap and has a huge database behind it.

image
image1451×739 242 KB

It is not hard to guess which gets a priority listing in a Google search. This is what I meant when I say pay for, a penalty.

#8

I don’t think this is a fare comparison Ben.
The Wappler.io site make use of a lot of videos to show the features and those slow down tge initial load a bit but it still ok. So not really a bootstrap fault here. We also haven’t optimize it much.

Thé community on the other side is sure optimized and actually uses much larger frameworks than bootstrap but loads most of its content dynamically afterwards. So not really a fair comparison either.

#9

@George, thank you for your feedback. I know that it is not comparing apples with apples. What I am trying to convey is what happens to HTML, JS and CSS that has to be loaded prior to rendering the page. This can be best illustrated as follows.

image
image1108×576 38.3 KB

As you can see, rendering takes place after the DOM and the CSSOM are ready.

In other words, both HTML and CSS are render blocking. To make things worse, they must wait for the JS to be interpreted and manipulate the DOM and CSSOM before the render tree can start. Anything that we as developers can do to minimise render blocking (like optimising images, minimising code and reducing file sizes) will only be an enhancement.

Something that may be worth reading:

1 Like
#10

But its not all about SEO and Google Ben. Years ago maybe but now our clients purchase keywords. We do design and development. Our clients sites are well presented on Google without the need to substitute for anything to achieve the ranks obtained. We just don’t get the obsession with SEO, we don’t see it, its rarely spoken about. Also if your market is say property management or rentals (as an example) then no matter what you do, outside of paying a huge amount of money, will get you to the top of Google…

2 Likes
#11

Agree.

#12

@Dave @ben

Also…Google page speed is a fairly ‘meh’ tool for measuring performance (page speed). It’s set up a particular way that doesn’t properly reflect a ‘real world’ users download time. Hence why pingdom and GTmetrix are far better ‘go toos’ for any SEO work.

Also from an SEO perspective, absolute page speed is a small factor in rankings. Google far prefers providing a solid answer to a query vs a page that contains poor content but loads quickly. They’ve said it multiple times. Only need to see some super slow loading sites that absolutely rank in the top 3 to see this.

So yeh, take Google page speed insights with a grain of salt. I’d also say that a forum with 100/1000s of references to Wappler stands a good chance of ranking for Wappler or related search terms above the corporate site. Logically it makes sense (independent of page speed).

The benefit of removing Jquery from Bootstrap though far outweighs the file size. :slight_smile:

3 Likes
#13

Nonetheless reducing loading times as much as possible is a good practice so this request is still valid even if it doesn’t have a huge SEO improvement. Specially because bootstrap is heavy.

#14

I agree with good practice. But in a world where people hit Netflix for a 10gb binge session, or Youtube 4k several times a day, have Facebook running in the background, and half a dozen browser windows open, then hit your site… Loading a few kb more is non-sequential in the grand scheme. Sometimes I believe too much emphasis is placed upon shaving files down to the bare minimum. Not only that it can be incredibly time consuming. Your own site fine, a paying client may sh1t a brick when invoiced and sees several hours extra for something they don’t understand. They’ll hit the budget for Google keywords, accountants happy… But explaining hours spent dropping file sizes… I’ve been there! You feel like you robbed their Christmas party fund hahaha…

:slight_smile:

3 Likes
#15

Which is why they built Open Connect. An interesting read for the geeks… https://openconnect.netflix.com/en_gb/

1 Like
#16

Indeed but it is all about context. People are used to sitting down, clicking a button and waiting for a 5 second buffering load. That is ok in a streaming context. But not acceptable in a browsing context. People get more demanding every year with browser loading times while they are ok with buffering wait. That is why we need to keep websites as slim as possible.

Makes no sense I know but that is why behavioral science and economics are such interesting areas for me.

#17

This is what I used to think until a few years ago too… Until I came across the fact that if you are building something for the world, the average internet speed is extremely slow around the world. And the devices users have are usually old and slow too. This really burst my bubble about saving even 20KB on an image or a file.

If your app targets a developing nation, like the one I live in (India), every single KB is expensive.

Apart from that, many users depend on mobile data which usually involves slow 3G/4G speeds.
And again, in developing nations, mobile phones are the only device people have… So they are dependent on mobile data for their daily internet usage.

When it comes to this, its like saying a responsive website is a waste of time and efforts because I surf on the desktop.

So, only if your target customer is above a certain pay-grade, or in a certain region, or if its a company specific app, saving these KB don’t matter at all.

The Google lighthouse tools are cool to test, but I completely agree that there’s no point dwelling on the numbers for speed or SEO.

2 Likes
#18

The difference is that a choice has been made to stream/download the movie. When a person opens a page in your site, they are not given a choice, they are obliged to transfer all of the needless CSS and or JS.

1 Like
#19

Very often neglected and a very good point.

I’m all for function over form every time Ben. But then there is going too far with it. Horses for courses comes to mind (as a poor horse owner I can relate).

:slight_smile:

1 Like
#20

That’s interesting. I was under the impression that Wappler used some sort of bundler to minimize and get rid of any unused CSS and JavaScript, but definitely be a nice feature.