DEV Community: Rahil Khan

Your Site Is Probably Missing a Real 404 Page (and It's Costing You Visitors)

Rahil Khan — Fri, 30 Oct 2026 08:29:04 +0000

Old links never fully die. Someone bookmarks a page, a blog links to an old URL, you rename a service page, and suddenly people land on a blank "Not Found" screen and leave.

A proper 404 page takes ten minutes and keeps those visitors.

What a good 404 page includes

A plain sentence saying the page moved or doesn't exist (no jokes that hide the meaning).
Links to your top 3–5 pages: home, services, pricing, contact.
A search box if your site has more than a handful of pages.
Your normal header and footer, so it still looks like your site.

Make sure it really returns 404

A common mistake is a "not found" page that returns HTTP 200. Google then treats it as a real page ("soft 404"). Check it:

curl -s -o /dev/null -w "%{http_code}\n" https://yoursite.com/this-page-does-not-exist

You want to see 404.

Where to set it

Netlify / Vercel / Cloudflare Pages: add a 404.html at the site root.
Apache: ErrorDocument 404 /404.html in .htaccess.
Nginx: error_page 404 /404.html;
WordPress: most themes ship a 404.php; edit it to add your key links.

Bonus: fix the links that cause 404s

When you rename a page, add a 301 redirect from the old URL to the new one. Then check Google Search Console's "Not found (404)" report once a month for old URLs that still get traffic.

NEXCOD builds and fixes small business websites. https://nexcod.vercel.app

Your contact form emails might be landing in spam. Check SPF, DKIM and DMARC in 10 minutes

Rahil Khan — Sun, 25 Oct 2026 08:34:33 +0000

A common small-business problem: the website contact form "works", but the owner never sees the messages. Often the form is sending mail that claims to come from your domain without your domain saying it's allowed to, so Gmail and Outlook quietly file it as spam.

Three DNS records fix most of this.

1. SPF: say which servers may send for your domain

One TXT record on your root domain listing your senders, for example Google Workspace plus a form service:

v=spf1 include:_spf.google.com include:sendgrid.net ~all

Only one SPF record per domain. If you already have one, add the new include: to it instead of creating a second.

2. DKIM: sign the mail

Your email provider or form service gives you a DKIM record (usually a TXT or CNAME at something like google._domainkey). Add it exactly as shown, then turn signing on in their dashboard.

3. DMARC: tell inboxes what to do with failures

Start in monitor mode so nothing breaks:

_dmarc.yourdomain.com  TXT  "v=DMARC1; p=none; rua=mailto:you@yourdomain.com"

After a couple of weeks of clean reports, move to p=quarantine.

Two form-specific checks

Send the form from an address on your own domain (like forms@yourdomain.com) that your SPF/DKIM covers, not from the visitor's email address. Put the visitor's address in Reply-To instead.
Submit a test and open the received email's "Show original" in Gmail. You want SPF: PASS, DKIM: PASS and DMARC: PASS.

Quick test from the terminal

dig +short TXT yourdomain.com
dig +short TXT _dmarc.yourdomain.com

If the first shows no v=spf1 line or the second is empty, that's your starting point.

Ten minutes of DNS work can be the difference between a form that brings in clients and one that silently loses them.

From NEXCOD, a small web studio that fixes and builds websites for small businesses: https://nexcod.vercel.app

Your Google Maps and YouTube embeds are slowing your homepage. Load them on click instead

Rahil Khan — Sat, 24 Oct 2026 08:30:49 +0000

A lot of small-business homepages embed a Google Map in the footer and a YouTube video in the middle. Each embed is an iframe that pulls in its own scripts, fonts and images, often more than the rest of the page combined, and it loads even for visitors who never scroll that far.

Two easy fixes, from least to most effort:

1. Lazy-load the iframe

Browsers support native lazy loading on iframes. Add one attribute and the embed waits until the visitor scrolls near it:

<iframe src="https://www.google.com/maps/embed?pb=..."
        width="600" height="400"
        loading="lazy"
        title="Map to our shop"
        style="border:0"></iframe>

Keep the width/height so the layout doesn't jump when it loads, and add a title for screen readers.

2. Show a placeholder and load the real embed on click

For YouTube, show the thumbnail with a play button and only swap in the iframe when someone taps it:

<button class="yt" data-id="VIDEO_ID" aria-label="Play video">
  <img src="https://i.ytimg.com/vi/VIDEO_ID/hqdefault.jpg"
       alt="" width="480" height="360" loading="lazy">
</button>
<script>
document.querySelectorAll('.yt').forEach(b => b.addEventListener('click', () => {
  const f = document.createElement('iframe');
  f.src = `https://www.youtube-nocookie.com/embed/${b.dataset.id}?autoplay=1`;
  f.width = 480; f.height = 360; f.allow = 'autoplay; encrypted-media';
  f.title = 'Video'; f.allowFullscreen = true;
  b.replaceWith(f);
}));
</script>

For the map, a static screenshot of your location linked to https://maps.google.com/?q=Your+Business+Name often does the job just as well, and it opens the Maps app directly on phones.

How to check the difference

Run your homepage through PageSpeed Insights before and after. On sites with both embeds above the fold, the "Reduce unused JavaScript" warning usually shrinks a lot and the page becomes usable sooner on mobile.

NEXCOD builds and fixes fast websites for small businesses: https://nexcod.vercel.app · WhatsApp +1 289 902 5119

Is your website accidentally hidden from Google? Check noindex and robots.txt in 5 minutes

Rahil Khan — Fri, 23 Oct 2026 08:32:38 +0000

Your new website might be invisible to Google, and nothing on the page will tell you. The two most common reasons are a "noindex" tag left over from the build and a robots.txt that blocks the whole site. Both are often switched on while a site is being built and then forgotten at launch.

1. Check for a leftover noindex tag

Open your homepage, press Ctrl+U (View Source) and search for noindex. If you find this, Google is being told not to list the page:

<meta name="robots" content="noindex, nofollow">

On WordPress, go to Settings → Reading and make sure "Discourage search engines from indexing this site" is unticked. Many builders and staging tools tick it by default.

2. Check robots.txt

Visit yourdomain.com/robots.txt. This blocks everything:

User-agent: *
Disallow: /

A normal small-business site usually needs only this:

User-agent: *
Disallow:
Sitemap: https://yourdomain.com/sitemap.xml

3. Check the server header too

Some hosts add the noindex as an HTTP header instead of a tag:

curl -sI https://yourdomain.com | grep -i x-robots-tag

If that prints noindex, fix it in the host or server config.

4. Confirm with Google

In Google Search Console, paste your homepage URL into URL Inspection. It tells you whether the page is indexed and, if not, why. After fixing, click "Request indexing".

Five minutes of checking can be the difference between a site that brings enquiries and one nobody can find.

NEXCOD builds and fixes fast, mobile-first websites for small businesses. nexcod.vercel.app · WhatsApp +1 289 902 5119

Make your contact form 2x faster to fill on phones: autocomplete and inputmode in 10 minutes

Rahil Khan — Thu, 22 Oct 2026 08:33:20 +0000

Most small-business contact and booking forms are filled in on phones. Two tiny HTML attributes decide whether that takes 10 seconds or a minute of fiddly typing: autocomplete and inputmode. Most themes leave both out.

1. Let the browser fill details for the visitor

Phones already know the visitor's name, email, phone number and address. Tell the browser which field is which, and it offers to fill them in one tap:

<input name="name"  autocomplete="name">
<input name="email" type="email" autocomplete="email">
<input name="phone" type="tel"   autocomplete="tel">
<input name="city"  autocomplete="address-level2">
<input name="zip"   autocomplete="postal-code" inputmode="numeric">

Avoid autocomplete="off" on contact fields. It doesn't make anything safer here; it only slows people down.

2. Show the right keyboard

type="tel" opens the number pad, type="email" adds the @ key. For numbers that aren't phone numbers (quantity, guests, PIN code), use inputmode="numeric" instead of type="number", which adds spinner arrows and can mangle leading zeros.

3. Label every field properly

<label for="phone">Phone (for a quick call back)</label>
<input id="phone" name="phone" type="tel" autocomplete="tel">

Placeholder text disappears as soon as someone types, so it's not a label. A real <label> also makes the tap target bigger.

4. Test it in 2 minutes

Open the form on your own phone and tap the first field. If the keyboard offers your saved name/email/phone, it works. If you have to type everything by hand, your visitors do too, and some give up.

Fewer abandoned forms means more enquiries from the same traffic, with zero extra ad spend.

NEXCOD builds and fixes fast, mobile-first websites for small businesses. nexcod.vercel.app · WhatsApp +1 289 902 5119

Your hero image is probably lazy-loaded (and that's slowing your homepage): a 10-minute LCP fix

Rahil Khan — Wed, 21 Oct 2026 08:31:26 +0000

On most small-business homepages, the slowest thing a visitor waits for is the big hero photo at the top. Google calls this the Largest Contentful Paint (LCP) element, and it's one of the Core Web Vitals. The common mistake: a theme or plugin adds loading="lazy" to every image, including the hero, so the browser deliberately waits before fetching the one image people see first.

Here's a 10-minute fix.

1. Find your LCP element

Open Chrome DevTools, go to Lighthouse, run a mobile report, and look for "Largest Contentful Paint element". On most local-business sites it's the hero image or a background image in the first section.

2. Never lazy-load it

<!-- Bad: the browser waits until layout to fetch it -->
<img src="/img/hero.webp" loading="lazy" alt="Our bakery counter">

<!-- Good: fetched immediately, with high priority -->
<img src="/img/hero.webp" fetchpriority="high" width="1200" height="700"
     alt="Our bakery counter">

Keep loading="lazy" for images further down the page. That's where it helps.

3. If the hero is a CSS background, preload it

The browser can't discover CSS background images until it has downloaded and parsed the stylesheet. Tell it early:

<link rel="preload" as="image" href="/img/hero.webp" fetchpriority="high">

4. Make the file small enough to matter

Priority doesn't help a 3 MB JPEG. Export the hero as WebP or AVIF at the width it's actually displayed (around 1200 to 1600px for desktop) and use srcset so phones get a smaller one:

<img src="/img/hero-1200.webp"
     srcset="/img/hero-640.webp 640w, /img/hero-1200.webp 1200w"
     sizes="100vw" fetchpriority="high" width="1200" height="700" alt="...">

5. Re-test

Run Lighthouse again. On the small-business sites we work on, these steps alone usually move LCP noticeably, without touching any other code.

Checklist

[ ] Hero image is not loading="lazy"
[ ] Hero has fetchpriority="high" (or a preload if it's a CSS background)
[ ] Hero is WebP/AVIF, sized to its display width, with srcset
[ ] Width and height set to avoid layout shift

If you'd rather have someone do it for you, NEXCOD builds and fixes fast websites for small businesses: nexcod.vercel.app or WhatsApp +1 289 902 5119.

Repeat visitors shouldn't re-download your logo: Cache-Control headers for small-business sites in 10 minutes

Rahil Khan — Tue, 20 Oct 2026 08:28:49 +0000

Every time someone opens your site a second time, their browser asks: "do I still have a good copy of this logo, this CSS, this font?" If your server never answers that question, the browser plays safe and downloads everything again. On a small-business site with a big hero photo and a couple of web fonts, that's often 1–3 MB per visit wasted, and it's the people on slow mobile data who feel it most.

The fix is one HTTP header: Cache-Control.

1. Check what you're sending now

Open your site, then DevTools → Network, reload, click your logo or main CSS file and look at Response Headers. Or from a terminal:

curl -sI https://yoursite.com/images/logo.png | grep -i -E "cache-control|expires|etag"

No Cache-Control at all, or max-age=0 on images and fonts, means repeat visitors re-download them.

2. The simple rule set

HTML pages: short or no cache, so content updates show up right away: Cache-Control: no-cache (the browser keeps a copy but checks with the server first).
Images, fonts, CSS, JS that change rarely: cache for a long time: Cache-Control: public, max-age=31536000, immutable only if the file name changes when the file changes (e.g. style.3f9a1c.css, which most build tools do for you).
Static files without versioned names (a plain logo.png you might replace): something moderate like max-age=604800 (7 days).

3. Copy-paste configs

Apache (.htaccess, common on shared hosting):

<IfModule mod_headers.c>
  <FilesMatch "\.(png|jpe?g|webp|svg|woff2|ico)$">
    Header set Cache-Control "public, max-age=604800"
  </FilesMatch>
  <FilesMatch "\.(html)$">
    Header set Cache-Control "no-cache"
  </FilesMatch>
</IfModule>

Nginx:

location ~* \.(png|jpe?g|webp|svg|woff2|ico)$ {
  add_header Cache-Control "public, max-age=604800";
}

Netlify (_headers file in your publish folder):

/images/*
  Cache-Control: public, max-age=604800
/assets/*
  Cache-Control: public, max-age=31536000, immutable

Vercel (vercel.json):

{
  "headers": [
    {
      "source": "/images/(.*)",
      "headers": [{ "key": "Cache-Control", "value": "public, max-age=604800" }]
    }
  ]
}

WordPress: most caching plugins have a "browser caching" toggle that writes the Apache rules above for you.

4. Verify

Reload twice with DevTools open. On the second load, images and fonts should show (memory cache) or (disk cache) in the Size column instead of a download size.

The one mistake to avoid

Don't put a one-year immutable cache on a file you'll later overwrite with the same name. Visitors will keep the old version for months. Long caches are for versioned file names only.

Ten minutes of config, and every returning customer gets a noticeably faster site.

NEXCOD builds and fixes fast websites for small businesses. nexcod.vercel.app · WhatsApp +1 289 902 5119

Your small-business site is slow because of scripts you forgot about: a 15-minute third-party script audit

Rahil Khan — Mon, 19 Oct 2026 08:32:51 +0000

Chat widgets, review badges, three analytics tags, a Facebook pixel nobody checks, an old popup plugin... Third-party scripts pile up on small-business sites, and each one adds download time, blocks the page from becoming usable, and can break when the vendor changes something.

Here's the 15-minute audit we run before touching anything else.

1. List what's actually loading

Open your homepage, then DevTools → Network → filter by JS, reload, and sort by Domain. Everything not on your own domain is third-party. Or paste this in the Console:

[...document.scripts]
  .map(s => s.src)
  .filter(src => src && !src.includes(location.hostname))
  .forEach(src => console.log(src));

2. Ask three questions per script

Does someone on the team actually use the data or feature? (If nobody has opened that heatmap tool in a year, remove it.)
Is it loaded twice? (Common: GA added by a theme and by a plugin.)
Does it need to be on every page? (A booking widget only needs the booking page.)

3. Load the survivors politely

<!-- Doesn't block rendering, runs after HTML is parsed -->
<script src="https://example-widget.com/widget.js" defer></script>

<!-- Independent scripts like analytics can use async -->
<script src="https://www.googletagmanager.com/gtag/js?id=G-XXXX" async></script>

For heavy chat widgets, load them only after the visitor interacts:

let loaded = false;
function loadChat() {
  if (loaded) return; loaded = true;
  const s = document.createElement('script');
  s.src = 'https://example-chat.com/loader.js';
  document.body.appendChild(s);
}
['scroll', 'mousemove', 'touchstart'].forEach(e =>
  window.addEventListener(e, loadChat, { once: true, passive: true })
);

4. Re-test

Run Lighthouse (or PageSpeed Insights) before and after. Removing two or three unused tags often cuts seconds off "Time to Interactive" on mobile.

Fewer scripts = faster site, fewer things that can break, and less visitor data handed to vendors you forgot about.

We do this audit on every site we take over at NEXCOD. Studio: https://nexcod.vercel.app · WhatsApp +1 289 902 5119

Image alt text that actually helps: 4 rules for small-business sites (plus a 1-line audit)

Rahil Khan — Sun, 18 Oct 2026 08:33:38 +0000

Most small-business sites either skip image alt text or stuff it with keywords ("best plumber city plumber cheap plumber"). Both hurt. Good alt text helps people using screen readers, shows up when an image fails to load, and gives Google real context for image search.

The 4 rules we use

Describe what matters, in one short sentence. Imagine reading the page aloud to someone over the phone.

<!-- Bad -->
<img src="img_0423.jpg" alt="image">
<img src="team.jpg" alt="plumber plumbing best plumber services">

<!-- Good -->
<img src="team.jpg" alt="Three technicians in blue uniforms standing next to a service van">

Decorative images get an empty alt. Background swirls, dividers and icons next to text should be skipped by screen readers:

<img src="divider.svg" alt="">

Linked images describe the destination, not the picture.

<a href="/menu"><img src="menu-thumb.jpg" alt="View our full lunch menu"></a>

Text inside an image goes in the alt. If your banner says "20% off this week", the alt should say it too.

Quick audit: open DevTools and run this in the console to list images missing alt:

document.querySelectorAll('img:not([alt])').forEach(img => console.log(img.src));

Ten minutes of fixes usually clears most accessibility warnings in Lighthouse.

We bake this into every build at NEXCOD. Studio: https://nexcod.vercel.app · WhatsApp +1 289 902 5119

Which visits turn into calls? Track WhatsApp and phone clicks in GA4 (15-minute setup)

Rahil Khan — Sat, 17 Oct 2026 08:28:56 +0000

Most small-business sites have analytics installed, but nobody knows which visits actually turned into a call or a WhatsApp chat. Page views don't pay the bills. Clicks on "Call" and "WhatsApp" do.

What to do (Google Analytics 4, about 15 minutes)

Give your contact links a clear marker, e.g. <a href="tel:+15551234567" class="track-call"> and <a href="https://wa.me/15551234567" class="track-wa">.
Fire an event on click:

<script>
document.addEventListener('click', function (e) {
  var a = e.target.closest('a.track-call, a.track-wa');
  if (!a || typeof gtag !== 'function') return;
  gtag('event', a.classList.contains('track-call') ? 'click_call' : 'click_whatsapp', {
    link_url: a.href,
    page_path: location.pathname
  });
});
</script>

In GA4 go to Admin, Events, and mark click_call and click_whatsapp as key events.
After a week, check which pages and traffic sources produce those clicks. That's where to spend effort.

No GA4? Plausible, Umami and similar privacy-friendly tools support the same custom-event idea.

We set this up on client sites at NEXCOD so owners can see what's working. Studio: https://nexcod.vercel.app · WhatsApp +1 289 902 5119

Your contact form is drowning in spam — add a honeypot field (no CAPTCHA needed)

Rahil Khan — Fri, 16 Oct 2026 08:28:01 +0000

Most small-business sites get buried in fake "inquiry" emails. A CAPTCHA slows real customers. A honeypot is quieter.

What to do

Add a text field named something boring like company_url or website2.
Hide it with CSS (position:absolute; left:-9999px or display:none — bots still fill it).
On submit: if that field has any value, discard the message silently. Don't tell the bot it failed.

Real humans never see it. Spam drops hard. Optional: also rate-limit by IP if your host allows it.

Built this into client contact forms at NEXCOD when inbox noise was the complaint. Studio: https://nexcod.vercel.app · WhatsApp +1 289 902 5119

Make text show up instantly: one CSS line most small-business sites miss

Rahil Khan — Thu, 15 Oct 2026 08:36:13 +0000

When your site loads custom fonts, Chrome often hides all text until the font file arrives. Visitors stare at a blank page for a second or two — and bounce.

Fix it with one line on your @font-face rule or Google Fonts link:

font-display: swap;

Or on a Google Fonts URL, add &display=swap.

Text shows immediately in a system font, then swaps to your brand font when ready. Pair it with a similar fallback (system-ui, Arial, sans-serif) so the swap is barely noticeable.

This is a five-minute change that improves perceived speed on almost every small-business site we audit.

NEXCOD builds and polishes websites for local and online businesses.

Free look: nexcod.vercel.app · WhatsApp +1 289 902 5119