DEV Community: Sir WQS

How I Made My Client's Website Load in 1.5 Seconds on Slow 4G in Pakistan - A Real Performance Case Study

Sir WQS — Wed, 23 Sep 2026 02:09:00 +0000

Introduction

When I started as a frontend developer in Faisalabad, I thought a fast website only means small images. I would compress images on TinyPNG and think my work is done. My website would still load in 6 or 7 seconds on my own Infinix mobile phone with Jazz 4G. I did not know what else to do.

Last month I got a project from a small clothing store owner in my city. He had a Shopify style store made in plain HTML CSS and JavaScript. He told me Waqas bhai my customers are leaving because website is too slow. I checked his website on my phone and he was right. It took almost 8 seconds to load fully. On slow internet it was taking more than 12 seconds. He was losing sales every day.

I decided to fix it. I did not use any paid tool. I used only free Chrome tools and modern CSS and JavaScript techniques. After two days of work, I made his website load in just 1.5 seconds on the same slow 4G connection. His Google PageSpeed score went from 34 to 97. And his sales increased by 40 percent in one week.

In this article I will share exactly what I did step by step. This is not theory from a book. This is from my real client work in Pakistan where internet is slow and every second counts.

Problem Number One - The Website Was Loading Everything at Once

The first problem I found was that the website was loading all images at once. The homepage had 25 product images. Each image was around 500 kilobytes. So total 12 megabytes of images were loading on page load, even though user could only see first 4 images at the top.

This is a very common mistake. Most junior developers load all images together. This kills performance on mobile.

The solution is lazy loading. Lazy loading means load only those images which are visible on screen now. Load other images later when user scrolls down.

I used native lazy loading which is very simple. I just added loading equals lazy attribute to all images below the fold.

Before my code was like this
img src http://product1.jpg

After I changed it to
img src http://product1.jpg loading lazy

For background images and for more control I also used Intersection Observer API in JavaScript. This API watches when an image comes near the screen and then it loads it.

Here is the code I used for background images

const lazyBackgrounds = http://document.querySelectorAll .lazy-bg
const observer = new IntersectionObserver entries => {
http://entries.forEach entry => {
if http://entry.isIntersecting {
http://entry.target.style.backgroundImage = http://entry.target.dataset.bg
http://observer.unobserve http://entry.target
}
}
}
http://lazyBackgrounds.forEach bg => http://observer.observe bg

With this one change my initial page load went from 12 megabytes to only 1.2 megabytes. That is 90 percent saving. The website started loading in 4 seconds instead of 8 seconds. Half problem was solved.

Problem Number Two - Big JavaScript and CSS Files Were Blocking the Page

The second problem was render blocking resources. The website had one big CSS file of 400 kilobytes and one big JavaScript file of 600 kilobytes. The browser was waiting to download and read these full files before showing anything on screen. So user was seeing blank white screen for 3 to 4 seconds.

I learned about critical CSS. Critical CSS means the CSS which is needed for the top part of the website that user sees first. Only that small CSS should load first. Rest of CSS should load later.

I opened my website, inspected the hero section and header, and copied only that CSS which is needed for that part. I put that critical CSS inside style tag in the head. And I made my main CSS file load later with media print trick.

Here is what I did

In head I added
style
header hero styles only around 10kb
style

And for main CSS file I changed from
link rel stylesheet href http://style.css

To this modern way
link rel preload href http://style.css as style
link rel stylesheet href http://style.css media print onload http://this.media equals all

This media print trick tells browser this CSS is for printing so do not block rendering. And when it loads, onload changes it to all media.

For JavaScript I did same. I added defer attribute to all non important scripts.

script src http://app.js defer script

Defer means download the JavaScript in background but run it only after HTML is fully loaded. So it never blocks the page.

I also removed unused JavaScript. The client had added a full slider library of 200 kilobytes just for one small image slider. I replaced that library with only 20 lines of pure JavaScript slider.

