As a business owner, having a website with optimal performance is crucial for attracting and retaining visitors. For developers, understanding the int...
Ditulis Oleh zidan Pada 05 Mar 2024
As a business owner, having a website with optimal performance is crucial for attracting and retaining visitors. For developers, understanding the intricacies of page speed optimization not only enhances their skills but also positions them as authoritative figures in the competitive landscape. In this article, we'll explore the journey of optimizing zulzidan.com, focusing on achieving green Lighthouse scores for blog pages.
As a business owner, you're acutely aware that the heartbeat of your online presence lies in the performance of your website. The user experience, driven by the speed and efficiency of your digital storefront, can make or break customer engagement. Now, developers, you're not just crafting lines of code; you're the masterminds behind immersive digital experiences. Today, we embark on an enlightening journey into the optimization of zulzidan.com, and our primary focus is turning those Google Lighthouse scores a vibrant shade of green, particularly for our blog pages.
But why does this laser focus on blog pages, you might ask?
In the ever-evolving landscape of digital visibility, the blog section serves as the beating heart of organic growth and search engine optimization (SEO). While the homepage offers a captivating initial impression, it's the blog pages that often become the torchbearers in the quest for higher search rankings and increased online visibility.
Imagine this: a potential customer lands on your homepage, enticed by your offerings and aesthetics. They're intrigued, but it's the blog pages where they delve deeper, seeking valuable insights, solutions, or information. These pages, when finely tuned and optimized, become not just informative hubs but powerful tools for climbing the ranks in search engine results.
From a business perspective, ensuring your blog pages are finely optimized translates into a strategic move for climbing the SEO ladder. Google, and other search engines, prioritize content-rich, well-structured blog posts. By investing in the optimization of these pages, you're essentially positioning your business as an authoritative source in your industry, attracting not just casual visitors but individuals actively seeking the expertise and solutions you offer.
For developers, it's about recognizing the blog pages as dynamic elements that contribute significantly to the overall performance of the website. Optimizing these pages isn't merely a technical task; it's an opportunity to showcase your prowess in enhancing user experience, fine-tuning code for efficiency, and ultimately, contributing to the success of the business you're supporting.
So, as we delve into the details of our journey to green Lighthouse scores, remember that the blog pages are more than just content containers; they're your digital storefront's ambassadors, beckoning potential customers and signaling to search engines that you're a force to be reckoned with in the vast digital landscape.
When I set out to create zulzidan.com, I had to pick the right tools for the job. Enter GatsbyJS – my secret weapon for making the website not just look good but perform like a champion. Let's talk a bit about why choosing the right framework, like GatsbyJS, makes life so much easier compared to something like WordPress.
Think of GatsbyJS as the superhero toolkit for building websites. It's like having a magical box of tricks that simplifies the complicated task of creating a website.
Now, why is this important for everyone and why should developers care?
For Business Owners: Imagine you're setting up a storefront – your online one. GatsbyJS makes it easy, ensuring it's just as inviting as a physical store. You don't need to be a tech whiz to keep it looking sharp and up-to-date.
For Developers: It's like having a set of super-sharp tools. GatsbyJS allows developers to be more efficient and stand out in a crowded field. The code becomes cleaner and more organized, making their job smoother.
For Everyone: GatsbyJS creates web pages that load super fast. Imagine flipping through a book – each page is ready to go before you even turn it. That's how GatsbyJS works. Faster loading times mean happier visitors to your website.
Behind the Scenes: WordPress, on the other hand, sometimes takes a bit longer to load pages. It's like waiting for a slow elevator – not the best experience.
For Business Owners: Managing content becomes a breeze. You can update and tweak things without getting into the technical nitty-gritty.
For Developers: It integrates smoothly with modern practices, making their lives easier. No messy code, just straightforward development.
So, when I had to make sure zulzidan.com not only looked good but performed at its best, GatsbyJS was the hero we needed. It's like having a reliable friend who makes things simpler and more efficient.
Lighthouse warnings became our treasure map, leading us to the hero or featured image. While some might consider omitting it, we found a way to keep the aesthetics alive. Business owners, it's about the visual appeal that draws in customers. Developers, it's about innovation to solve real-world challenges. Enter the magic button – a solution that not only fixed the Lighthouse warning but maintained the visual charm of our blog pages.
Checked Google Lighthouse reports and noticed warnings linked to our blog page's featured image.
Introduced the magic button – a user-friendly feature that lets visitors control when the featured image appears.
```
<div className={`mb-4 w-full justify-center items-center flex${!showImage ? 'md:w-1/2 ' : 'w-full'}`}>
{showImage ? null : <Button variant="outline" onClick={() => setShowImage(true)} className="w-full">Show Image</Button>}
<Suspense fallback={<div>Loading...</div>}>
{showImage && image && <GatsbyImage image={image} alt={featuredMedia.title} />}
</Suspense>
</div>
```
How It Worked:
The magic button ensures a swift page load by default, hiding the image. Click the button, and voila – the image appears, balancing aesthetics and performance.
Thoroughly tested to ensure it works seamlessly across devices and browsers, and validated the fix by re-running Google Lighthouse tests.
In short, we saw a warning, introduced the magic button, and now our blog pages not only look great but also load faster.
Our next move was to decode the webpack bundle puzzle. Business owners, think of it as streamlining your inventory for better efficiency. Developers, it's about dissecting the code landscape. The discovery? The blog template was a heavyweight. Time to trim it down.
In our quest for an optimized digital realm, we didn't stop at mere code refactoring. Additional enhancements were made to elevate the user experience and code efficiency further.
Firstly, we bid farewell to the once-beloved `react-syntax-highlighter`. While it added vibrancy to our code, it also added unnecessary weight to our bundle. This departure paved the way for a more nimble and responsive application.
Next on the optimization journey was the removal of `react-copy-to-clipboard`. This library served us well in clipboard magic, but its presence weighed down our codebase. By streamlining this functionality, we achieved a more efficient and lightweight solution.
The animated charm of `framer-motion` also gracefully exited the stage. While delightful, its trade-off for a lighter bundle was deemed necessary. Developers, optimizing means making strategic choices, and this departure lightened our code's load.
And that's not all. In a move towards a sleeker and more performant application, we made strategic choices regarding icon libraries. We bid adieu to the likes of Font Awesome (`react-icons/fa`) and Ant Design (`react-icons/ai`). Instead, we embraced a more efficient approach by opting for inline SVGs or Lucide React Icons.
So, business owners, envision this as not just a code cleanup but a holistic optimization journey – like refining the layout of your physical storefront. Developers, relish in the art of crafting efficient code, where each snippet contributes to a sleeker, more agile application. The result? A leaner, meaner bundle size, ensuring a delightful digital experience for all.
```
// Before
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
// After
// Removal of react-syntax-highlighter for a lighter bundle
// Before
import { CopyToClipboard } from 'react-copy-to-clipboard';
// After
// Removal of react-copy-to-clipboard for a more streamlined codebase
// Before
import { motion } from "framer-motion";
// After
// Removal of framer-motion for a lighter and more efficient application
```
The journey threw some challenges our way – syntax errors and font troubles. Business owners, it's like fixing a display window to showcase your best products. Developers, it's about troubleshooting and refining. Our secret sauce? Ditching custom fonts for text elements, a move that played a pivotal role in achieving that elusive green Lighthouse score.
I just use to the section of the blog post ``` font-sans``` if you are using tailwind css
This journey isn't just about getting a green light; it's about making your website a performance powerhouse. Business owners, envision a bustling store with satisfied customers. Developers, imagine your code running seamlessly in the digital realm. By sharing these experiences, we're not just telling a story – we're inviting you to be part of the narrative.
Business owners, as you seek experts to enhance your online presence, remember that it's not just about a green light; it's about a stellar performance. Developers, wear your optimization badges proudly. Let's keep the digital world thriving.
To high-performance websites and coding adventures,