Improving Web Response and Page Speed Time for UX and Interaction Designers

The responsibilities of being a web designer are important and filled tasks and activities that branch out in several different directions. The best designers understand load-time and optimization are an important part of the design process. When a site is too bloated resulting in slow page loads, it's highly likely that site visitors will look for another, faster website to get the information they need.    Studies tell us that vast high majority of web users wait a mere few seconds for a page to load. In fact, Nielson Norman reports, "Users often leave Web pages in 10-20 seconds, but pages with a clear value proposition can hold people's attention for much longer because visit-durations follow a negative Weibull distribution." It's crucial for every website to be able to load as quickly as possible. When we think of site speed from a design perspective, most think about optimizing images (only). Research and studies tell us that slower page response time are mostly attributed to server delays, the over-use of widgets and scripts, and using or referring to broken links. The users of today's digital world have a genuine disdain for slow sites, and they don't hesitate to seek services, products, and information elsewhere. In this post, we'll explore a few avenues web and mobile designers should be thinking about and using as they create their digital (and business) masterpieces.

Plugins & 3rd Party Integrations

Plugins are a great way to make a website more user-friendly; I use them in nearly ever solution crafted. For a designer, it's important to understand their intent, best practice use, and to keep track of the number of plugins being used on given page. Some plugins perform incredibly complex operations and may introduce or load significant amounts scripts. These types of plugins naturally have a higher number of database queries or asks for requests from external APIs, and it's recommended to take a deep-dive into the weeds of details to assess if the plug-in is "mission-critical" meaning, is it essential for the product and solution? Protip:  Catalog any plug-ins and integrations that may be used in your solution especially for large-scale and ecommerce sites. For each plugin, you'll want to track important attributes like resource (server) consumption and impact to page load. It some project cases, it helps to score and prioritize plugs. Depending on the scope, you may find that some plugs are required while others may be suitable for a later phase. Catalogs are in spreadsheet form and list categorized plug-ins for example:   MARKETING

• Marketo
• SalesForce
• Unbounce
• HubSpot  

SEARCH

• Elasticsearch
• Sphinx
• Solr  

APIs

• Amazon Product Advertising
• Youtube
• Brightcove  

SOCIAL MEDIA

• Twitter
• LinkedIn
• Facebook
• Instagram
• Sprout Social
• HootSuite
• Discus
• ShareThis  

METRICS

• Google Analytics
• Bing Analytics
• KissMetrics

JavaScript

JavaScript, one of the three-core programming languages in the world, allows us to get websites to perform in function and behavior, the way we want them too. JavaScript (not to be confused with just "Java") allows for client-side scripting meaning; it helps your website better interact with users while creating more dynamic content engagements and pages. As with plugins, it's important to know just how much JavaScript is running on any given page including, knowing what job that script is performing and the resources it's consuming to the job. Compacting JavaScript code can save data and speed up downloading, parsing, and execution time.  Example JavaScript Issues Impacting Page Speed:

• Render blocking JavaScript
• JavaScript that has not been minified
• Too many external scripts calling data for the site

CSS / CSS3

CSS or cascading style sheets give websites the ability to have a visual style or look-and-feel. Essentially, it's markup that, along with HTML / HTML5 outputs what you ultimately see when viewing a website. CSS can add to the overall load time of the webpage, so using shorthand, compacted or minified code is highly recommended especially in the case of larger sites (those with thousands of pages and more). Compacting or minifying CSS code saves several bytes of data including, speed upload, download, and parse times.  From a design perspective, assets such as UI Kits help front-end developers build not only consistent user interface patterns but more efficient ones. Designers interested in learning more about the impacts of optimized CSS you can find pretty comprehensive guide here brought to you by the leaders at Google PageSpeed Insights. Example CSS Page Speed Issues

• Render blocking external stylesheets
• Inline CSS rendering issues (or not inlining small / minified CSS)
• Large, inline data URIs (uniform resource identifiers)

Responsive Design

Now that millions of people are opting for their mobile-friendly devices over their desktop environment, web design solutions at a minimum should now be responsive. Responsive designs allow websites to respond and display seamlessly in any just about any environment. The best responsive sites are optimized end-to-end (front and back) allowing the site to be easily and quickly accessed from any mobile device. Responsive design, once a trend and now a mainstay, has even gotten Google to turn their heads and adjust how it searches, indexes and returns sites on search engine result pages. Google's search algorithm pays particular attention to sites who's content it readily available across desktop and mobile devices, moving these sites higher up their search results pages (SERPs) stack. 

Broken Links

In the world of Interaction Design, SEO, Digital Marketing and so on, broken links, sometimes referred to as "link rot" are hyperlinks that point to pages or resources that no longer available. Many websites have several different types of links living throughout their website and, at enormous volumes. When there is a broken link on any given web page, it leads to errors that will impact the site in a multitude of ways including, load times and search engine optimization. Search engines like Google, Bing, or Yahoo indexing broken links on a site it presumes the content is not of the best quality and therefore, not the best to return on their respective search result pages.  Broken Link Types:

• Internal Page Links (pages that exist on your www.domain.com for example, your own 404 pages)
• External Page Links (pages that your site refers to outside of your URL)
• Hyperlinks
• Image Links

Protip 1:  Pages are inevitably broken for different reasons so checking your website for any broken links on a weekly or monthly basis is highly recommended. To check if your site has broken links, you can use this simple tool from W3C. Protip 2:  Include Anchor or ALT Text in your links.  Including text for internal and external links helps search engines understand the relevancy of your content. Any links without anchor or ALT text is considered not viable for users by search engines.  

Images

Experienced designers understand the importance of optimizing images, and in many cases, this is the only element some designers focus on in their optimization efforts. Images can take a very long time to load if they are not optimized, especially if they're large images, so only use images that are completely necessary to the website. If the overall quality of the images is the main concern, then choosing to use JPEGs is highly recommended. If the images tend to consist of logos or signs, then PNG images work best here. If using a few smaller, simple images, then GIFs are recommended. Protip:  Designers should be aware of optimal file sizes and a few other optimization attributes like image title tags and ALT text. Well stacked teams may have an SEO Specialist on deck who will help to inform strategies and optimized copy. For teams who rely on designers with expanded skills, knowing what SEO fields are necessary and how they function contributes to shaping higher performing solutions.

Wrap Up...

As an Interaction and UX Designer, it is essential to understand the implications website speed and page load times against the design being created. Understanding this component helps us craft more comprehensive design strategies that move beyond the silo of "just design" and it's what helps designers beginning to think more in the realms of overall digital strategy.   To get some information on your websites page speed across desktop and mobile, run your websites URL into:  https://developers.google.com/speed/pagespeed/insights/

The key to better web response times is to first acknowledge the different optimization elements that must come together. By accounting for all points of optimization and access throughout the design process, we're able to achieve maximum results for both the business and its users.  -  June Parent