After these changes my PageSpeed Insights blocking time went from 1800 milliseconds to only 90 milliseconds. Now the website was showing content in less than 1 second.

Problem Number Three - Fonts and Third Party Scripts Were Killing Speed

The third and most hidden problem was Google Fonts and Facebook Pixel and WhatsApp chat widget. These third party scripts were adding more than 2 seconds of extra load time.

I was using 3 Google Fonts, Poppins with 6 different weights. Each weight was a separate file of around 20 kilobytes. So fonts alone were 120 kilobytes.

I fixed fonts with two steps.

First I reduced font weights. I was using 300 400 500 600 700 800. But in design I only needed 400 and 700. So I removed 4 extra weights. That saved 80 kilobytes.

Second I used font-display swap and I hosted fonts locally instead of calling Google servers every time. I downloaded the font files and put them in my own hosting with preload.

link rel preload href fonts/poppins-400.woff2 as font type font/woff2 crossorigin

And in CSS I added font-display swap

@font-face {
font-family Poppins
src url http://pons-400.woff2 format woff2
font-weight 400
font-display swap
}

Font-display swap tells browser show system font immediately and swap to custom font when ready. So user never sees blank text.

Then I fixed third party scripts. The client had Facebook Pixel, Google Analytics, and a WhatsApp chat widget. All three were loading at the same time on page load. I delayed them with setTimeout.

I loaded them only after user interacts or after 3 seconds.

setTimeout () => {
loadFacebookPixel
loadWhatsAppWidget
}, 3000

And I also added event listener for first scroll

http://window.addEventListener scroll loadThirdPartyScripts once true

This means if user scrolls, then load those scripts immediately. So important scripts still load but they do not block initial page.

After fixing fonts and third party scripts my total load time went from 4 seconds to 1.5 seconds on my Infinix phone with Jazz 4G.

Conclusion and My Performance Checklist for Slow Internet

After all these three fixes my client's website went from 8 seconds to 1.5 seconds. Google PageSpeed mobile score went from 34 to 97. The client called me and said Waqas bhai now my customers are not complaining. His online orders increased.

What did I learn? I learned that performance is not about one big trick. It is about many small smart tricks.

Now for every new project I follow this checklist.

First I always use lazy loading for all images and videos below the fold. I never load all images at once.

Second I extract critical CSS and put it inline in head and I defer all non critical CSS and JavaScript.

Third I reduce font weights and I preload fonts and I use font-display swap. And I delay all third party scripts like Facebook Pixel by 3 seconds or on first user interaction.

Fourth I compress all images to WebP format which is 30 percent smaller than JPG and I use proper width and height attributes.

Fifth I test my website not on fast WiFi but on real slow 4G with Chrome DevTools throttling set to Slow 4G. Because in Pakistan India and many Asian countries most users are on slow mobile internet. If it works on slow 4G it will work everywhere.

If you are a developer and your website is slow, please try these three steps. I am sure you will see same results as me.

Thank you for reading my case study. I hope this helps you make your websites faster for your clients.

How I Fixed My Website Layout Breaking on Mobile with Modern CSS

Sir WQS — Tue, 22 Sep 2026 08:26:06 +0000

