Everyone loves an awesome little running animation, but when that animation continues for two or more minutes, it draws attention to the fact that the website is running slowly, and that can be a website killer.
Customers expect sites to load efficiently and quickly. It’s your job to ensure that the design is not only visually attractive but also 100% functional. If your website is loading significantly slower, don’t worry. We have eight tips to help speed up your site with minor adjustments to the design.
(Make sure to visit each of the sites displayed in the article; they look fantastic and load lightning fast.)
Be Mindful of Animations
Animation in site design is one of the “it” trends of 2015. Don’t make huge files that just won’t load. When you start working with this kind of effect, begin with smaller animated details once you have a good sense of how they work and operate within your overall site construction, and then move on to bigger animations.
The key to animations is not to load too many video files onto your site. The smaller the animation, the easier it is to create something with a small footprint. Where do you start?
Optimize Images
With retina displays available to users and the amount of HD, you may be tempted to fill all your pictures as full-size at high resolution when you’re designing your site. Don’t fall into this trap. Most of these images are probably too large for your website to handle efficiently.
Use Code Where Possible
You may be tempted to create a few pictures and great designs as individual components for your site and then load each one. This can cause some problems. Instead, use code where possible to call these elements.
Use CSS to load background images as well. This will “force” your website to load everything else in front of the background, so customers can start seeing text and other elements on the page immediately. W3Schools has a great and simple guide on how to do this.
Keep Videos Short
Another trendy website design component is the use of full-screen video on your website. This can be another load-time trap. You’ll end up stuck between speed, video content, and video quality and will have to make a compromise somewhere.
The best videos are super-short – a few seconds or a few cycles – so the action doesn’t stop. You don’t have to include other sound effects.
Consider the Theme
Remember that not all themes are created equal if you’re using WordPress or another content management system with a theme. While you will likely have more luck with a premium option – some of which allow you to “turn off” unused components – take a close look at the code and develop to ensure that’s not the thing that’s bogging down your site.
Watch Your Plugins
Do you have too many third-party or extension programs associated with your site? Are you actively using them all? Make sure to turn off unused extensions to improve performance.
WordPress users can take advantage of the Plugin Performance Profiler to see how they’re working and what extensions are active. This can help you eliminate or reconfigure these extensions and find and troubleshoot issues. (A common problem area is often social sharing extensions.)
Shrink, Compress, and Reduce
Minified files make smaller files and are the best approach when it comes to extensions. You also want to examine how the code was written within the site. For maximum speed, all the JavaScript should be included in one file, and all the CSS should be located in another file. (Another note: Where you place this code counts too. Link CSS to the top of the site and JavaScript to the bottom to improve your site speed as well.)