DEV Community: Bilal Burney

Core Web Vitals in 2026: How to Make Your Website Load Faster

Bilal Burney — Mon, 31 Aug 2026 13:16:10 +0000

Core Web Vitals sound like something only developers need to care about. They are not. They are Google's way of measuring whether your website feels good to use, and Google uses them to decide where you rank.

Here is the plain English breakdown of the three metrics that matter and how to optimize each one.

The Three Metrics Explained

1. Largest Contentful Paint (LCP)

Question: How long until the main content (hero image or heading) appears?
Target: Under 2.5 seconds.

2. Interaction to Next Paint (INP)

Question: When a visitor taps or clicks, how quickly does the page respond?
Target: Under 200 milliseconds.

3. Cumulative Layout Shift (CLS)

Question: Does the page jump around while loading images and banners?
Target: Under 0.1.

Why this matters for Google Rankings and Conversions

Google uses page experience as an official ranking factor. More importantly, research by Deloitte shows that cutting mobile load time by just 0.1s lifts retail conversion rates by up to 8%.

How to Fix Each Metric

Fixing LCP (Loading Speed):

Compress Images: Convert all images to WebP/AVIF.
Preload Hero Assets: Preload the first visible hero image rather than lazy loading it.
CDN Caching: Use edge caching so files load near the visitor.

Fixing INP (Responsiveness):

Defer Scripts: Use defer or async on third-party scripts.
Prune Bloat: Remove unused JavaScript libraries and old tracking pixels.
Break Up Long Tasks: Avoid heavy CPU-blocking calculations during initial render.

Fixing CLS (Visual Stability):

Explicit Dimensions: Always set width and height attributes on <img> and <video> tags.
Reserved Ad Slots: Reserve container space for dynamic banners.
Font Matching: Use font-display: swap with matched fallback font metrics.

Check your store's performance and explore more guides at bilalburney.com.

Shopify vs WooCommerce in 2026: Which One Should You Choose?

Bilal Burney — Mon, 31 Aug 2026 13:14:24 +0000

This is the question almost every new store owner asks, and the honest answer is that neither one is "best". They are built for different needs. Pick the wrong one and you will feel it every week. Pick the right one and the platform mostly gets out of your way.

I build on both, and I run a Shopify store that serves more than 2 million users. Here is the honest breakdown.

The one line version

Shopify is a managed product. You pay a monthly fee and it handles hosting, security, and updates so you can focus on selling. WooCommerce is a free plugin for WordPress. You get full control and lower software cost, but you are responsible for hosting, security, and keeping it all running.

Shopify vs WooCommerce at a glance

What matters	Shopify	WooCommerce
Setup	Easy, guided, no code	More technical, more parts
Hosting & security	Included and managed	Your responsibility
Cost	Predictable monthly fee	Spread out, easy to underestimate
Flexibility	High, within Shopify's rules	Very high, full control
Speed out of the box	Fast by default	Depends on your hosting
Scaling	Handled automatically	Becomes your responsibility
Best for	Brands focused on selling	Teams wanting 100% control

Cost, the honest breakdown

People say WooCommerce is free. The plugin is. The store is not.

Shopify costs are predictable: monthly plan, transaction fees, and selected apps. You know your monthly spend.
WooCommerce costs are spread out: hosting, themes, premium plugins, SSL, security, and regular developer maintenance. Cheap shared hosting makes WooCommerce slow, so a fast WooCommerce setup often costs more than expected.

Speed and performance

Shopify hosts your store on a fast global CDN by default, giving you a strong performance floor. However, unoptimized apps can still drag it down.

WooCommerce speed depends entirely on your server configuration, Redis caching, and plugin footprint. On dedicated hosting it can fly; on budget shared hosting with 30 plugins, it will crawl.

Scaling

Shopify is engineered to absorb huge traffic spikes during Black Friday or campaign launches without crashing.

WooCommerce can scale too, but high concurrency requires database optimization, caching layers, and server management.

Summary: Which one fits you?

Choose Shopify if: You want to focus on marketing and selling, value zero server maintenance, and want automatic scale.
Choose WooCommerce if: You need deep customization, want 100% data ownership, and have technical resources to maintain it.

Explore more technical comparisons and case studies at bilalburney.com.

Why Your Shopify Store Is Slow (And How to Fix It in 2026)

Bilal Burney — Mon, 31 Aug 2026 13:10:20 +0000

Open your store on your phone, on mobile data, not office WiFi. Count the seconds until you can actually tap a product. If it feels slow to you, it feels slow to the person who was about to buy.

