Slow or badly performing websites are like books with boring covers. You could have written the best, most informative article in the world but if no one opens it then what is the point of writing it?

If you need more traffic or conversions from your website, then perhaps we need to address the ugly book in the room and tweak the cover(s), unfold those bent corners, and squeeze more performance out of your webpages.

Squeezing out more performance involves removing heavy amounts of unnecessary code, decreasing excess aesthetic effects, fixing poor code order, reducing huge files, compressing massive images, or for all those Word Press users out there clearing our excess plugins!

Are you going to spout on about Caching?

No, I have chosen to negate talking about browser caching.

• Yes caching is important.
• Caching does help with page speed.
• Yes it is a vital piece of improving your site speed generally.
• Caching does help with subsequent visits, as many of your sites’ files have been saved to the users’ browser, and so no longer need to be requested.

However, caching does not largely affect the first time a user visits a landing page. Especially if the cache has not been pre-warmed. Instead, I will focus more on a user’s first impression.

Lets get started

I have included links to useful online tools throughout this article, as well as at the end in the tools section.

So, without dragging on, let’s get to the details. Here are a few tips to help you squeeze a little bit more performance out of your webpages.

Key Points – This article in a nutshell

• Content is king.
• Treasure your Landing webpages.
• Style consistently and the use the less is more mentality.
• The Importance of easy Navigation, including Breadcrumbs.
• Basic HTML webpage layout for faster webpage load.
• Minify Images
• HTML Syntax
• Remove Extra WordPress Plugins
• CTA – Call to Action
• Lazy Loading Images
• Minify Everything
• Useful Tools

1. The Bones – Your Content

The skeleton of your website is your content and still, to this day, words speak louder than images when it comes to SEO (Search Engine Optimisation).

Why is Content King

Text conveys context, meaning, relevance, and is the target that your readers are trying to find in the vastness of the world wide web.

Your words, and especially those key phrases or sentences you are targetting, need to be repeated throughout the article without being forced. Search engines are becoming more and more aware of common tricks used to increase your site’s rankings and have adapted to be more content focussed. Good quality content will rank higher than forced keyword repetition.

Your content is vital and needs to be the best version of itself, including key words and phrases repeated throughout. You may even find that a finished article needs tweaking over time as new information comes to light. Or links are now broken and need removing or relinking. Make sure your content is still relevant.

To squeeze more performance out of your content, refine it. Make sure your content does not spiral away from the article’s focus.

Remember, your content is why someone is there in the first place. Stick to the point and try not to do what many recipe sites do and give us a massive backstory about how your grandmother’s recipe is the best. Just give us the recipe!

It can sound too simple, but it is easily the most important step towards improving your website’s traffic.

Provide the Answer ASAP

Answer the questions your viewers are looking for as quickly and efficiently as possible. Spell out the answer for them within the first paragraph! Or bullet list your key points before your article.

This may sound counterintuitive. I mean, why would they read the article if you had just told them all the good bits straight away?! But by getting the answer to your reader quickly, you are building rapport with them. Your site and its content will be seen as reliable simply by default if the user’s first experience goes well.

WordPress SEO

WordPress users have a variety of plugins for checking the SEO rankings of their posts. You might think your post is readable and engaging, but that may not actually be the case. You may find some extra headings are required, or sentences are too long. Try a few out and see which provides the best feedback.

2. A Book with Many Covers – Landing Webpages

Identify your landing webpages and make those webpages so inviting and easy to use that viewers can not help but click through to find more content.

Controlling Audience Flow

Landing webpages are just like having more book covers and each can have their own title, their own images, and their own style! This is how you market to the masses.

Each webpage can be used to target a specific audience. One webpage might target those that love Sporks and another to those that hate them.

Both webpages are right in their own way, and both are owned by you. You control the flow of these audiences and, ultimately, you can drive them to a webpage that tells them to eat with their hands (which is clearly the better option).

Landing webpages are natural doors to your website. They provide the exact piece of information your visitor is looking for, and it is these webpages that you need to target for development.

