Everyone is so quick to jump all over a shiny website with a lot of bells and whistles without realizing the effect it is having on the overall experience.
Have you ever seen those mouse tracking balls/pointers some websites have these days? Those from the early 2000s are having flashbacks!
Having a lot of unnecessary effects, animations, and media files on your website pages will certainly affect your website’s performance and speed. Once the performance and speed take a hit, then your search engine rankings also take a hit.
Here are some bottlenecks I have noticed being used on websites recently:
.JPEG or .PNG Images: .JPEG or .PNG images are massive in size. They can dramatically affect your website’s load times. Instead, convert these images into .WebP format. Every modern web browser supports this format and cuts the overall size dramatically.
Solution: Use Photoshop or an online image conversion service to convert your existing images to WebP format. We ran a test on an image of our own, the original .PNG was 1.49MB and the same image with the same quality was 24.3Kb in size.
Intrusive Pop-ups: Pop-ups play a huge role, however if done incorrectly then it simply affects the overall experience. Ensure the pop-ups are responsive and have an accessible close button. Nothing worse than having a pop-up asking me to join the website’s mailing with a close button that is missing from eyesight or behind a scroll.
Solution: Ensure the close button has an “absolute” position and a z-index higher than everything else on the page. You also need to ensure the close button is not within a block that is scrollable, the button might hide until you scroll if that is the case.
Excessive Animations/Effects: Animations and CSS / JavaScript effects are beautiful and masterpieces of art when done correctly. One simple mistake designers make is by overloading the page with animations and effects without testing them on a lower performing device. Every animation/effect will work flawlessly on the latest iMac, however folks on older devices (think older PCs or older phone models) will have a tough time. You do not want your users to experience page freezes when trying to scroll through a page.
Solution: Assess your animations or effects on Chrome through the dev tools toolbar. At the top, there is a throttling option. Test it out on both the mid-tier and low-end mobile options.
Complicated Navigation Menu: Always evaluate your menus for both desktop and mobile compatibility. Many of the popular CSS frameworks have built in technologies which you can easily hide/show different menus depending on screen size. For example, there is no need to show a menu which has the menu item title, description, and an icon of the menu item on a mobile device.
Solution: If you’re using Bootstrap for example, you can simply the following classes to your element to only display the content on mobile and hide on every other display size: “.d-none .d-sm-block .d-md-none”
There is a lot more that goes into a website’s feel and functionality beyond the good looks and shiny images. Having a slow or low performing website can be very harmful to your website and overall website experience. You don’t want to lose business over something that is fixable. When we enlisted Vemlo to develop our AI logo generator product, they outlined these items and many more before we even had a chance to mention it to them. If you’re building your own website, make sure you follow these steps closely. If you’re having someone else build it, make it clear to them that optimization is critical to you.
Testing Your Live Website
Once your website goes live, we strongly suggest you run a test on it through Google’s PageSpeed Insights tool. The tool will give you a detailed breakdown on the overall web page’s performance and make recommendations on performance optimizations.