I run the Shopify storefront for Zero Lifestyle, a wearable brand that serves more than 2 million users. When I started looking at one of our best selling product pages, the opal earbuds, it was sitting at a GTmetrix grade D. Largest Contentful Paint was 3.1 seconds. After the work I will describe below, that same page moved to grade A with an LCP of 1.4 seconds. Same product, same theme, same Shopify plan. The only thing that changed was the code.

So before you blame Shopify or your internet, let me walk you through what actually slows a Shopify store down.

First, why speed is not optional

Speed is not a vanity score. It is money.

Google's own research found that as page load time goes from 1 second to 3 seconds, the chance of a visitor leaving jumps by 32 percent. Deloitte's "Milliseconds Make Millions" study found that improving mobile load time by just 0.1 seconds lifted retail conversion rates by around 8 percent.

1. Too many apps loading on every page

This is the number one cause I find. Most store owners install an app, test it, and forget it. But the app does not forget. Most Shopify apps inject their own JavaScript and CSS into every single page, even pages where the app does nothing.

A review popup app loads on your checkout. An upsell app loads on your blog. Ten apps like this and your store is downloading code it never uses.

How to fix it: Go to your admin, look at your installed apps, and ask one honest question: "Did this make me money in the last 90 days?" If the answer is no, remove it. After you uninstall, check your theme for leftover snippets, because many apps leave scripts behind.

2. Product images that are far too big

On most ecommerce pages the images are the heaviest thing on the screen. I have seen stores where a single hero image was 4 MB.

Here is the simple rule: The image file should not be much bigger than the space it appears in. A photo shown in a 600 pixel wide box does not need to be 4000 pixels wide.

How to fix it:

Resize images to roughly the size they display at.
Serve modern formats like WebP instead of heavy JPEG and PNG (WebP is 25–35% smaller).
Add lazy loading to images below the fold.
Always set width and height on images so the layout does not jump.

3. JavaScript that blocks the page from showing

When a script loads in the <head> of your page without defer or async, the browser stops everything and waits for that script to finish before it shows any content.

This pushes Total Blocking Time up. On our product page, Total Blocking Time started at 973 milliseconds. After deferring scripts, it dropped to 44 milliseconds.

4. An old theme built on old patterns

If your theme is more than three or four years old, it may be built before Shopify's Online Store 2.0. Older themes build large amounts of HTML on the server and load full section files even when only a small part is needed.

5. Heavy Liquid doing too much work

Liquid runs on Shopify's servers before the page is sent to the shopper. If a section runs big loops over a large collection on every load, your server takes longer to respond (slow TTFB).

How to fix it: Keep heavy logic out of global layout files, and move complex filtering or client-side operations to the browser where appropriate.

A simple order to fix things

Remove unused apps and their leftover code.
Fix oversized images and add lazy loading.
Defer non-critical JavaScript.
Check your theme structure and asset hosting.
Trim heavy Liquid loops.

Read more e-commerce engineering guides at bilalburney.com.

How I Scaled Zero Lifestyle to 2M+ Users: A Shopify Developer's Case Study

Bilal Burney — Mon, 31 Aug 2026 13:07:39 +0000

Most case studies you read online are vague. They say things like "we improved performance" and "we drove growth" with no numbers behind them. This one has numbers, because I think you should be able to judge the work yourself.

I am the developer behind the Shopify storefront for Zero Lifestyle, one of the top wearable tech brands in Pakistan. The store serves more than 2 million users. I own the storefront end to end, which means theme architecture, performance, new features, and the automation that keeps the day to day running. Here is what that actually involved, the problems I hit, and the real before and after.

Where it started

A store that grows fast often grows messy. That is normal. Traffic climbs, the team adds apps to solve quick problems, sales sections get bolted on for each campaign, and nobody owns the overall health of the storefront.

When I looked closely, the symptoms were clear:

Key product pages were slow on mobile, which is where most of the traffic comes from.
The opal earbuds page, one of the best sellers, scored a GTmetrix grade D. Largest Contentful Paint was 3.1 seconds and Total Blocking Time was 973 milliseconds.
Several back office tasks were being done by hand every day, which ate time and caused mistakes.
There was no single person responsible for keeping the storefront fast and stable as it scaled.

The goal was simple to say and harder to do. Make it fast, make it stable, and take the manual work off people's plates, all without breaking a live store that thousands of people are using right now.

Step 1: I measured before I touched anything

The first rule of performance work is that you cannot improve what you have not measured. So before changing a single line, I recorded baselines for the pages that matter most: the homepage, the top product pages, and the collection pages.

