As we have mentioned in previous posts, a great user experience leads to higher rates of conversion. Page speed—that is, the time it takes for a page to load— is a significant component of user experience, as we know that no one likes waiting for more than a few seconds for a page to load. According to Google’s research, nearly half of web users expect a website to load within two seconds or less, and visitors will leave a website if it takes more than three seconds to load. But page speed is important not only for the user experience but for Google’s ranking purposes as well. Google has indicated that page speed is one of the signals used by its algorithm to rank pages, and for mobile searches, page speed will soon be given even greater weight in determining ranking, as we’ve discussed on this blog.

Several factors can affect page speed. Some of these factors are beyond the control of the website owner or webmaster’s control; for example, your visitors’ internet connection speed. However, there are other factors that we do control and can easily optimize. Surprisingly, those factors have to do with common design elements present in many modern websites. Sometimes, a web page’s most common elements become invisible during the optimization efforts because they are so obvious. For example, every web user knows that images are an indispensable part of a website. However, images often account for most of the downloaded bytes on a web page. There is a direct correlation between page speed and page weight. Nevertheless, we still find many websites with unoptimized images. Therefore, images are usually the main reason behind website slowness.

In today’s online environment, image optimization is essential to ensuring a positive overall user experience and effective SEO. The basic rule of thumb is: don’t upload images in their original format. Here are three general recommendations to optimize your website’s images:

1. Reduce the file size of your images without sacrificing quality.
2. Specify the correct image dimensions.
3. Choose the right image format.

As we discussed above, page speed is heavily dependent on the images on the page. However, the amount of time a web page takes to fully load is not the only issue that arises with the use of images; you should pay attention to how the page “behaves” while it is loading as well. For example, have you noticed how the content of your web page changes and moves around while the page is still loading or you are scrolling down? Or images or videos that are not fully rendered when navigating between sections or pages? Although one instance might be merely a minor annoyance, in the aggregate, these issues can actually dissuade your visitors from staying on your website. Here are some other elements that can negatively affect page speed and the user experience:

1. Sliders

Rotating sliders (also called carousels or slideshows) have been a popular design trend in the past few years. A typical slider consists of a set of images with text that rotates in the header of the homepage. Sliders can be an effective way to showcase products and any kind of creative work (e.g., photography). However, sliders could make your web page load slower. For some law firm websites, slider images are the biggest images (maybe even the biggest files of any type) on their pages. Also, there is an ongoing debate over the use of sliders in websites due to their performance cost and effectiveness. According to one university study, only a surprisingly small 1% of visitors click on a homepage carousel, and most visitors only see the first slide. An issue with auto-rotating sliders is that the average time a web user is willing to spend on a page is typically far less than the time it takes to rotate through all of the images in the carousel.

If you decide that you need a slider on your website, it is crucial that you optimize it for speedy loading. We recommend using a maximum of five images (fewer is better whenever possible), and it is important to have them optimized (in other words, at least reduce their file size).

2. Animation Effects

When used thoughtfully, animation effects can enhance the user experience, but they can also take a toll on a website’s performance. Many designers rely on JavaScript libraries such jQuery to add animation to websites. If implemented incorrectly, JavaScript code can slow your website down, as it takes time for JavaScript to be loaded, interpreted, and executed. One of the main drawbacks of using JavaScript libraries to create animation effects is that you may end up downloading all of the possible components of the library when you may only need two or three (for example, a specific animation effect for a button). Modern browsers can animate elements with minimal costs to performance by using HTML5 and CSS3. Those animation effects are easily accessible, powerful, and fast!

IMPORTANT: If your website is one of the 5% of websites that still use Flash for animation effects, look for HTML5 and CSS3 alternatives.

Animation effects should not be used to make a website look flashy; animation should be used sparingly and only in support of user interaction. In other words, do not just animate something because you can. Used improperly, animation can annoy or frustrate users and can result in significant delays in loading pages. So as you are designing your website, be mindful of the effects animations could have on performance.

Remember to have a purpose behind every design decision. There should always be a good reason to have animation effects on your web page.

3. Custom Web Fonts

Custom web fonts are fonts that are not available on the user’s computer by default. As with other design elements, Custom Web Fonts can enhance the look/feel of a website and enhance the user’s experience. The disadvantage of custom web fonts is that they slow down our web pages by being large additional resources that have to be downloaded. Custom web fonts are also render-blocking, which means that until they have been downloaded, the web page will not display (render) properly. Render-blocking resources are one of the most common reasons a web page loads slowly. Thus, custom web fonts must be used with caution because they not only contribute to the overall weight of a page, but can also block the rendering of text and other elements on it. It might sound too technical, but you can easily recognize this side effect, particularly on mobile connections. It is that unwanted flickering effect which is a result of the browser displaying text in a default font, such as Arial, while loading the custom web font, and then re-rendering the text with the new font.