What other information might this person be looking for if they are reading your article? Make sure they have direct access to the next vital piece of information to squeeze more performance out of your webpages.

3. Website Style

Be Consistent. Be Clean.

Consistent

Find a style that you are willing to settle on and use it across the entire website. For WordPress users, this would be your theme and its relevant styling attributes.

This includes, but is not limited to:

• Colours (colors for those American readers).
• Header and footer styles.
• Navigation look and feel.
• Image styles.
• Fonts.
• Layout.
• Themes.
• Animations.

Your style should be reflected consistently on every webpage. Moving key attributes around, changing colours from webpage to webpage, or altering the locations or look of common navigation elements will increase your bounce rate (the rate at which people leave your webpage/site).

Reduce Strain on your Audience

Keep theme colours and fonts to a minimum.

Too many colours can be tiring on the eyes and distracting.

Too many fonts can be disorienting and apply extra strain on your viewers as they re-adjust to each font.

If you are loading extra fonts from external sources, then you are also adding to your load times. In some cases, the fonts can be pulled to a local file where you can control the caching, which is especially helpful if they are only used for a few characters here and there. For more tips on Best Practices when dealing with Font Files see here.

Best Performance Practices for Custom Fonts

Navigation Consistency

Your navigation should not move around. Keep it in the same locations sitewide.

Viewers who feel lost will default back to that good old Google search that they know and trust and is consistent.

Clean

If you, the viewer, are trying to find something with as few steps as possible and with the world’s shortest attention span, why hide it on the world’s messiest website?

Less is more is a common phrase, and it is some of the best advice you will receive when it comes to website design.

Webpage Section Division

So, to squeeze more performance out of your webpages, start with clear, distinct, sections on your webpages with just enough padding between sections to clearly identify one from another.

Try and move away from background images that are too loud and distracting from your content.

Clear Font Sizes

The text should be easily legible from a distance, and it is a common default for the font to be 16px.

I have found many sites lifting this to an 18px default and with an even better approach being a sliding font size that scales to your device screen size using the “clamp” function (clamp(MIN, VAL, MAX)).

i.e., font-size: clamp(14px,1.5vw,24px); 

This scales the font to 1.5% of the View Width and has a minimum font size of 14px and a maximum font size of 24px.

Throw Out Clutter

Declutter, remove distracting elements, limit ad space. Remember, content is king, and the more you distract from it, the higher your bounce rate will be. Ask yourself,

• Does this add value to the page?

• Is this object distracting?
• Who benefits from this item?
• Is this the best location for this?

And lastly,

• Will the content benefit from its removal?

4. Breadcrumbs

Easily overlooked and underestimated, breadcrumbs are a must for sites with rabbit hole content.

Many good websites will have a reliable structure that can be followed using a breadcrumb system. So many sites miss this step, and yet it is so easy to implement.

A simple string of links located above the main article that describes how you got to that exact webpage is more useful than you may think.

There is almost nothing more frustrating than getting lost in a website due to poor navigation systems. It makes you want to just abandon the site altogether and just go back to googling as you did in the first place.

5. Network load and webpage speed

If your webpage does not load within a few seconds, then you have just lost your visitor. It is the harsh reality of internet users today. Short attention spans are what you are fighting.

There are many tools for validating your website, but some browsers have inbuilt tools like Google Chrome’s DevTools (Right click any webpage and select “Inspect”) or Firefox’s Developer Tools (Right click any web page and select “Inspect Element”).

Google also has a stand alone webpage for scanning and reporting on any given website called Page Speed Insights and can be found here https://developers.google.com/speed/pagespeed/insights/. These sites provide a sort of synthetic testing environment as opposed to a real world test which takes much longer to perform.

To squeeze more performance out of your webpages you need to look at your common household webpage layout.

Webpage Head Section

The <head> of the webpage should be reserved for critical code such as <tittle><meta>and <link> tags, specifically CSS links and favicons. We need to keep this as clean and lightweight as possible to prevent interfering with the critical render path.

