Website Speed: Practical Fixes for Images, Fonts and Scripts

Introduction

• The problem: many business sites feel slow on a phone, especially on a mobile connection, and visitors leave before the page finishes loading. The owner usually cannot tell why, because the site looks fine on the office computer.
• Why it matters: speed affects how visitors feel about your business, how many of them reach your contact button, and, to a degree, how search engines see the page. It is not the only factor, but it is one of the few you can fix directly.
• What this article covers: the five usual culprits (images, fonts, scripts, caching, hosting), how to find the worst offender on your own site, and a short checklist you can hand to whoever manages your website. For the metrics Google uses to judge speed, read our separate guide, Core Web Vitals in simple terms. This article focuses on the practical fixes.

Start by measuring, not guessing

Before changing anything, take a baseline so you can prove a fix worked.

1. Open your home page and your most important service page in PageSpeed Insights (free, from Google). Test the mobile result first.
2. Note the main numbers and the list of "opportunities" it shows. Save a screenshot.
3. Test on a real phone using mobile data, not office Wi-Fi. If it feels slow to you, it is slow to your customers.
4. Repeat after each change. Change one thing at a time so you know what helped.

Lab tools give a snapshot, and results vary a little from run to run. Look for large, repeated problems rather than chasing small differences.

Images: the most common cause

On most business sites, images are the largest part of the page weight. A photo straight from a camera or phone can be many times larger than the screen it is displayed on.

What to do

• Resize to the displayed size. A picture shown 800 pixels wide does not need to be 4,000 pixels wide. Keep a little extra for sharp displays, not a lot.
• Use modern formats. WebP or AVIF are usually much smaller than JPEG or PNG at similar quality, and current browsers support them. Keep a fallback if your platform needs one.
• Compress sensibly. A moderate quality setting is usually invisible to the eye and saves a lot of weight. Check the result visually.
• Lazy-load below-the-fold images. Images far down the page can wait until the visitor scrolls. Do not lazy-load the main image at the top, because that delays what the visitor sees first.
• Set width and height on every image so the browser reserves space and the page does not jump.
• Use SVG for logos and icons where possible. They stay sharp and are tiny.

Fonts: small files, big effect

Fonts are easy to overlook. Each weight and style is a separate file, and Arabic fonts are often larger than Latin ones because of the number of glyphs.

• Limit the number of families and weights. Two families and two or three weights is usually enough. Every extra weight is another download.
• Include only the character sets you need. If a font ships with many scripts you do not use, subset it.
• Host fonts on your own domain when your licence allows it, which avoids an extra connection to another server.
• Use font-display: swap so text shows in a fallback font immediately instead of staying invisible while the font loads.
• Preload the one or two fonts used above the fold, such as the heading font, so they arrive early.

For bilingual sites, remember you may be loading an Arabic and a Latin font. See bilingual website design for choosing a pair that works without doubling the weight.

Scripts and third-party tools

Every script has a cost: it must be downloaded, parsed and run, often on a modest phone. Marketing and tracking tools are a common source of slowdowns because each one adds its own requests.

Practical rules:

• Make a list of every script on your site and write one line next to each: who uses it, and what decision does it feed. Remove anything with no answer.
• Load non-essential scripts with defer or async, or after the first interaction.
• Be careful when removing tracking: confirm with whoever reads your reports first, and keep your analytics and conversion tracking intact.
• If you use a tag manager, audit its contents. Old tags tend to accumulate.

Caching and delivery

Caching means a visitor's browser, or a server in between, keeps a copy of files so it does not fetch them again on every page.

• Browser caching: static files such as images, CSS, JavaScript and fonts should carry cache headers telling the browser to keep them for a long period. Use versioned file names so updates still reach visitors.
• Page caching: for sites built on a CMS, a page cache serves a ready-made page instead of rebuilding it from the database each time. This is often one of the biggest wins for WordPress-style sites.
• Compression: make sure the server compresses text files (HTML, CSS, JavaScript) with Gzip or Brotli.
• CDN (content delivery network): a CDN keeps copies of your files on servers in many places and serves them from a location near the visitor. It helps most when your audience is spread across regions, or when your main server is far from your visitors. Ask where your hosting is located compared with your customers.

Hosting and the server itself

If the server takes a long time to respond, no amount of image tuning will make the page feel quick.

• Check the time to first byte in your testing tool. A consistently slow response often points to overloaded shared hosting, a heavy database, or an uncached CMS.
• Make sure the hosting plan fits the traffic and the type of site. A busy store on the cheapest shared plan will struggle.
• Keep the software up to date: the server language version, the CMS and the plugins. Older versions are often slower as well as less secure.
• Reduce slow database queries and unused plugins. This is a developer task, but you can ask for it by name.
• Choose a data centre reasonably close to your main audience, or use a CDN.

A checklist you can use today

1. Run PageSpeed Insights on your two most important pages and save the results.
2. Find the three largest images and resize, compress and convert them.
3. Add width and height to images; enable lazy-loading below the fold.
4. Count your font files; remove unused weights; add font-display: swap.
5. List every script and remove the ones nobody uses.
6. Confirm caching and compression are enabled on the server.
7. Check how fast the server responds and whether your plan still fits.
8. Re-test on a real phone and compare with your baseline.

Common mistakes

• Optimising only the home page. Service pages, blog posts and the contact page matter just as much, and are often heavier.
• Installing a "speed plugin" and stopping there. Plugins help, but they cannot fix a five-megabyte photo.
• Lazy-loading everything, including the top image, which makes the page look slower.
• Adding tools without removing old ones. Each new widget adds weight; no one removes the previous one.
• Chasing a perfect score. A score is a guide, not the goal. The goal is a page that feels quick and gets visitors to act.
• Testing only on fast office Wi-Fi and a powerful laptop.

What does Xposio do?

1. We measure first, on mobile, and record a baseline for your key pages so improvements can be shown rather than claimed.
2. We fix the biggest items in order: images, then scripts, then fonts and caching, instead of applying random plugins.
3. We build speed into new sites from the start: image sizing, a restrained font set, and only the scripts that serve a purpose.
4. We audit tracking and third-party tools with you, so removing weight never breaks your reporting.
5. We are honest about limits: speed helps experience and can support search visibility, but it is one factor among many and we do not promise rankings.

Internal link: Learn about the Website Design & Development service at /en/services/website-design-development, and the Technical SEO service at /en/services/technical-seo.

To see where your site stands today, you can order the Digital Snapshot report at /en/report.

Conclusion

• Measure first on mobile and keep a baseline, so you can show what each fix achieved.
• Images are usually the biggest win: resize, compress, use modern formats and lazy-load below the fold.
• Fewer fonts and fewer scripts mean a faster page; audit both regularly.
• Caching, compression and a decent host remove delays that front-end work cannot.
• Fix one thing at a time and re-test. Speed is maintenance, not a one-off job.

Related reading

• Core Web Vitals in simple terms
• Mobile-first design