DEV Community: Divyang Bhadani

How to Improve Website Performance as a Developer

Divyang Bhadani — Tue, 29 Sep 2026 06:02:45 +0000

A website can have great design and functionality, but if it loads slowly, users may leave before they even see what you've built.

As developers, performance should be part of our development process—not something we think about only after users complain.

In this article, let's look at some practical ways to improve website performance.

Optimize Images Images are often one of the biggest contributors to page size.

Instead of uploading large JPEG or PNG files, consider modern formats like WebP or AVIF.

Also, don't serve a 2000px image if it's displayed at 500px.

<img
src="hero.webp"
width="800"
height="500"
loading="lazy"
alt="Website hero image"

For images below the fold, loading="lazy" can prevent them from being downloaded until they're needed.

For responsive websites, use srcset to serve different image sizes to different devices.

Reduce JavaScript JavaScript is powerful, but sending too much JavaScript to the browser can slow down both loading and interaction.

Ask yourself:

Do I really need this library?

Remove unused dependencies and JavaScript code whenever possible.

For larger applications, use code splitting and dynamic imports:

const loadDashboard = async () => {
const dashboard = await import("./dashboard.js");

dashboard.initialize();
};

Now the dashboard code can be loaded only when it's actually needed.

Optimize CSS Large CSS files can also affect performance.

Try to:

Remove unused CSS

Minify production CSS

Avoid unnecessary styles

Load only the styles required by your application

If you're using a CSS framework, make sure your production build isn't shipping a huge amount of unused styles.

Use Browser Caching Why download the same CSS, JavaScript, or image every time a user visits your website?

Browser caching allows frequently used resources to be stored locally.

For example, static assets can be cached with appropriate HTTP cache headers.

Using versioned filenames such as:

app.abc123.js

also helps you safely cache assets for longer periods while still allowing new versions to be downloaded when the filename changes.

Optimize API Requests Frontend performance isn't only about HTML, CSS, and JavaScript.

Slow APIs can make your entire application feel slow.

Avoid fetching unnecessary data.

Instead of:

GET /api/products

returning thousands of products, use pagination:

GET /api/products?page=1&limit=20

You can also improve API performance with:

Caching

Smaller response payloads

Request batching

Pagination

Server-side filtering

Send the browser only the data it actually needs.

Optimize Database Queries A slow database query can become a slow website.

Avoid unnecessarily fetching everything:

SELECT *
FROM users;

If you only need a few fields:

SELECT id, name, email
FROM users;

Also look for:

Missing indexes

N+1 queries

Unnecessary joins

Repeated database queries

Large result sets

Use your database's query-analysis tools to find actual bottlenecks instead of guessing.

Use a CDN A CDN can serve static resources from servers geographically closer to your users.

Instead of:

User → Origin Server

you can have:

User → CDN → Origin Server

CDNs are particularly useful for:

Images

JavaScript

CSS

Fonts

Other static assets

This can reduce latency, especially for users who are far away from your main server.

Watch Your Core Web Vitals Don't measure performance only by asking, "How many seconds does my website take to load?"

Also pay attention to Core Web Vitals, including:

LCP — Largest Contentful Paint
How quickly the main content becomes visible.

INP — Interaction to Next Paint
How responsive the page is when users interact with it.

CLS — Cumulative Layout Shift
How much the page unexpectedly moves while loading.

For example, always provide dimensions for images:

<img
src="product.webp"
width="600"
height="400"
alt="Product"

This helps the browser reserve space before the image loads.

Don't Forget Third-Party Scripts Analytics, chat widgets, advertisements, social media embeds, and tracking scripts can all affect performance.

Before adding a third-party script, ask:

Is the functionality worth the performance cost?

Load non-critical scripts as late as practical and regularly check how much time they add to your page.

Measure Before You Optimize One of the biggest mistakes developers make is optimizing based on assumptions.

Don't just think:

"This code looks slow."

Measure it.

Useful tools include:

Chrome DevTools

Lighthouse

PageSpeed Insights

Network panel

Performance panel

JavaScript profilers

Check your performance before making a change and then measure again afterward.