Webpage Footer Section

The <footer> is where you can house any JavaScript links including things like Google Analytics, Facebook Messenger Apps or Social media scripts.

Squeeze more performance out of your webpages by deferring scripts (load later) as much as possible until after the webpage has loaded the “Above the Fold Content”.

Above the fold content is the content that you see on your screen as soon as the webpage loads – not the whole webpage, just what is immediately visible. We need this content to load as quickly as possible, because remember, we are fighting short attention spans.

By applying the “defer” attribute to non-critical scripts we are staying out of the critical render path, allowing the site to load all critical assets, and be declared “Loaded”.

Reducing the quantity or size of scripts, links, and CSS, the size of the payload being delivered to the viewer is also being reduced. In turn, saving time. Trimming the fat off these scripts and only including what is required will squeeze more performance out of your webpages.

Many SEO tools will say your payload should not exceed 64kb, which would be nice, but is not always obtainable. Personally, I would extend this to 400kb, which I think is more appropriate for a site that is slightly heavier in images or JavaScript.

Combine your JavaScript files into one file if possible and add the “defer” attribute to the script tag, i.e., <script defer src=”” ></script>.

6. Squeeze more out of your Images

Minify all images by using any free online file minifying service of your preference, or for even better performance, minify your files then convert them to “.webp” format.

The most effective speed performance for small images would be to inline the images using a Data URI.

Data URIs are a base 64 encoding of your image into text. The text is then placed in the “src” attribute of the image element, src=”Data URI here”.

e.g.

While I hold no allegiance to any specific Data Uri converter tool, I often use this free tool here https://www.site24x7.com/tools/image-to-datauri.html or this one here https://websemantics.uk/tools/image-to-data-uri-converter/.

<img src="data:image/gif;base64,R0lGODlhA……….." />

The idea behind this is that we convert our images to text and simply add the text instead of an outbound link to the image file (which takes time to acquire).

The downside is the text size is roughly 30% larger than the file itself, so it’s best used when you have many small files that would normally be fetched individually.

Browsers will know how to handle the text and convert it to an image on the screen. This means 1 less file request, which will speed up our webpage load.

Be sure to minify the image first to squeeze out more performance, for example:

Sprite Sheets

If you have many small images that you use often across many webpages then consider creating a sprite sheet of these images.

Your sprite sheet is a single image file that contains all of your smaller images. You can then minify and convert it to a webp format.

Sprite sheets can be generated using many different methods but one free online tool I have used in the past is https://www.toptal.com/developers/css/sprite-generator/ which also generates the required CSS to accurately locate each individual images.

7. How to Improve Syntax

While “divs” have their uses they do not convey the structure of your site. They compartmentalise but they show no relation to other elements other than being a parent or a child of other elements. Get into the habit of using <section>, <article> and <hgroup>.

<section> and <article> can be used interchangeably. A section can be nested within an article and an article can be nested inside a section. They are no different to the “div” element semantically however they provide a wealth of structural information to your code.

A webpage often has a <div class=”Wrapper or Main”> for the main content, which is a common HTML webpage layout trope, but instead can have an <article> element which is more descriptive from first principles.

The webpage <article> is broken down into <sections> with each <section> having its own <article> and its own <hgroup> (Header Group) and various <sections> etc.

Which do you think delivers a better understanding of the webpage layout?

<div class="wrapper">
    <div><h1>Animal Groups</h1></div>
    <div id="Birds">
        <div>
            <div><h3>Bird Article</h3></div>
            <p>content here</p>
        </div>
    </div>
    <div id="Fish">
        <div>
            <div><h3>Fish Article</h3></div>
            <p>content here</p>
        </div>
    </div>
    <div is="Mammals">
        <div>
            <div><h3>Mammal Article</h3></div>
            <p>content here</p>
        </div>
    </div>
</div>

