So you want a site that has custom features, all the functionality in the world and maybe even has a cherry on top? Well, that might come at a cost – a slow-loading website that frustrates visitors and makes them click away. 40% of consumers expect a page to load in 2 seconds or less. 40% of these consumers will abandon a website that takes more than 3 seconds to load. Furthermore, slow website speed can result in 7% fewer conversions. So it seems that adding all the bells and whistles at the cost of a slow website isn’t really worth it.
Learn more about how adding functionality and custom design can be detrimental to your site’s speed and some sacrifices you may need to make in order to please both users, designers, and the site-speed tests.
The Issues
Design and functionality or speed? Sometimes, you can’t have both. Here are a few issues that come with designing a site and how it affects speed.
Images
Having a gallery of images, or even a few large images will decrease your site speed. Think of a full-width header image – it needs to show up clearly on desktop and mobile screens without distortion. This can be difficult to achieve unless you sacrifice the speed of your site. Now if you are using a slider for a header banner, multiply the image loads by the number of slides. A gallery layout allows users to click and open images to view in a larger size has to enlarge those images without distorting them. This can take a toll on site speed as well.
Video
Each embedded video on your site has to make a call out to a video service, such as YouTube or Vimeo. Each of these calls takes time to return and load the data onto your site. This back-and-forth of data will definitely slow down your site. Embedding a video to your site adds an additional piece of code to your page. The more videos you add to a page, the more search engines and internet service providers (ISPs) have to work to scrape and load the videos.
Fonts
Most websites will use fonts from either Google Fonts or Adobe’s Typekit. Each font and each weight needs to be loaded to be used within the page, adding to a list server communications even longer that the website is already performing.
Plugins & Theme
Having too many plugins will also bog down your site. The heaviest plugins are usually page builders that come with a theme. Most times it is necessary to use a page builder, so it is easier to make edits on the site without contacting a developer for simple changes. An alternative to using a page builder would have your developer build a custom theme, but that can be costly. Some plugins use a script on most pages in order to perform or display functionalities that aren’t out-of-the-box. Adding plugins for functionality and customization will help make your site stand out but could also slow it down.
The Solutions
To prevent these issues, it is best to sit down with your designers and developers to make sure everyone is on the same page and understands how design affects the development of your website, which in turn, affects the site speed. You can reset on priorities and you might find that functionality or speed can be compromised if that’s going to best meet the website’s overall goals.
Images
We will optimize images for what they are being used for. We’ll update a 1200×1200 image that will only be displayed at 400×400 max. This will reduce additional unnecessary load time.
Video
When embedding a video, we take quality and resolution into consideration. YouTube and Vimeo allow you to choose the quality of the embedded video. If it’s going to be a large screen or background video for a header, use a higher quality. If it’s a small embedded video, consider using standing definition.
Fonts
Designing a site using as little font options as possible will decrease load times for fonts. Having two font families and two font weights (bold, italic, semi-bold, etc.) can usually provide enough originality to your page when paired with complementary colors and proper sizing.
Plugins & Themes
Consider if it’s necessary to use a plugin to accomplish what is needed. Could writing a few lines of code or altering CSS address the functionality you’re trying to achieve? Plugins can be customized to find the right fit for your goals. Again, the key is to find the right balance with development so there’s nothing on the site you don’t need.
Got any other tricks up your sleeve for site speed? Join the conversation on Twitter!
Design and development can be a balancing act. But our developers are always up to the challenge and want to make a customized site but have it be as fast as possible. We’ll work with you to identify your goals for the site and find that perfect balance. Talk to Buhv with any questions you may have and get a site that’s fast and functional!
Need help planning for your new website? This guide has planning tips, a helpful worksheet, and insights by industry.