A Simple Performance Checklist
Before deploying your website, check:

✅ Optimize images

✅ Remove unused JavaScript and CSS

✅ Lazy load non-critical resources

✅ Minimize API payloads

✅ Optimize database queries

✅ Enable browser caching

✅ Consider using a CDN

✅ Compress responses

✅ Monitor Core Web Vitals

✅ Test on mobile and slower networks

Final Thoughts
Website performance isn't about making everything as small as possible.

It's about delivering the right resources at the right time.

Start by measuring your application, identify the biggest bottlenecks, make one improvement at a time, and measure again.

How to Choose the Right Shopify Theme for Your E-commerce Store

Divyang Bhadani — Wed, 23 Sep 2026 12:16:34 +0000

Choosing a Shopify theme isn't only about finding a design that looks good.

Your theme can affect performance, mobile experience, customization, and conversions.

Here are the main things to check before choosing one.

Check Performance

A beautiful theme isn't useful if it makes your store slow.

Look for:

Fast-loading pages
Optimized images
Lightweight code
Minimal unnecessary scripts

Think Mobile-First

Your theme should work smoothly on phones and tablets.

Check:

Navigation
Product pages
Buttons
Filters
Cart experience

Don't judge a theme only from its desktop preview.

Look for Customization

A good theme should let you customize the store without editing code for every small change.

Useful options include:

Drag-and-drop sections
Custom blocks
Flexible product layouts
Collection sections
Promotional banners

Consider E-commerce Features

Don't choose a theme based only on appearance.

Look for features that improve the shopping experience:

Sticky Add to Cart
Product filters
Quick product discovery
Cart drawer
Upsells
Product recommendations

For example, tools like Shoptimity provide reusable Shopify sections and widgets that can add these types of functionality without building everything from scratch.

Keep Future Growth in Mind

Your store may start with 20 products and eventually have hundreds.

Choose a theme that can handle:

More products → More collections → More customers

without requiring a complete redesign.

Final Thoughts

The right Shopify theme should balance design, performance, flexibility, and user experience.

Don't ask only:

“Does this theme look good?”

Also ask:

“Will this theme help me build a better store?”

How to Build a High-Converting Shopify Store Without Writing Tons of Custom Code

Divyang Bhadani — Tue, 22 Sep 2026 11:45:01 +0000

Building a Shopify store doesn't always mean writing hundreds of lines of Liquid, JavaScript, and CSS.

The goal is to create a store that is fast, mobile-friendly, easy to use, and focused on conversions.

Here are a few practical ways to do it.

Start With a Flexible Theme

Choose a theme with reusable sections and customization options.

This lets you create:

Custom homepage sections
Product layouts
Promotional banners
Collection sections
FAQs and testimonials

You can make changes from the Shopify editor instead of editing code every time.

Focus on Mobile

Most shoppers use mobile devices, so keep the experience simple.

Consider features like:

Sticky Add to Cart
Easy navigation
Mobile-friendly filters
Fast-loading images
Clear CTAs

Small UX improvements can make a big difference.

Make Products Easy to Find

For stores with many products, good product discovery is important.

Useful features include:

Search
Filters
Sorting
Related products
Product recommendations

Customers should be able to find what they want without unnecessary clicks.

Simplify the Cart Experience

A cart drawer can let customers review their products without leaving the current page.

Useful cart features include:

Quantity controls
Remove options
Upsells
Clear checkout CTA

Keep the journey simple:

Product → Cart → Checkout

Don't Build Everything From Scratch

Before writing custom code, check whether the functionality can be handled by Shopify, your theme, or an existing tool.

For example, Shoptimity provides reusable Shopify sections and widgets for features such as sticky Add to Cart, filters, cart timers, and upsells.

This can reduce repetitive development work while still giving merchants customization options.

Keep Performance in Mind

More features don't always mean a better store.

Always watch:

Image sizes
JavaScript
Third-party apps
Animations
Page loading time

Only add features that actually improve the shopping experience.

Final Thoughts

You don't need a huge amount of custom code to build a good Shopify store.

Use reusable components + Shopify's native features + targeted custom code.

The goal isn't to write more code.

It's to write the right code.