Websites and Tech

Front End

Also called Client side, UI layer

The part of a website that runs in the visitor's browser: layout, text, images and everything they click.

Quick facts: Front End

Category
Websites and Tech
Also called
Client side, UI layer
Level
Beginner
Affects
Page speed, conversion rate, accessibility, how search engines render pages
Where to see it
Browser developer tools, Lighthouse, PageSpeed Insights
In this article4
  1. How the front end works
  2. Why the front end matters
  3. Common mistakes with the front end
  4. How to act on it

How the front end works

Every page a visitor opens is assembled from three kinds of file that run inside their browser: HTML for the structure, CSS for the appearance, and JavaScript for the behaviour. Together they are the front end. Your server hands the files over and then steps back; the browser does the work of turning them into a readable layout, a menu that opens, and a form that checks an email address before it is sent.

The important consequence is that the device doing the work is not yours. It belongs to a customer who may be on an older Android handset and a mobile connection, which is the ordinary case for most traffic in Nepal. Whatever you ask the front end to do, the visitor pays for in waiting time and data.

Why the front end matters

It is where all of your marketing lands. An ad click, an organic result and a link shared on WhatsApp all arrive at the same rendered page, so the front end is what decides whether the money spent getting somebody there turns into an enquiry or is thrown away at the door.

Search engines meet it too. Google fetches your files and renders them much as a browser would, so anything that only appears after a large amount of JavaScript has run may be seen late, partially, or not at all. The three Core Web Vitals measurements — loading, responsiveness and visual stability — are almost entirely front-end outcomes, and they are measured on real visitors’ devices rather than on yours.

Common mistakes with the front end

The costly one is treating it as decoration. A design signed off on a large desktop monitor, on office broadband, tells you nothing about how it behaves on a phone held one-handed on a bus. If the approval process never leaves the designer’s screen, the problems are discovered by customers.

The second is accumulation. A slider here, a chat widget there, a review badge, three font families and a heatmap script: each looks harmless on its own, and each adds files the browser must fetch and run before the page settles. Nobody ever schedules the removal, so weight only goes one way.

The third is hiding what the page is for. Content tucked inside tabs, accordions or carousels can be genuinely useful, but if the price, the phone number or the main answer is only reachable by interaction, many visitors — and sometimes crawlers — never reach it.

How to act on it

Test on a real mid-range phone on mobile data before anything is signed off, not only in a desktop browser window made narrow. Keep a written list of every third-party script on the site with the name of the person who asked for it, and review it whenever you add another, because that is the only way removals ever happen.

When the front end is genuinely slow rather than merely heavy, treat it as an engineering job with measurements attached — that is what page speed optimisation is for. And when you commission a new site, ask to see it on a phone at every stage of web design and development, not as a final check.

Do and do not

Do

  • Test every page on a real mid-range phone
  • Keep a written list of third-party scripts
  • Put the price, phone number and answer in view

Do not

  • Sign off a design only on a desktop monitor
  • Add widgets without removing something in exchange
  • Hide key content inside carousels or tabs

Questions people ask about this

Is the front end the same thing as the design?

No. The design is the plan for how a page should look and behave. The front end is the working code that delivers it in a browser. Two sites can share an identical design and behave completely differently, because one has been built carefully and the other loads far more files than it needs to.

Can front-end problems hurt my search rankings?

They can. Google renders pages before judging them, so content that depends on heavy JavaScript may be indexed late or incompletely. Slow loading and shifting layouts also affect the page experience signals Google reports. The bigger loss is usually commercial rather than algorithmic: visitors leave a slow page before they read anything.

Who should fix front-end issues, my designer or my developer?

Usually the developer, with the designer involved in any decision that changes what the page shows. Removing a script, compressing images or deferring a font is development work. Deciding that a carousel should become a single static banner is a design and content decision, and it often produces the larger improvement.

Related terms

Found this useful?

Share it, or ask an AI to summarise it

Back to the glossary

Knowing the term is the easy part

Applying it to your own site and budget is the work. Book a call and I will tell you what actually applies to you.