3D Names Website V8.00

Technologies change

Here at 3D Names, the website has been running since around 2010 (it actually goes back to 2005, but that's another story altogether!) at the time the web was much much different place, it was very common to build a website entirely using HTML tables, and pages written in ASP, PHP or possibly even just plain old .html files were standard practice. Websites needed to be quick, but it was quite easy for them to get bloated and slow quickly as more and more was added to them.

Today it's very different story, with the advent of Mobile devices taking the lead in traffic % shares there are now many new technologies out there that can help us developers create much better performing websites using state of the art software and frameworks.

Image & Code optimizations have always been essential (arguably more so in the past) but today with the mobile fist approach to website design there is once again a need to really focus on page speeds not only to make your website better for customers but also to please the many web checking tools out there.

V1.00 to V5.00

The first 5 versions of this website were built with traditional PHP, HTML, jQuery and CSS, all hand-coded at first and then eventually shifting towards Bootstrap.

The domains used to be hosted on 3dnames.net & 3dnamewallpapers.com - you can still see how these looked using the Way Back Machine for 3dnames.net in 2010 and also for 3dnamewallpapers.com in 2012 😬

V6.00

The last update of 3D Names I created was built using React Static - this neat framework allowed me to essentially build a React based website, but each page served as a landing page to launch React from. This allowed the 3D Names website to be "pre-built" like a standard React App but with 3.6 million individual landing pages so perfect for page speed as well as SEO.

Interesting fact - it only took about 15 minutes to build all 3.6million pages on an 8 core Macbook pro!

Unfortunately the draw back was that any updates to the site required me to re-build all 3.6 million pages each time... which took a few hours. Secondly, there were a few limitations of the React Static framework, and with no more versions being released it was time to say Goodbye! 😥 😭 I loved that framework! Anyhow, even though it's sad to move away from it, I did want to say a big thanks to Tanner Linsley for your amazing work you did with it!

V7.00

Version 7.00 was an experimental version I started to build using https://svelte.dev/ - I find this framework totally amazing, but alas I realized I wasn't going to get up to speed with it quickly enough for me to be able to do this next update so had to skip this version for now... maybe V9.00!

V8.00

So, this is where we are with the latest version 8.00 of the website... and as mentioned above React Static was great but with it no longer being supported I had to switch to something else. So I choose to use NextJS & Tailwind CSS to build this time around.

NextJS is an exceptionally good framework, created by Vercel, it's built on top of React which is now a hugely popular framework itself, and has an enormous amount of developer and community support. The main problem with React on it's own is that from an SEO perspective it's useless as technically there is only one single page. NextJS solves this by making each of your "pages" actual .html end points that act as the loader for the React application. This means when our website is indexed by search engines there are pages that can all be crawled by our server just like a traditional web server, but as soon as the first page has loaded the user is then browsing the rest of the site with the speed and snappiness of a React Website.

It also supports ServerSide rendering as well, meaning I could serve the Search and Preview pages on the fly, by doing an API lookup to my AWS stored files. So updates are extremely quick now (as I don;'t have to pre-build all 3.6million pages)

If you are a React developer and you haven't yet used NextJS then I strongly recommend you take a look at it by going to the Vercel official website https://nextjs.org/

Tailwind CSS

My favorite go to CSS framework in the past was always Bootstrap, but recently I heard a lot of talk about Tailwind CSS so had to check it out and give it a go. It's certainly a bit weird to get used to at first and if you're a big fan of writing your own CSS instead of using "out of the box" ready made CSS then it might not be for you, but if you're a developer who understand CSS fairly well but would like a tool that speeds up your development then this Framework is just awesome.

The idea is that you don't (or very rarely) touch your CSS files yourself as there are literally thousands or pre-built classes that you simply write into your HTML code, for example, if you need to add a purple button, with white text that turns dark purple when you hover over it? Then you simply write this HTML:

<div className="bg-3dnames-500 hover:bg-3dnames-700
text-white px-2 py-2 text-center w-48 
border-2 border-3dnames-700 rounded-md cursor-pointer">Click Me</div>

Then when it comes to building your website for production, the Tailwind compiler will simply omit the unused classes out of your production code leaving you with a tiny CSS footprint.

I'm now a huge fan of it, and am now using it for all my new projects!

Are there any downsides? Yes, arguably you may end up knowing less about CSS itself and only know TailwindCSS, and secondly your HTML doesn't look as tidy as the traditional approach.

Vercel Hosting

I usually host my Website directly within AWS CloudFront or Amplify and then stick CloudFlare on top, but this time around I'm testing the water with hosting the Front end site directly with Vercels free hosting! I'll report back soon once it's been running for a few weeks or months!

Lighthouse scores

With this latest build of the 3D Names website, I wanted to focus on making sure the performance was kept as high as possible, NextJS helped me to reduce my JavaScript bundle size especially with its fantastic out-of-the-box code splitting, and using Tailwind CSS also meant my websites CSS remained nice and small as well.

The Lighthouse benchmark tool built into Chrome is super useful in helping you to identify any areas in your website that need attention, and once you start to use NextJS and Tailwind you almost become a bit obsessive, and although it's not the only testing you should be doing, it's a neat and convenient place to start.

Anyhow, by switching to NextJS, making careful use of TailwindCSS, and using correctly sized images and the HTML <picture> tag along with .webp and .avif images where possible I was able to get this website score up nice and high again:

Grrrrr! Google Adsense

Annoyingly... those scores above were given a bit of a nose bleed as soon as I enabled Google Adsense! Performance dropped down a bit as did the accessability:

...I guess some of those Advert publishers are getting a bit slack these days!

Verdict:

By using NextJS and TailwindCSS - the latest 3D Names Website has been given a perfect balance of Speed & Ease of Editing. Hosting with Vercel is simply amazing for a free to use service. I feel like my now 16 year old website might now have a fresh new pair of legs to see it going for a few extra years! That is until GPT-4 comes out and takes over the internet!