I just got the latest update, and I am lost.

I can’t remember the last time I had an email from Kirupa.com - i think it was probably a long, long time ago though.

This was a timely email, though, as I am currently enjoying probably my second existential work crisis in around seven years.

After losing a job of 12 years working with Flash in 2017 i found work with a small tech company and was lucky enough to get a shot at rebuilding the website, as a part of my role there. The cranky old site we used to have was 99% bootstrap 3.0, with a nasty bit of php hidden away in a subdir that ran - runs - the businesses whole customer grievance contact facility. I say runs because it’s still there, and no-one seems to want to touch it.

In any case, i rebuilt the site from nothing as a brand new bootstrap 4 animal, put the old subdomain to sleep, and redirected everything we wanted to the shiny new www.

Fast forward almost four years and with demands on time and mountains of work in other areas of the business, the poor (now probably middle aged) ‘new’ website has not been given all of the attention that it probably should have, and is behaving quite poorly in the eyes of today’s performance indicators - lighthouse, gtmetrix and platforms such as hubspot (although hubspot is very vague around what exactly the problems are). These problems manifest themselves in the from of issues such as TBT, reserving space with CSS, render blocking resources, and a myriad of other tech challenges that, to be honest, I do not believe that I have the know-how to address.

Moving forward, I find myself at a point where a small part of me thinks i should effectively start thinking about retiring this build as well, and strike out on some sort of learning path that would lead me to a leaner solution able to address all of these performance issues either out of the box, or with some serious elbow grease.

But i have no idea where to begin, to be honest. Which is why i thought i might post this.

As someone with training in older standards - markup, CSS and a tiny bit of JS - what would any of the folks out here say the next step (or the absolute must-knows) for someone like me might be?

Is there a framework - or frameworks - that I could invest time in learning that may offer a little bit more futureproofing against the march of time? Or at least which i could invest my time in now to address the performance shortfalls of my poor old bootstrap build as it currently stands?

I do understand that webdev is an ongoing and never ending process of learning - at this point, i feel as though I’m lost before i even begin, though, because i don’t understand where the starting point here would be.

Hey mate,

Sorry to hear about the issues your having :slightly_smiling_face:

I had the same issues that you are having about 5-6 years ago.
I had a career change, was attempting to start a business and wanted a website.

My first exposure to web development was 1995-1998 in school when the web was new to us (dial up, AOL, Netscape navigator, Yahoo).
Our school hosted a web server on a Pentium 386 with dial up (no idea how :smile:)
TBH I cant really remember using CSS (I think everything was an attribute of HTML) :smile:

Fast forward 20 years and I had absolutely no reference to what a good website was… so I when I was looking for somebody to build me a website I used Lighthouse to assess them…

To this day I cant find a web development company, in my country (Australia), that has decent Lighthouse scores. The UK has a few performant web development companies.

So when I got screwed by business partner and it folded… I accidentally got into web development :smile: (after attempting to build my own site)

Funny enough when I was re-learning how to build my own website my main business competitor had a website (prob early 2000s) that ranked highly on Lighthouse but looked like Craigslist :laughing:

TBH there are only 4 things IMO that have significantly changed website performance in the last 20 years.

  • Service Workers (pre caching your links, images ect,)… you can just use Workbox…
  • Accessibility (pretty easy with semantic HTML, aria ect)
  • Responsiveness ( even break points will work)
  • Structured data/ SEO ( just write some JSON-LD in a script)

All the rest is just Bling (CSS and animations ect)…

  • For CSS Andy Bells Every Layout modules are the bomb as well as Grid, Vars
  • TBH just buy the Every Layout book … (you will definitely re-learn responsive CSS and could probably replace Bootstrap)

For some advanced stuff:

  • Web Components (can be used stand alone AND with almost all frameworks)
  • Static Site Generators (apparently Astro has a nice component based model and uses Vite as a bundler)
  • Animations (Kirupa has heaps on this :slightly_smiling_face:)
  • Finite State Machines (the best for apps, use Xstate if you have to )

If you have anything you want more info on or you just reply or DM me :slightly_smiling_face:

1 Like

Thanks Steve, I really appreciate your feedback. I think i need to get my head around SSGs, and the possibility of starting fresh with one - I was introduced to the JamStack by a good mate but most of it went straight over my head. Astro was in there somewhere, though!

1 Like

Hi @stripeycat - I really am terrible at sending newsletter e-mails. That is something I hope to fix and be more regular on :stuck_out_tongue:

Do you have any plans of retaining parts of your current site? If not, extending to Steve’s excellent answer, I would suggest you look into using a modern metaframework like Next.js (uses React) or Nuxt (uses Vue). These are fantastic solutions for building SSG, or SSR (Server Side Rendering…PHP style without the PHP), or ISR.

Astro is definitely a good choice as well, for it does magical things also using React or Vue!

:slight_smile:

2 Likes

Hi Kirupa, thanks for your reply!
I think the answer would be that we would not be starting from scratch in terms of the content (including the look and the feel) - effectively i would like to rebuild the entire site so that it would look the same but under the hood, it would be a different beast.
Looking into what Steve mentioned and following on from the lead that i was given a while back to the JamStack, i’ve asked netlify to get in touch with me to find out more about what they do. I can’t quite understand whether they are just an Edge solution or whether they provide an answer from front to back, but am curious about exactly what they do.