<article>
    <hgroup><h1>Animal Groups</h1></hgroup>
    <section id="Birds">
        <article>
            <hgroup><h3>Bird Article</h3></hgroup>
            <p>content here</p>
        </article>
    </section>
    <section id="Fish">
        <article>
            <hgroup><h3>Fish Article</h3></hgroup>
            <p>content here</p>
        </article>
    </section>
    <section is="Mammals">
        <article>
            <hgroup><h3>Mammal Article</h3></hgroup>
            <p>content here</p>
        </article>
    </section>
</article>

8. Remove unnecessary plugins for a performance boost!

For all you WordPress users out there.

Plugins are typically a package of JavaScript and PHP files that add some form of functionality to either your WordPress User Interface or to your WordPress Website directly.

Their functionality can be activated and deactivated. However, deactivating a plugin will not remove the code but simply prevent it from being used.

Plugin scripts are still requested when the webpage loads even when deactivated. This in turn slows your site down by adding extra overheads. To squeeze more performance out of your webpages, we need to remove all this extra unused bloat and uninstall the plugin completely.

9. CTA – Call to Action

These are links, buttons, forms, or text that provoke an immediate response from your audience.

• Call Now
• Get Your
• Free
• Send us
• Buy Now
• Etc

Think contrast, think bold, think standing out. Calls To Action need to be highly visible. They need to be consistent across the whole site and they need to invoke action. Their font, if any, should be large, clean, and comfortable to read.

A contrasting, bold colour that stands out from the websites background and surrounding text will lift your Call to Action out of the webpage.

Check your CTA colours against surrounding colours with online tools such as https://webaim.org/resources/contrastchecker/. There are numerous sites that offer the same free feature, pick your favourite.

10. Lazy Load your Images

Your sites loading performance will improve if explicitly told to ignore images unless they are visible either in or above the “fold”. In other words – if you can see them. Images below the fold do not need to be loaded until scrolled upon. This saves webpage load time and delivers the visible portion of website to your audience faster.

How to Lazy Load Images?

By using JavaScript and a little attribute called “data-src”. There is a new, no JavaScript, way to Lazy Load images which I have written an article on here, but this is the tried and true way using JavaScript.

1. Identify those images you want to Lazy Load.
2. Update the “src” attribute to “data-src” and keep the image path.
3. Add a new “src” attribute like so:

src="data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=" data-src="/images/…….webp"

This data URI above is a single transparent pixel that loads almost instantly so the webpage does not need to fetch or generate the real image.

4. JavaScript

Self-explanatory but for those new to this it simply says that once the webpage has loaded add some event listeners that will listen for when the user scrolls, resizes or changes the orientation of their device.

The script below will trigger should any of these listener events become triggered. It will create a collection of all ‘img’ image elements and loop over each of them to determine if they are coming into view (“-300” says look for an image that is only 300px below the fold and begin to load the image). Feel free to change this number it is just my preference.

If the image is near enough or already in the view, then update the images “src” attribute to equal that of its “data-src” attribute.

When all images have been updated and no longer have their “data-src” attributes, the script will remove its added listener events.

document.onreadystatechange = function () {
    if (document.readyState == "complete") {
        let lazyImagesAll = Array.from(document.getElementsByTagName('img'));
        let lazyImages = [];
        for (var i = 0; i < lazyImagesAll.length; i++) {
            if (lazyImagesAll[i].getAttribute("data-src") != null) {
                lazyImages.push(lazyImagesAll[i]);
            }
        }

        let active = false;
        const lazyLoad = function () {
            if (active === false) {
                active = true;
                setTimeout(function () {
                    lazyImages.forEach(function (lazyImage) {
                        if ((lazyImage.getBoundingClientRect().top <= window.innerHeight
                            && lazyImage.getBoundingClientRect().bottom >= -300)
                            && getComputedStyle(lazyImage).display !== "none") {

                            if (lazyImage.getAttribute('data-src')) {
                                lazyImage.setAttribute('src', lazyImage.getAttribute('data-src'));
                            }

                            lazyImage.setAttribute('data-src', '');
                           
                        }
                    });
                    active = false;
                }, 200);
            }
            if (lazyImages.length === 0) {
                document.removeEventListener("scroll", lazyLoad);
                window.removeEventListener("resize", lazyLoad);
                window.removeEventListener("orientationchange", lazyLoad);
                return;
             }

        };
        /*Event when user scrolls*/
        window.addEventListener("scroll", lazyLoad);

        /*Event when screen is resized*/
        window.addEventListener("resize", lazyLoad);

        /*Event when user rotates screen*/
        window.addEventListener("orientationchange", lazyLoad);
    }
};

