Yes- it’s scary to see such a statement, and the fear is valid. If your beloved website, that was a quicksand for your time and resources is chasing people off right from the start. There’s a combination of marketing-related and technical errors everyone makes, which greatly affects their pageviews and bounce rate. I got together with experienced developers and designers and badgered them to not only tell me all about it, but to also translate their jargon so that could speak human with me. There are a number of things that are either overlooked, forgotten or not known at all by several out there.
Here are some statistics with staggering numbers that should make you take a second look at your landing page:
- If a page fails to load within 5 seconds, 74% of people are bailing.
- Only a little 3 second delay could lead half your traffic to bounce.
- This research finds 88 percent of internet users choose online retailers delivering high-performance and user-friendly website experience, and almost 50 percent abandon websites that fail to load within 3 seconds.
- If you’d like to find out how website performance is affecting your conversion rates, free online tools like Google’s Test My Site tool can help by giving you an instant overview.
Of course, I had to cut down the nitty-gritty details of it all, because a dev will do a dev’s job, but if you’ve got one working for you, you can make sure they do their job right. Here are the things that matter a lot when you’re in the process of finalizing your landing page:
1. Responsiveness
"Once we prepare a landing page, we have to go through a process that goes beyond just designing. We have to make sure that the implemented version is up,” says Ahmad Ali, from the designing department of Computan, “It must render properly across different devices. Laptops, iPads, phones- you name it. It must be tested before publishing any changes publicly. People create landing pages to get leads, and most of them run paid campaigns. They invest money, and that should never be published before testing on different devices, or that would all have gone to waste, if someone visiting the page can’t even access it.
2. Cross-browser testing
“There are some elements that behave differently on different browsers,” continues Ahmed, “Some properties work on Chrome and the same properties don’t work on Firefox. Let’s say Shadow. There is an advanced version of CSS called CSS,3 and some of those properties are not supported on other browsers like Opera and Safari. We must test our landing page on different browsers, to see if everything is being rendered properly. If you apply 50% opacity, it should blend with the background, but it may only work fine on Chrome. So, before publishing, precautions must be taken.”
3. Forms Below The Fold And Living Without Scroll Bars (even doing better without them)
This is something that Sajeel Qureshi, our VP Operations had mentioned the moment I had mentioned this topic. When I dove into this issue, I found that it was hard to get my head out of it!
It is the best user experience practice to have your forms at the top of your page, because normally, people don’t scroll down completely, or may not feel like filling your form for whatever reason, by the time they’ve reached the end, and they’re done with their “browsing”. You should always keep the form in the first fold. For us, the goal is complete when they visit the page and fill the form, so no one should have to scroll down to look for it. It’s surprising how so many websites don’t follow this even now. People prefer those pages that have the form in the very first fold. This is whether a user decides whether they want to go further or not. This isn’t just a landing page-related concept, but more on the sales and marketing side, first impressions and impulses being the ones that count most.
4. Missing Tracking Code
A tracking code is a piece of code that make your landing page- and you don’t ever have to need to worry about understanding or messing with the code, but you should at least let your developer know of the high quality service that’s expected of them. For this matter, I consulted with Haseeb:
“Any of these activity-tracking software, like Google Analytics, that we use to track anything gives us an HTML or Javascript code that we can install on the website is called tracking code. Let me explain: if this tracking code is not installed on the landing page, we can’t access those details on the landing page,” he said, “It’s the code that we’re supposed to install while we’re setting up the landing page for any of the reporting software we’re installing. It is only missing when there’s a specific tracking code on a specific landing page- a customized one, which is used by lots of people. For example, if I need a landing page where I have one YouTube video, and I need someone to develop some code which can track the video playback events, there’s your custom code. How many times someone clicked the “play” button? How many people went up to 50% of the video? If they want to track the visitors for different metrics, they need to know the location of the visitors too. These kinds of custom tracking codes are something that need to be included. In this case, you can ask your developer to “Add the code", or if they could have some code written or installed for this purpose, if you’re looking for specialized, custom-tracking codes.
He also went on to say this: Aalia, are you seriously writing all of this?
5. Misalignment
This one is more about being less careless, and realizing the importance of a professional outlook for your website. Margins and images that are askew look really shoddy, and one might just leave after you lose your legitimacy, just because you couldn’t find the time to align things properly.
6. Social Media Links and Building Your Repo
Ahmad Ali wanted to add something that he personally felt was important:
You could consider this best practice: usually people don’t add social media links on their landing page to save up some loading speed. Copy/pasting URLs isn’t trackable, and would affect analytics., but engagement is trackable if you add sharable buttons. Facebook, Twitter and Linkdein are a must according to me, and if there’s the option to send a link via email, that would be the cherry on top That way, they would engage further. I notice many times when I’m going through blogs, that I don’t find this option. It’s an annoying experience to copy/paste URLs when you want to share something with someone or on social media.
People on your landing page would want to see proof that you can be trusted. Diverse and active social media profiles are one way to deliver it. If you’ve got platinum partners, prestigious sponsors, trust seals (like TRUSTe Certified Privacy and MacAfee Secure) shining testimonials or well-known clients, this is the perfect place to add those.
7. Stop Confusing Your Visitors
Choose your message and stick to it. Choose one agenda, and it’ll work. There’s no need to flaunt about several services, because that would make you background noise instead of being able to attract specific customers. Keep it to-the-point! According to this research, relevancy and specificity lead to better results, up to a 213% increase. Behaviour tracking tools like CrazyEgg can tell you where people linger most, so you can optimize it according to customer behavour to boost clicks/views. Keep your CTA CLEAR. You could change up the wording for this to seem more “sincere”. “Try us now” is better than “Sign Up For Free Today!”
8. Upgrading Your Hosting
There are few things that absolutely kill load times more than shared hosting splitting up all your resources across multiple sites. Cheap hosting should be an option to be thrown out of the window.
Thousands of sites even giants like Google Cloud Computing, GoDaddy shared hosting is are offering these services, but it doesn’t mean you’ve got to follow those big names.
9. Image Optimisation, For Crying Out Loud!
Slow loading speeds and pages crashing turned out to be a hot topic, as image optimization is the main reason pages crash or load slowly. I couldn’t possibly transcribe the essay-worth explanations about what causes low speed, but I did my best to break it down and explain it to you after hearing several develop rant about it how people not prioritizing I mage optimisation There are plenty of reasons that cause this slow speed, which are being discussed below.
The most common culprit of slow loading time or of pages crashing is the usage of bigger images than needed.
“I can’t even have images the size I want on my own website?” Would be a typical response.
No, that’s not right at all.
It’s called optimization for a reason. Having a non-optimised image would increase load time, or completely eliminate the load time… in a bad way. The page would never open. If the visitors have a slow internet connection while accessing the page, they would not get to ever see the page at all.
Let’s say that the container/canvas/space that has your picture is 100/100 dimension-wise The image size in the canvas should be proportionate to the actual dimensions of the canvas. Dimensions and size/quality are different entities. Your image size would be measured in kilobytes/megabytes The dimensions would be the length and the width of the image- they both play a major role in page load speed. If you’re using a 2600/1800 image for a 400/400 canvas, it will mess up.
“To put it in another way-“ Ahmad Ali, a designer at Computan said, “The graphic size shouldn’t exceed the size defined on your webpage. If you have icons, you should use svg. If you use png format, it could a 100 kb image. Then with svg, the same image will be crystal clear, even if it’s converted 10 kb. It will not increase the file size or have you lose any pixels, because that’s a vector. A lot of people are under the misconception that reducing the size can reduce the quality, but it doesn’t always work that way.”
Haseeb continued- “There are multiple reasons for crashing. A major reason is large sized images. I really saw that people used 20 MB images (his eyebrows raised sky-high) in the main section on their blog, and those kinds of pages crash on most browsers, and they don’t even know. If you have linked any stylesheets or Javascript files, it must be optimized. Just like with images, there are ways to optimize those too, so make sure to reach out to your developer, who can ensure that none of these issues are the moles in your business plan.”
Reducing the size would not affect the quality, if you reduce the dimensions of an image. If you stretch a small image to a larger one, (bigger than the original) it could get pixelated (which seems to be a trauma we have all endured at some point), but the same thing won’t happen if you’re reducing the size. There are a few things you should remember while optimizing images:
- Images that are in PNG format must be exported as “interlaced”
- JPEGs should be exported as “progressive”
- Photoshop actually allows you to retain the quality while adjusting the size. You can use it to optimize images and export them at 60-80 % quality, and they’d still be crystal clear
- TinyPNG is one of the best websites for online image optimization (I use it personally)
- There’s a tool that Ahmad Ali really loves, because it’s a solution for many problems regarding images. It’s called Photopea. It has multiple options. It allows you to open, edit and export all kinds of files. It’s not perfect, but it allows you to manage a lot of tasks, like converting things only read by Mac, and it becomes possible for other computers to read the same files. This website allows you to do all that online, instead of downloading a few GBs of image optimization or editing software and installing it.
- The names of the files should be SEF (Search Engine Friendly) which would increase the possibility for more traffic. Yes, if the name of your image is IMG-201912342, then there are fewer chances people can stumble upon your website while searching for related content. This should also be part of your SEO strategy. ALT tags should be properly defined. It should define the image basically. Potential traffic is lost because of the wrong image names/tags. If you want some organic traffic, this is the way to go. “Sometimes,” explained Haseeb, “People don’t know that their pages are being indexed by Google, and there are ways to get visitors like this through organic traffic. The bigger mistake is that they don’t define the meta description of the tags. The search engine has to pick the content on its own. It’s a section in the back-end for the developers that defines the HTML code. They don’t define the meta-description, if there’s no required field parameter, and then it’s harder for you to be discovered on Google Search.
- Lastly, you could use as few images as possible. Not only does it help with the loading speed, but it also makes your page look neater, and brings attention to the focal point if your selling image/strategy.
Since we’re on the same page…
Besides that, factors like complex Stylesheet formats, heavily coded layouts, animations (like a bunny cursor or a glittery one) contribute to slow loading speeds for landing pages.
There are different ways to optimize all these aspects, to make sure that despite the animations and slightly complex layouts you want to use don’t reduce the speed. We need to make sure that before the page goes live, the page load speed is tested. A lot of A/B testing tools are excellent for this purpose, and could save you a fortune in the long run. The standards should be there. Not just for images, but for other elements must- be optimized as well.
11. Clean Code
.jpg?width=497&name=Clean%20Code%20(2).jpg)
I couldn’t see a clean code staring at me in the face, so I had to turn to Haseeb Ilyas again, to get some insight into this, if having this clean code can reduce loading speeds:
To achieve the fastest loading time, another way is keeping your code clean. This, of course, is the code at the back-end that’s making the magic happen, and while manually writing code, there can be a lot of what you can call “gaps”, extra spaces, characters and unnecessary “junk” the code could work functionally without that the browser downloads, that’s being fetched by the server. That extra stuff take-out makes it browser readable, reducing the loading time to quite an extent. It compresses everything. Removes extra spaces and a replacing the code with minification methods if it’s available for any code that a developer uses.
Now, you’d ask- what’s a minifiier? Any developer would be familiar with the term. You don’t need to use it, but you can make sure that your developer is using it. A minifier re-writes the code. There are many types of minifiers developed by different companies. They’re for HTML, CSS and Javascript. Any of them can be selected and implemented on the server to reduce the rendering speed. They just automatically remove all that’s unnecessary.
12. Do your widgets or plug-ins spark joy?
It’s time to go Marie Kondo on your landing page. You can avoid that major spring-clean all you want, because you can manage to not chase guests away somehow, but this same won’t work with your landing page. Having any kind of unnecessary junk (even external ads) that you don’t need can slow down speed. Keep it to a bare minimum, unless you really need to add it
13. Cache
I was very confused about this. When my phone-speed, including page-loading speed was slow, I cleared the cache and it got faster. Sometimes I logged into websites after using cache, it was way faster. It came down to one question, and Haseeb had answers to that.
A.K: Does cache reduce or increase page-loading speed?
H.I: It increases the loading speed. For example, if you’re visiting a wallpaper website, and you have to load 20MBs or more to view the page once. Okay. I visited the page and for the first time, my browser had to download 20MBs to view the page. If I don’t cache the page, then it will download 20MB every time I visit the site. But, on the other hand, I may as well be downloading one or a few MBs if it’s cached.
A.K: But why did my phone slow down before I had cleared cache? I insisted, my mind still reeling with curiosity.
H.I: Hardware that’s short on RAM may make your browser slower.
A.K: Oh.
H.I: Chrome takes the most memory than other browsers. It has more processes in the background and all the processes take up a lot of memory, but if my hardware is slow, then the lack of RAM would make Chrome a really big problem for me if there’s a lot of cache. It’s a long process if there’s lack of RAM. The sources should be optimal. It’s a hardware problem if the site is loading slow despite cache.
A.K: So what's CDN?
(censored for having been a detailed explanation that made my brain whir. Don't worry, you don't need to know about it for the agenda we have in this article)
If you’re applying all of the above, then you’ve got a killer page. If not, and if there has been any way you have been able to stop people from skipping away from your page, then this article has served its purpose!