On the SSG front - i’ve been digging around more over the weekend and i feel as though Hugo looks like an interesting proposition? I’m not sure if i have the chops for React. There look to be pros and cons to all of these static site generators.

I think my real worry is that I do a month or months of work only to find caveats around what any of this can offer my existing website. Essentially i want to deliver the same looking content but much faster. So i think the challenge for me is to extend my knowledge into other software that can both increase my own saleability but more importantly improve how the website gets to users.

Cloudflare has some pretty decent offerings:

  • Worlds largest CDN (95% of global population within 50ms)
  • Cloudflare Pages (most SSG’s supported, inc Hugo) free tier is pretty generous
  • Cloudlfare Workers JS or WASM cloud functions (no cold start, service worker syntax)
  • DB integartions (Fauna, Macrometa, Hasura ect)
1 Like

Big +1 to Cloudflare. I use it on this site, and it is a worthwhile investment.

To look at all of this differently, if performance is your biggest concern, do you have a CDN attached in front of it? Cloudflare is a great choice here. The configuration you need to do is very minimal, and you may see instant performance savings after setting it up.

Since your goal is to maintain the current site’s look and feel, my initial suggestion is to avoid any sort of major rewrite or change until you have exhausted all perf optimizations in your current site. While newer frameworks address many problems, they will have their own problems that you will need to work around.

FWIW, this site doesn’t use any web frameworks. It is static HTML, CSS, JS authored in Dreamweaver and uploaded via FTP. It does have Cloudflare at the CDN layer, and it gets very high Lighthouse Scores - usually straight 95-100’s across all categories.

Also, can you share a link to your site?

1 Like

I did get in touch with Cloudflare to find out a bit more about price tiers - it’s possible to host one free site with them (which the company would love), but you have to apparently agree to their DNS information or using their domain name servers (which our IT guy would definitely not love). So the next tier up is 200 quid a month, which i know from experience would require a sit down for the managing director, as he cannot rationalise spending anything over zero on marketing.

I’ve also spoken to our fourth line microsoft engineer about the possibility of using Azure CDN, as we’re heavily invested with microsoft and to my mind, this should at least be a question. I’m waiting on feedback from him to find out if i should go back to beating the cloudflare drum, which i think is still a sound option.

Yeah Cloudflare started as/ still is a security company (DDOS protection ect).
All their other products are just them taking advantage of their edge network…

1 Like

We don’t use a CDN at the moment - when i raised the point, marketing’s first response was that we don’t play outside the UK meaning it would be a waste. i’ve tried to get around this by going back to the fact of the performance metrics being enough to warrant an investment - and also to the fact that as mobile usage continues to extend its reach, this metric is just going to gain more momentum over time - but it’s not having the impact i want as yet.

I’m definitely trying to shore up what i have at the moment - the biggest frustration right now is a vague Total Blocking Time penalty which the platform in use (hubspot) gives very little information around exactly what elements are responsible for this tbt penalty.

What you mentioned about newer frameworks is exactly what my fear is - i invest a boatload of time in learning a new framework or frameworks, and then find that this brings with it a new set of questions to answer and problems to solve. I’d be more than happy to do this from my side but the viewpoint from higher up is generally one of ‘hurry up’ followed closely by ‘why isn’t this working’ :stuck_out_tongue:

i can’t link to the site right now, but it is a straighforward Bootstrap 4.0 build - html, css, some js (mostly external scripts which are part of the hammering that the site is suffering from and which can’t be deferred unless i’ve missed something in my research - GTM, hubspot’s form and now chat functionality, things like that).

At the bare minimum, a CDN will make static content get to users faster. What CDNs like Cloudflare provide on top of that include, fully on the CDN layer:

  1. Image optimization where, on the fly, large images or PNG/JPG images are served as WebP or Avif without your web app actively having to do anything. The Edge CDN servers generate the new image and cache it

  2. Bundling JS on the fly so that many JS scripts are consolidated into one, compressed/minified, and served as a single deliverable

There are a few other items as well, but these are the two biggest reasons for what a CDN like Cloudflare provides. Definitely check to ensure if you use another CDN that they can do this as well, for these are some of the biggest performance wins I’ve seen in my use of Cloudflare.

:slight_smile:

2 Likes

Wow - i did not know this about the cloudflare offering. That JS functionality sounds like it could be a fairly big win for me.

I really wish they had a mid tier under the 200 pound price tag. I think I need to start buttering up IT to see if they would entertain the possibility of shifting to the free tariff with the DNS requirements.

I’ve just spoken to sales over at cloudflare, they didnt know anything about JS optimisation or delivery unfortunately but it sounds so easy to set up that i think i might pay for the Pro package for a month or two, and just run it against our website myself, to see if it shows an improvement? Can’t hurt to try!

Fwiw, I use the $37 a month plan that includes an extra fee for Argo and free image optimization. I didn’t pay extra for the more advanced image optimization capabilities.

2 Likes

I’ve pretty much lined up the marketing person to start begging for their Pro package as a non-negotiable (if she wants that Lighthouse recommendation to go away).

We won’t get 200 a month for the first Business tier but the setup seems to be reasonably straightforward to bolt on or unbolt over time so if it does make a significant improvement to the pagespeed performance then i’m pretty sure it might stay.

Thanks for the advice guys!

2 Likes