5. Add a link to this script file in the webpage footer or inline the script in the HTML page.

11. Minify Everything

To improve webpage load performance, you can help the browser out by removing unnecessary white space and comments. A tool I use often is Will Peavy’s Minifier https://www.willpeavy.com/tools/minifier/.

It does a fantastic job and gets most of the minifying done with the push of a single button.

For JavaScript I suggest using Googles Closure Compiler here https://closure-compiler.appspot.com/home which reads your JavaScript and not only minifies it but rewrites it where it can to optimise it’s performance.

A trade secret for you, you can squeeze a little bit more performance out of your webpages by selecting all the minified text and replacing “> <” with “><”. By removing this blank space between elements, you can typically save an extra few hundred characters or so. Give it a go.

(Trade secrets) I Need More Speed

Still not getting the speed you need. Try and inline your CSS and JavaScript.

Instead of adding links to these files simply dump the entirety of your CSS file between <style></style> tags in the <head> of your webpage.

Add your JavaScript to <script></script> tags in your webpage.

The downside to this is maintenance. If you alter your CSS or JavaScript files, then you are going to have to update your inline styles and scripts too. I would keep this technique to a minimum and only use it on webpages where speed is vital.

Tools

• Page speed Insights – Scans your given webpage scoring it and provides details of what to improve. https://developers.google.com/speed/pagespeed/insights/
• Web Page Test – Scans your given webpage and provides performance analysis https://webpagetest.org/
• Web Page Metrix – Page performance statistics https://gtmetrix.com/
• Will Peavy Minifier – Minifies your entered HTML, CSS, and JS. https://www.willpeavy.com/tools/minifier/
• Google Closure Compiler – Minifies and Optimises your JavaScript. https://closure-compiler.appspot.com/home
• Google Analytics – Monitors your website traffic and provides detailed reports. https://analytics.google.com/analytics/web/#/
• Contrast Checker – Provides a comparison between any two colours to determine if their contrast ratio is large enough to be legible.https://webaim.org/resources/contrastchecker/.
• Convert Image to Data URI – Accepts most image formats and converts to a base 64 data URI. https://www.site24x7.com/tools/image-to-datauri.html. OR https://websemantics.uk/tools/image-to-data-uri-converter/.
• Sprite Sheet Generator – https://www.toptal.com/developers/css/sprite-generator/

Conclusion

While this is not an exhaustive list it is a great starting point to squeeze more performance out of your webpages.

Other possibilities could include:

• CDN’s or Content Delivery Networks that store your images or large files separate from your websites main HTML files and can deliver these files with lightning speed.
• Upgrading from http/1.0 to http/2.0 Protocols or even in some instances http/3.0 (which is very new and not fully accepted everywhere as of the writing of this article).

The ProcessIT website https://processit.co.nz follows almost all of what has been written above for those interested in seeing the tips in action.

On some of our more frequented webpages we also include a Facebook Messenger application for direct contact with the ProcessIT team. I do not include this feature everywhere as it does impact webpage load speeds, so we only add it where necessary. I have written an article on how to add this feature here https://processit.co.nz/blog/2021/02/learn-how-to-add-facebook-messenger-live-chat-to-your-website/.

The tips in this article will definitely help your site to improve its load times, SEO and viewer numbers but ultimately it comes down to your content and how clean and useful it is. People will wait for good content or a website they have a good repour with but it’s building that repour in the first place that needs you to squeeze more performance out of your webpages.