6 Tips for Performant Design
Internet users know what they want, and they want it now.
If your users are delayed, even for a second, they will be more likely to abandon your site. Almost half of consumers expect pages to load in two seconds or less, and 40 percent will abandon a page if it takes more than three seconds to load. Think about the work you put into great design and content creation – all for your loading speeds to kill conversions!
Sometimes developers feel they have to choose between visually engaging design elements like high-res photo and video, and fast page loading speeds, but it’s possible to have both. There are plenty of ways to ensure your design elements don’t slow down your website.
Below are six tips to implement performant design elements on your website.
1. Optimize CSS
Your website accesses the page’s CSS, or style requirements, either via an external file that loads before the page renders, or inline through the HTML code. Generally, an external CSS file will load more quickly than inline CSS because the code is cleaner. It reduces the page’s code size and there are fewer code duplications.
2. Compress images
Large, high-resolution images delay page-loading speeds. Fortunately, there are many free and paid compression tools that make images smaller without decreasing the image quality, making the compression invisible to users. Optimize your images before uploading them to your site.
3. Employ lazy loading
Once you’ve optimized those images, utilize lazy loading. Lazy loading defers initialization of an object on your page until it is needed. A lightweight placeholder image will load with the page, but will be replaced with the fully loaded image once the image scrolls into view. This reduces the page load time, and reduces data usage for mobile visitors.
4. Use external hosting platforms for media
When you’re ready to add video content to a page, resist the urge to upload the video directly to your site. Videos hosted on your own server eat up a lot of space, and if multiple users are watching your video at the same time (an ideal scenario!), they may experience lag. Instead, upload your video to a hosting site like YouTube or Vimeo, and then embed the video on your webpage.
5. Use system fonts, not custom fonts
Downloading custom fonts uses 200-500ms on 3G connections. Using system fonts allows the device to handle font rendering, so text loads immediately. Variable fonts allow you to still utilize interesting typography without making the user’s device download multiple weights.
6. Make users feel something is happening while waiting
Do you ever change lanes in traffic knowing you won’t go substantially faster, but at least it feels like you’re moving? That’s how users want to feel when waiting for your page to load. If users need to wait for some content to load, add a skeleton. Skeleton screens are content placeholders used to construct a preloaded version of the page while the content is loading. Avoid the dreaded spinning wheel, which doesn’t help users know how soon their content will be ready. Instead use brief animations that demonstrate that progress is occurring.
Improving your site speed requires knowing how fast your site is. Implement these tips and regularly test your website’s speed to ensure your users aren’t frustrated by their experience.
Talk to IDMI.Net today to learn how we can help you improve your website’s performance while maintaining excellent design.