If you have decided that the benefits of a custom web font outweigh the potential downsides, there are a few ways you can mitigate the performance issues. For starters, don’t use more than two custom web fonts in a page, and use web-safe fonts whenever possible instead. Web-safe fonts are pre-installed fonts that vary somewhat depending on your device and operating system. For example, many operating systems use Arial by default, but also come with similar fonts such as Helvetica, Verdana, or Calibri. If you do use custom fonts, try to use fonts that are used by many other websites, so that a user may have already downloaded and cached the font in their browser. A list of the most common custom Google fonts by usage can be found here. Finally, save those custom web fonts for important elements of your web page such as the tagline or headings, where their use is likely to be more impactful.

4. Plugins

Plugins are software components designed to add extra features or functionality to your law firm website. However, having too many plugins on your website, or opting to use plugins that aren’t optimized, can dramatically slow down your website, negatively affecting user experience. Plugins have to load source code (CSS or JavaScript files) on every page, and some plugins have to make database calls to track user activity. The more database calls and resources required to load a plugin, the more slowly your website will load. Therefore, it is important to weigh the potential value of a plugin’s functionality against its performance effects on your website.

Other plugins could be performing many remote requests to external APIs from third party services. Any external request from your site in order to run can impact its performance. This is the case of the Google Maps API that allows you to display maps on your website. Google Maps can slow your website down if it is not implemented correctly. A quick and easy way to solve this performance issue is to insert a static Google map (in other words, an image) in your web page, and redirect the users to Google Maps every time they click on the image.

There is not a magic number for the maximum amount of plugins you should have on your website. The number of plugins is less important than their quality. We strongly recommend working with your IT team to check how your choice of plugins could affect your page load time.

5. Social Media Widgets

A strong Social Media presence can drive traffic to your law firm website, which is why Social Media Widgets (in the form of sharing buttons, counters, or feeds) can be useful. However, some social media widgets can delay the loading of your website content. Many social media widgets are simple JavaScript-based plugins that allow the retrieval and display of data from different social networks. As discussed in the previous point, sometimes a plugin that calls a third-party service could significantly impact site performance. They could also cause validation errors and security issues. Validation errors can have a negative effect on how your website will look and behave. Valid sites are more likely to look good on a range of browsers and devices.

Social media widgets are beneficial to your website when used wisely. We just recommend using only a few social media widgets (between 2 and 4). After all, it is not necessary to include widgets for social networks that you don’t really use or need (for example, Pinterest). In most cases, a set of social media buttons (social media icons that link to your social media sites) in the footer or sidebar will suffice. The next time you feel tempted to include a new social media widget in your website, consider first whether it will help to convert visitors into actual clients. It is important to include only social media profiles that you actually monitor. You may actually be discouraging visitors from following you if they discover that you are not posting frequently and do not maintain active communication with your followers. Another reason visitors might be discouraged is that they do not find the content in your profile relevant to them.

MOBILE USER EXPERIENCE

In this age of predominantly mobile web access, it is important to pay extra attention to your website’s performance on mobile devices. We must consider that websites usually load slowly on mobile devices due to low-bandwidth and high-latency connections of cellular networks. You should keep in mind that mobile users are not always connected to a high-speed internet connection at home or in the office. Mobile browsers also tend to be slow in comparison to desktop browsers. Thus, the overall user experience on mobile devices tends to be more frustrating if the website is not properly optimized. With more people using a mobile device to find information online, it is in Google’s best interest to tailor its search results to mobile users. They do not want to direct their users to sites that won’t load quickly on their devices. As a result, mobile user experience currently plays a major role in search rankings.

Mobile web users are notorious for their impatience. They still expect the same site load speed on their mobile devices as on their desktop computers. Therefore, we cannot simply apply the same old design decisions for desktop in this mobile era. As a good practice, we should reduce the number of elements that erode page speed such as large images and lengthy videos, web custom fonts, animation libraries, etc. If you compare the desktop versus mobile websites, you will notice that the mobile website usually has less content visible on the homepage. A good mobile website is clean and simple, yet still offers the same essential functions of the desktop version. And of course, you will want to have an AMP version of your Website hosted on Google’s Content Delivery Network (CDN).

One last piece of advice is to always test your website under similar conditions that most of the visitors to your website experience (for example, slow connection on mobile). Most websites are built on a desktop computer connected to a high-speed connection and tested on the same computer under the same conditions. Thus, the mobile experience will often be an afterthought.

CONCLUSION

Websites with good user experience are critically important for law firms because they can create a positive or negative impression of your brand and your services. If your website loads slowly, visitors may simply click over to a different site. Page speed is a critical element of running a successful website. Despite being aware of this, most web designers still do not make it a top priority. Instead, they focus on complex website functionality and sophisticated web design. With the latest Google speed update, if you haven’t been focusing on improving the performance of your website, it is best if you prioritize it now. The most common design elements on your website are always a good starting point for web optimization.

The post Five Design Elements That May Be Slowing Down Your Law Firm Website appeared first on Legal Marketing & Technology Blog.