I used GTmetrix and PageSpeed Insights, tested on mobile, and ran each page several times to get a real average rather than one lucky result. Those numbers became the scoreboard. Every change after that had to move the scoreboard or it did not ship.

Step 2: I cut the dead weight

The fastest wins in Shopify are almost always about removing things, not adding them.

I audited every installed app and asked the same question for each one: is this earning its place? Apps that were not used got removed. For apps that stayed, I checked whether their scripts were loading on every page or only where they were needed, and moved them so they only loaded where they mattered.

Then I went into the theme and cleaned out leftover code from apps that had been uninstalled long ago but left scripts behind. This is more common than people think, and it is free speed once you find it.

Step 3: I fixed the heavy parts of the page

With the clutter gone, I went after the big files.

Images. Product images were resized to sensible dimensions and served in modern WebP format. Below the fold images were set to lazy load. Every image got width and height so the layout stops jumping while it loads.
Scripts. Anything that did not need to run before the page appeared was deferred. This is what crushed the blocking time.
Critical rendering path. I made sure the things needed to show the top of the page load first, and everything else waits its turn.

Step 4: I tuned the theme and Liquid

This is the part that needs real Shopify knowledge. I went through the theme architecture, reduced render blocking assets, and trimmed heavy Liquid that was doing more work than it needed on every page load. Less server work means a faster Time to First Byte, which sets the tone for everything that follows.

The results, with real numbers

Here is the before and after for the opal earbuds product page. Same URL, same test conditions, only the optimisation work changed.

Metric	Before	After
GTmetrix Grade	D	A
Performance Score	53%	95%
Largest Contentful Paint	3.1s	1.4s
Total Blocking Time	973ms	44ms

The storefront homepage now sits at a GTmetrix grade A as well, with a 100 percent performance score, a 582 millisecond LCP, and 14 milliseconds of Total Blocking Time, all while serving a base of 2 million plus users.

A page that loads in 1.4 seconds instead of 3.1 seconds is not a small tweak. Deloitte's research found that a 0.1 second improvement in mobile load time can lift retail conversion by around 8 percent. We moved the needle by 1.7 seconds.

The part nobody sees: automation

Speed gets the attention, but the automation work saved the team the most hours. Several tasks that people used to do by hand every day were rebuilt as automated pipelines. That meant fewer mistakes, faster turnaround, and people freed up to do work that actually needs a human.

This is the difference between a developer who only builds and one who has run a store at scale. You start to see the operational pain, not just the code.

What I would tell another growing brand

Test on mobile and on product pages. Your homepage score can look fine while the page that actually sells is slow.
Removing beats adding. Most speed problems come from too much, not too little.
One owner. A storefront needs someone who is responsible for its health over time, not just one off fixes.
Measure everything. Numbers turn opinions into decisions.

If you run a D2C or fashion brand on Shopify and want to make your store faster, feel free to connect with me at bilalburney.com.
``

5 Shopify Performance Mistakes That Are Killing Your Conversion Rate

Bilal Burney — Tue, 23 Jun 2026 12:19:57 +0000

Most Shopify stores lose 30-50% of potential sales not because of bad products or poor marketing — but because of fixable technical issues that slow the store down or break trust at the last moment.

Here are 5 mistakes I see constantly when auditing Shopify stores:

1. Unoptimized Images Above the Fold

The single biggest LCP killer. A 2MB hero image adds 3-5 seconds to load time on mobile. Fix: convert to WebP, compress to under 200KB, and use Shopify's img_url filter with width parameter.

2. Too Many Shopify Apps

Every app you install injects JS into your storefront. 15 apps = 15 extra script loads. Audit your apps quarterly. If you're not actively using it, uninstall it. Use native Shopify features where possible.

3. No Liquid-Level Caching

Rendering the same data (metafields, metaobjects, product recommendations) on every page request wastes server time. Cache aggressively using {% cache %} blocks and section rendering.

4. Checkout Trust Gap

Customers abandon checkout when they don't see trust signals at the moment they're entering card details. Add security badges, visible return policy, and a support contact link directly in the checkout header.

5. Not Using Shopify Markets for International Traffic

If you're getting traffic from multiple countries but not using Markets, you're showing prices in the wrong currency and missing localization opportunities. Markets setup takes 30 minutes and can increase international conversion by 20-40%.

If you're a brand struggling with any of these, I help Shopify stores fix performance and conversion issues. You can see my work at bilalburney.com.

Drop your questions in the comments — happy to help!