With smartphone adoption surpassing 80% in the U.S., users expect websites to perform as fast as their mobile apps. They won’t hesitate to leave your site for your competitor if it takes more than a few seconds to load. Having your website firing on all cylinders takes planning on your website’s infrastructure and discipline to optimize content.
How do you know if your website is underperforming? Some signs are readily apparent, such as high page load times, bounce rates, and abandonment. Usability testing can offer deeper insight into how your website measures up to the competition.
For example, on a college campus, usability testing could be done with students. Art students would judge the website’s design and presentation. Computer science students would judge the website’s functionality and performance. All other students fell somewhere in between. If the website didn’t perform in these categories, the competitor would seem more appealing.
While someone can view and compare services from three different colleges or products on a smartphone, it becomes tiresome to switch across browser tabs and then alternate with a note-taking app on a screen the size of your palm. According to a Smart Insights report, users rely on multiple devices to access information. Some devices are used more frequently than others, depending on the user’s position in the purchase funnel. For prospective students, this meant discovering new colleges and universities through their smartphones and then researching their majors and costs on a laptop.
To accommodate smartphones, laptops, and everything in between, I always recommend building a website with a responsive design. This approach relies on the screen’s width instead of the device type to deliver a consistent experience. Responsive design is one of many ways to improve your site’s experience, but it serves as a foundation for the optimizations below.
Optimize Content for the Web
This is one of the easiest optimizations to speed up your website. Optimizing your content entails compressing or even hiding certain content to reduce the amount of data being transmitted. This has a greater impact on the international market as the internet speeds can vary considerably or the devices may be a few generations behind and underpowered.
China is one of the largest markets in the world and is ranked 1st for most internet users. Despite its large population, China lags with an average of 0.13 Mbps in download speed and ranks 187th in the world for internet speed. This means a high-resolution 3MB hero image on your homepage would take roughly three seconds to load. According to a report from Google, a page-load time between one and three seconds increases the probability of a bounce by 32%.
Good quality visuals are powerful tools to give visitors an immediate impression of your brand identity. They range from illustrations emphasizing your tagline, a photograph showing authentic moments, or even videos playing a glimpse of your business operations. You can deliver them faster by compressing them into the appropriate format:
- Depending on your content management system (CMS), save your photos in different resolutions for each device—mobile, tablet, and desktop. Other CMSs may resize your photos automatically. A photo for mobile devices should have a smaller file size compared to desktop devices.
- If you have RAW images or are importing images directly from your camera, resize them to the content window dimension (generally under 1200 pixels on the longest side), and save them as a JPG file.
- If you have an illustration, such as a company logo, export it as an SVG or as a PNG file. However, SVG will provide the most flexibility as a vector graphic. This means your browser will use mathematical formulas and coordinates to draw lines, colors, and geometrical shapes that are scalable for any screen. File sizes are very lightweight compared to PNG files. However, some CMSes may not support or allow SVG files and may require extra configuration by the site administrator.
- For videos, have a plan to fall back to a photo/illustration in case the video takes too long to load or if it doesn’t load at all. As for compression, I typically lean towards H.264 compression and export it as an MP4 file to provide the most flexibility if I need to publish on different platforms, such as a kiosk or in an embedded video player.
- Minify the code on your websites, such as cascading style sheets (CSS) and JavaScript. These spaces make the code more readable to programmers but they are ignored by computers. There are many tools available online to remove extraneous whitespace, line breaks, and comments to reduce the file size.
Make Your Site Mobile-Friendly
Being mobile-friendly means your website should deliver a consistent experience from mobile to desktop devices. But this wasn’t always true: when mobile devices first took off in the early 2000s, there was little consideration for their website experience. A few years later, a dedicated browser was included with cell phones, but it wasn’t until later in that decade when mobile browsing became popular.
Around that time, developers created a solution to support all these different mobile devices and screen sizes. They introduced adaptive design to deliver a smaller version of the website to these users. However, this also meant designers would have to re-create the website’s styling for specific screen dimensions. For the most part, many smaller websites couldn’t afford to design multiple variations of their sites and continued to treat mobile devices as an afterthought.
To compensate for this omission, designers and developers began implementing a “mobile-first” approach in efforts to accommodate mobile users. This meant taking into account the limitations of a mobile phone’s display resolution, processor power, and internet speed. Once those parameters were set, they’d work on the desktop version of the website.
From the developer’s standpoint, it made sense to learn the constraints first (mobile device) and build outwards for larger devices. This ensured that content and layout wouldn’t break. However, some mobile-first websites went too far the other way to the detriment of desktop users—menus required the user to click more often instead of simply hovering to display the category options. These sites had narrow columns to fit long content, resulting in an awkward layout with unused white space on desktop monitors.
To make the designer’s life easier, developers created responsive design to specify screen ranges with rules on how the content should resize or reflow. This required less effort to code than adaptive design, but many of its issues remained as websites increased in complexity. We should continue with the best practices to reduce page load times and computations. The user experience in both mobile and desktop devices should not be sacrificed for the sake of the other.
Mobile devices are the future, and for some businesses, it’s already here. In the U.S., the number of mobile users hasn’t overtaken desktops until earlier this year. But for some B2B organizations, desktop users still make up a significant portion of their traffic. Like college students, these users will rely on their desktop to do their research and make comparisons against other products and competitors. Mobile is often used to reference specific information and short content.
We have different challenges today as the Gen Z population enters the workforce, increasing the amount of internet traffic. Websites are more complex with animations and videos. These and many other issues resulted in additional coding and larger file size to deliver across the internet. While some of these tips may be helpful to serve desktop users, they will provide faster page load time for mobile users:
- Employ AMP framework (Accelerated Mobile Pages) to preload content and remove unnecessary markup code for mobile devices.
- Optimize JavaScript libraries. You may need to consult a developer to remove unused features in the script, which reduces the file size and unnecessary computer processing.
- User server-side scripting to reduce server requests. With this method, scripts are executed faster from your device instead of a server far away.
- Use a Content Delivery Network (CDN) to copy your website to different servers around the world. The geographic distance between the server and the user affects loading times.
Make Content Readable to Machines
Search engines use natural language processing to better understand the meaning of your content. We can make their job easier by providing a consistent organization by following web standards. Examples of structured data include business hours and addresses. Instead of developing a new way to display content, follow the web standards for these common content types.
Search engines will index your content more accurately and faster. As a reward, they may feature your content on top of the results page, such as Google’s “People Also Ask” box or the right-hand sidebar results. You are essentially increasing your organic traffic for free by simply organizing your content and following best practices.
Structured data also allows voice assistants to answer questions in a spoken language instead of keyword fragments on the search toolbar. By understanding the meaning of your content, these AI-powered voice assistants can interpret your content in multiple ways to answer the user’s questions. The benefits extend to chatbot services when they crawl your content for common questions. Here are some resources to learn more about structured data:
- Schema.org has documentation for existing data structures.
- Test your schema with Google’s scheme validation tool.
- Social media platforms, such as Facebook and Twitter, have schemas to ensure your content displays correctly.
Turnkey Website Solutions
It can be a daunting task to consider all these parts that contribute to your website performance. With over a decade of experience, we employ these methods and much more at Mediacurrent so you can focus on your business. As a full-service digital marketing agency and open source expansion partner, we build websites to handle high traffic volume and develop strategies to increase your search engine optimization (SEO) rankings. We participate in the open source community by contributing code to Drupal.org and developing solutions for anyone to use.
By decoupling Drupal with Gatsby, combined with our partnership with Netlify, we have the formula to launch websites with fast load times and great performance. To top it all off, we are partners with Acquia and Pantheon to provide hosting solutions. The result is a website delivering at full speed with enterprise-level support.
Drupal’s interface can feel intimidating to some users. New content creators and large editorial teams familiar with the newsroom may find Contentful’s interface more natural. Their editorial embargo and the ability to write “once and publish everywhere” means that your team can coordinate product launch announcements anywhere in the world.
Get in touch with us to find out more about our approach to Drupal and how we tackled large website builds similar to your business or organization.