HHow I Fixed My Mobile Website Layout Problem With Simple CSS - My Real Story`

Hello friends. I am Waqas from Kabirwala. I am a frontend developer. I am learning web development from last one year. I want to share my real story with you today. This story is about how my website was breaking on mobile and how I fixed it.

Last month I was making a website for my client. The website was a simple landing page. I made it on my laptop. On laptop it was looking very good. All sections were perfect. Images were good. Buttons were good. I was very happy. I thought my work is finished.

But then I checked the website on my mobile phone. When I opened it on mobile, I was shocked. The website was fully broken. There was horizontal scroll. The text was going out of screen. Images were very big and going out. The 3 boxes which I made in one row were still in one row on mobile and they were very small. My client called me and said Waqas, what is this? Your website is not working on my mobile. I was very tense. Because in Pakistan most people use mobile to open website. If website is not working on mobile then no benefit.

I did not sleep that night. I started searching on Google and YouTube. I watched many videos. I read many articles. First I tried old method with many media queries. I wrote @media max-width 768px and then 480px. But my code became very big and still layout was breaking. I was more confused.

Then after 2 days I found some modern CSS tricks. These tricks are very simple but very powerful. With only 4-5 lines my all problems were fixed. Today I will tell you all those tricks in simple words. If you are beginner like me, this will help you a lot.

My First Mistake - Fixed Width

My first mistake was fixed width. I was using width 1000px for container. I was thinking 1000px is good for laptop. But I forgot about mobile. Mobile screen is only 360px. So if I give 1000px width, then on mobile it will go out. This is the main reason for horizontal scroll.

Bad code that I was using:
.container {
width: 1000px;
}

This code breaks on mobile. Always.

Then I learned good code. The good code is:
.container {
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding-left: 16px;
padding-right: 16px;
}

Now let me explain this in simple words. Width 100% means on mobile it will take 100% of mobile screen. So no scroll. Max-width 1000px means on laptop it will not go more than 1000px. It will be max 1000px. Margin 0 auto means it will stay in center on laptop. Padding left and right 16px means on mobile content will not touch the edge. There will be small space. This is very good.

After I changed all my fixed widths to this, my 50% problems were solved. I was very happy. This is very first step for every beginner. Never use fixed width alone. Always use 100% + max-width.

I Forgot Viewport Tag

Second mistake was very small but very big. I forgot viewport meta tag in HTML. This tag is very important. Without this tag, mobile browser thinks website is for desktop only. So it zooms out and shows desktop version on mobile. That is why layout breaks.

We must add this tag in head section of HTML:

This one line tells mobile browser that this website is responsive. Please show it according to device width. I forgot this in my first project. I was finding bug for 2 days. Then my friend told me about this tag. So please always add this tag. It is must.

My Images Were Breaking Layout

Third problem was images. I was adding images without any CSS. My image size was 1200px wide. On laptop it was okay. But on mobile screen 360px, a 1200px image will definitely go out. It will break layout.

Old way I was giving width to each image separately. It was taking time.

New modern way is to add one global rule for all images, videos and iframes:
img, video, iframe {
max-width: 100%;
height: auto;
display: block;
}

What is this? Max-width 100% means image will never be bigger than its parent container. If parent is 300px on mobile, image will be 300px. If parent is 1000px on laptop, image will be 1000px. It will never go out. Height auto means image ratio will stay correct. Image will not stretch. Display block removes small gap under image.

I added this one rule at top of my CSS and all my images became responsive automatically. No more breaking. This saved my lot of time.

Text Size Problem on Mobile

Fourth problem was text size. I was using same font size for mobile and desktop. Like h1 font-size 48px. On laptop 48px looks good and big. But on mobile 48px is too big. It takes 3 lines and looks bad. Also it breaks layout.

Old way we used media queries for font size. Like for desktop 48px, for tablet 32px, for mobile 24px. We had to write many media queries.

Modern way is clamp(). Clamp is very amazing function. I love it. Clamp takes 3 values. Minimum value, preferred value, maximum value.

Example:
h1 {
font-size: clamp(24px, 5vw, 48px);
}

Let me explain in simple words. 24px is minimum size. Even on smallest mobile, heading will not go smaller than 24px. 48px is maximum size. Even on biggest desktop, heading will not go bigger than 48px. 5vw is preferred size. 5vw means 5% of viewport width. So it grows with screen size. On mobile it will be near 24px, on tablet near 36px, on desktop near 48px. Automatic.

I now use clamp for everything. Not only for font size but also for padding and gap.

Example for paragraph:
p {
font-size: clamp(16px, 2.5vw, 18px);
line-height: 1.6;
}

Example for section padding:
section {
padding: clamp(20px, 5vw, 80px);
}

On mobile padding 20px, on desktop padding 80px. Automatic. No media query needed. This is modern CSS power.

My 3 Boxes Problem - Flex and Grid

I had 3 service boxes. I wanted to show 3 boxes in one row on laptop, 2 boxes in one row on tablet, and 1 box in one row on mobile. I was using display flex.

My old code:
.cards {
display: flex;
gap: 20px;
}
.card {
width: 300px;
}

Problem was flex by default does not wrap. So on mobile, 3 boxes were still trying to stay in one row. They were squeezed and looking bad and going out.

First fix I learned is flex-wrap:
.cards {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.card {
flex: 1 1 280px;
}

Flex-wrap wrap means if no space, boxes will go to next line. Flex 1 1 280px means minimum width 280px, but can grow if space available. This fixed some problem.

But better fix is CSS Grid with auto-fit. This is best solution I found. One line does everything:

.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}

This line is magic. Let me explain simple. Repeat means repeat columns. Auto-fit means automatically fit how many boxes can fit in screen. Minmax 280px means each box minimum 280px. 1fr means take equal free space.

So on mobile screen 360px wide, only 1 box can fit because 280px minimum. So it shows 1 box per row. On tablet 700px wide, 2 boxes can fit, so 2 per row. On laptop 1200px wide, 4 boxes can fit, so 4 per row. All automatic. No media query at all. I was very surprised when I first used it.

Now I always use this grid trick for all card layouts, product layouts, gallery layouts.

Modern Units - dvh*

Another thing I learned is modern units. For hero section I wanted full screen height. I used height 100vh. But on mobile 100vh has problem. Because mobile browser has address bar at top and bottom. When you scroll, address bar hides and shows, so 100vh changes and layout jumps.

Modern unit is dvh. Dvh means dynamic viewport height. It adjusts with mobile browser address bar.

.hero {
min-height: 100dvh;
display: grid;
place-items: center;

Place-items center is also modern trick. It centers everything both horizontally and vertically with one line. No need for display flex. justify-content center, align-items center 3 lines.

My Final Code That I Use in Every Project*

After learning all these tricks, I made a small boilerplate code. I now paste this code at start of every project. It fixes 90% mobile problems.

{ box-sizing: border-box; margin: 0; padding: 0; }

img, video, iframe {
max-width: 100%;
height: auto;
display: block;
}

body {
font-family: system-ui, sans-serif;
line-height: 1.6;
overflow-x: hidden;
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding-left: 16px;
padding-right: 16px

.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: clamp(16px, 3vw, 32px,
h1
font-size: clamp(28px, 5vw, 56px

h2 {
font-size: clamp(22px, 4vw, 36px

p {
font-size: clamp(16px, 2.5vw, 18
section.
padding-top: clamp40px, 8vw, 100px
padding-bottom: clamp40px, 8vw, 100px
I use this and my website never breaks on mobile now.

How I Test on Mobile

I test my website with 3 ways. First way is Chrome DevTools. I press F12 on laptop, then click mobile icon. There I can see how website looks on different mobiles like iPhone, Samsung, iPad. Second way is I resize my browser window from big to small manually and see if horizontal scroll comes. If no scroll, then good. Third way is I test on real mobile phones. I send link to my brother and friends and ask them to check on their phones.

If website works on all 3 tests, then it is responsive.

Final Words

Friends, earlier I thought responsive design is very difficult and needs many media queries and big code. But with modern CSS like max-width, clamp, auto-fit grid, dvh, we can make responsive website with very small code and no media queries.

My advice for all beginners from small cities like me: Do not use fixed width, always use max-width with 100%. Always make images responsive with max-width 100%. Use clamp for font size. Use auto-fit grid for cards. And never forget viewport meta tag.

I hope my real story and these simple tricks will help you. I am still learning. If you have any question, you can comment below. I will try to help you.

Thank you for reading my 2000 words article.

Written by Waqas, Frontend Developer from Kabirwala, Pakistan. I make simple and clean websites for local businesses.ow I Fixed My Mobile Website Layout Problem With Simple CSS - My Real Story`