Before we begin, I would like to test your patience by staying still for about 10 seconds. Wait what? 10 seconds? Doing nothing? I’m sure you went through hell and back without getting through 5 seconds of doing absolutely nothing. Now think of a time where your website was sucking the life force out of you for loading, how did that make you feel?
You see, people value the second they have in their day, so imagine having a website’s page load in a blink of an eye, how awesome would that be? I mean, people love speed. It attracts and retains them, getting all of their stuff done with a single tachycardia heartbeat, let alone lowers the page’s bounce rates, and of course, is trustworthy.
Users won’t give a single damn or second whether or not the layout, design or content is as long as it takes them to hell and back to view how awesome it is. Zilch.
Ever wondered what they call selling or buying products online? Ecommerce. Being an e-commerce business and having a delay of literal second causes 11% fewer views, 16% customer satisfaction, and 7% fewer conversion rates.
Having Google define Core Web Vitals.as metrics, page loading speed is gaining a lot of popularity.
UX is so crucial, Google actively tracks load speed indicators such as Large Content Paint (LCP), First Input Delay (FIP), and Cumulative Layout Shift (CLS), and all scores pertaining to all three factors MUST result back with GREAT SCORES! How wicked can it get if you can measure the overall performance of your website manually using the Google Search console?
Thankfully, the digital age comes with a savior to help ease the lives of many, helping them optimize the performance of their websites. Three tools have been offered to help measure page speed.
- Google Search Console, reporting out the overall website performance and loading issues and gives insights and provides a list of URLS needing optimization. It doesn’t measure the website’s speed, but oh boy it’s one hell of a helping hand.
- PageSpeed Insights, a Google developed tool and a site speed tester, allows individuals to copy paste the URL to get a very greasy, laid back report on the loading issues that affect the page load speed. Optimization is its main concern, generating a Desktop and Mobile score to view and recommend on optimizing the page, transforming it into a spectacular one!
For developers, the main goal is to:
And the arch enemy to avoid is:
The third and what I like to call a tool, the fist of steel is at your disposal. GTmetrix. You see, as a developer or a webmaster, your target market resides in several, if not opposite ends of the world, parts of the world. GTmetrix is a tool that allows you to test your page’s speed in different geographical locations. Using its state-of-the-art advanced settings, you can set the location, device, screen resolution, and more to gather more accurate information that you can act on.
Have you ever considered yourself a fixer? Well, here’s your chance to prove yourself with 8 simple steps. Following those steps will take you from square one to full-on Optimus Prime style, improving your website’s page load speed.
- Image optimization, entailing three things:
Image file size
As we’re all familiar, and given how images contribute to UX and overall understanding, images are known for their magical effects of making any complex or context easy, visually helpful, and contributing to a fun and entertaining experience, cause like, who would want to waste their time reading, reading and reading without having something to make the whole topic rich and fun? However, choosing heavy and large-sized pictures affects the speed of the website and you need more than one picture to make it enjoyable. So, as a result, choosing a small file size is needed. Did you know you can also compress your pictures? Wicked, right? Compressing tools are also available to optimally utilize such as TinyPNG. It helps optimize the images’ names, alt attributes, and formats. To me, that’s one sick package I have waiting for me. What about you? Bedazzled yet?
Y’all are used to using a PNG file format for a picture, but did you know that PNG is one of the heaviest image types out there? And what did we say about being heavy? Well, heavy in our case isn’t beneficial, for it slows down the loading speed of the website. The solution? Well, solutions? JPG. Aim to have your pictures .jpg, as their file size is smaller. However, the light is good. Having lighter pictures contributes to the overall performance and results in faster loading speed. WebP’s are gaining popularity nowadays because they’re 33% lighter than JPEGs, and this alone increases your chances by a huge shot of having a faster loading website. WebPs’ only setback is them not being compatible with all browsers out there (IE, Safari, Chrome, Opera and Microsoft Edge, and many more…), Chrome being one of those incompatible browsers.
Pixels. Dimensions and resolutions are extremely important to look out for. Uploading a 4,000 x 4,000 image will only eat up users’ screens and such a huge dimensional picture is not fully needed. Go for 800 x 1,200, they’re mostly used and common on articles, not losing the image’s quality. Adding the right image dimensions is a must within the image tag because the browser needs to calculate how much space to save for the picture before loading, reducing the page’s CLS. Yes, the 1’s and 0’s start jiggling.
When CSS and JS are minimized, this reduces the amount of time it takes the browser to load every element out there. Weird development terminologies, right? Well, as I mentioned, computers are machines, and they’re not designed to be all stylish and follow stylistic choices, hence, it is the developer’s duty to create a smaller-sized files by deleting unwanted comments, removing white spaces (Yes, a white space occupies an area of the page, making it consume more loading intervals, so get rid of them ASAP!), using shorter names, because a letter corresponds to a character, and depending on the character (upper or lowercase) it absorbs loading time. Moreover, shortening or stripping the code of unnecessary parts can also contribute to a faster loading page, saving humanity a great load of time.
You can use the below tools to minify the files:
Zipping and compressing can also be beneficial. Using Gzip compression reduces the file size by a long shot.
3. AVOID or BEWARE of third-party scripts!
Have you ever wanted to add an ad to your website? Ask yourself or recall every single time you’ve seen a pop-up or an ad on a website you’re/ve visited in the past. Yeah, mate, these are referred to as third-party scripts. When another vendor just simply embeds scripts directly to your website. Who’s losing and why? You. Because, such scripts are being read on the client-side, hence, contributing to the overall speed of the site. And oh boy, they’re such a pain in the bum! When you want to add a code, make sure it’s optimized and functioning at an optimal level, deleting anything that might be an accessory or unused.
4. VPS hosting service to the rescue.
You’re probably wondering what VPS is. If you’re new to all of this, then I bet you 100 bucks you thought it’s a valet parking service. Ha-ha! VPS stands for Virtual Private Server. And every Internet Service Provider you subscribe to has one huge server that gives multiple subscribers. Well, think of it this way. Imagine you belong to a group, and this group keeps giving away you’re saved up a chunk of money you’ve made as tips. It surely delays the time you need to buy those fancy kick-ass sneakers you’ve saved up for. This is what happens when your website is registered on a shared server, it slows down and delays loading the page. The solution? Well, I’ve already mentioned it. Have your own damn private server, and have consistency alongside it. It feels great having complete control over your own resources and separating it from other users. This prevents other sites from taking resources from yours and allows you to customize your server the way you need, giving you the leisure of having a fast-loading website.
5. Warehousing in a Content Delivery Network
And by warehousing, I mean warehousing. Hosting is what stores the page’s information over the internet, like a database, and delivers it once a browser makes a request to access the page. But, ever heard of late delivery? Imagine ordering food. You tend to order from the nearest restaurant to you because it takes so much less time to arrive and you’d enjoy your meal, hot and spicy! This is exactly what a CDN does. It delivers the site’s assets (HTML, JSON files, scripts…) from the nearest server. For example, if your server is in the U.K, and you are trying to access the page from the U.S.A, it will take a large number of seconds to fully load the page. But, if your server is in the U.K, it will take approximately milliseconds to load. So, a word of advice, use a CDN, because if you don’t, you’ll be waiting just like a lottery paper, and awaiting the quickest server to respond. So save yourself the trouble, and use a CDN, it’ll make your life a heavenly place.
7. Caching your data to a speedy recovery!
Let me put it in other words. It’s like organizing your money and putting every batch of bills in an organized manner. Caching is a computer thing to do when dealing with a browser. Caching is a high-speed data storage layer that stores a subset of data, typically transient in nature so that future requests for that data are served up faster than is possible by accessing the data’s primary storage location. This loads your page even faster when the cache for this specific website is already stored. Wait, you think I finished? Here’s where it gets interesting. To keep things running fast, you must set an expiration date for the assets of the website, because you really don’t know when you’ll re-access the website again, and you wouldn’t want to go through the process of loading and storing your website’s cache all over again. But wait, you’re probably wondering why I’m contradicting. It’s true. Storing up a lot of cache and cookies in the browser has its downsides, for it slows down the loading period. This is why you need to delete the cache and cookies for websites you might not revisit, later on, giving a faster time for other websites to load. Caching is a working miracle. Try it.
8. Laziness in the form of loading
Yes, you’re reading it very correctly. It is what the name implies. Lazy loading.
You want first-time users to enjoy their UX and their overall journey when visiting the website, no? Well, the answer is simple. Lazy loading. We want to make the browser render the top of the page first (above the fold content) before loading the rest of the page. Let’s consider the website a building block, and each block is loaded when it’s needed and not all at once. We can use lazy loading and enable it by using loading attributes. These attributes will tell the browser to download the elements once the user has scrolled to the element and places it in the viewpoint. For example, if the element consists of loading a picture, and as soon as the user has scrolled down to that element, the image instantly loads, offering the user the best ever possible experience out there.
Hang in there for a second. Do you really believe I highlighted every single thing to optimize and improve website loading speed? If I wanted to go in deep, I’d write a novel or a guide.
There are other ways to further improve the website’s page load speed and tons of other tips and hacks. But I only highlighted the most prominent and efficient steps to birth optimization.
That’s it for today folks, get your tech-savvy brains up and running and embrace your inner Felicity Smoak (Google her if you don’t know her, she’s the bomb). Invest your resources wisely and intelligently, and you’d be “Smoking” in Felicity.