Website Performance – Introduction
Now that your website is ready for launch, it is important to invest time and resources into the testing phase. This will ensure that the functionality of your content and assets is performing optimally and securely and meets the needs of your organization. You will learn more about the key considerations for website performance in this module, as well as methods to test the technical components and fulfill client expectations through showcasing a prototype. Reliable website performance can guarantee that the user experience is a positive one.
This module will cover the following topics:
- analyzing website performance
- website performance testing
- showcasing your website
By the end of this module you should be able to answer the following questions:
- How can you increase the likelihood of your web page being found by search engines?
- How can web server location and connectivity affect a website?
- What factors would cause a web page to be considered a “heavyweight”?
- What are prototypes and why are they useful?
Analyzing Website Performance
Learning Objectives
- Analyze website performance issues.
One of the aspects of website performance is its effectiveness in properly conveying information to the end user. This effectiveness can be impacted by development issues as well as deployment considerations.
Development Issues: Syntax and Titles
The HTML and CSS code quality may impact the effectiveness of the website due to problems with syntax. Despite code being read by a web browser, syntax mistakes can result in different renderings according to the browser brand and version. These syntax issues, coupled with browser brand and version, can potentially negatively impact the website’s performance. In some cases, the syntax issue may be as simple as using the tag <br/> to create a new line skip, instead of the HTML5 standard <br> tag. While most browsers should render correctly, but depending on the browser compatibility with XHTML the offending syntax issue may result in the incorrect processing of a web page. This incorrect processing may cause web site performance issues, and could potentially cause the web page to display incorrectly.
Another development issue that may impact the effectiveness of a website is the choice of web page title in the HTML tag <title>. Most search engines, like Google, base indexing on the page title. Therefore, choosing an appropriate page title that matches the key words and terms associated with the content of your website may increase your website’s visibility, and consequently its effectiveness.
Deployment Considerations
Deployment considerations, such as web server location and connectivity, also may impact website effectiveness. One common problem is the bandwidth and connection latency an end user may have when accessing your web server. This may be a consequence of the quality of the web hosting provider. Using lower-quality hardware, or having a lower-level web hosting provider may create performance issues for your website. Additionally, considering the average use of the website as well as any potential traffic spikes may be very important. For example, a website advertising an annual sporting event might have much different user traffic in the weeks prior to and during the event as compared with the rest of the calendar year.
Why is it important to select an appropriate web page title for your website?
Because search engines base search indexing on the web page title.
Correct! Search engines, like Google, base indexing on the page title. Therefore, choosing an appropriate page title that matches the key words and terms associated with the content of your website may increase your website’s visibility, and consequently its effectiveness.
Website Performance Testing
Learning Objectives
- Test website performance.
Understanding a website’s performance must include consideration for the end user experience, the manner in which the website renders, as well as the website’s overall efficiency.
Web page Efficiency
Web page efficiency is the time it takes for a web page to be effectively rendered by the browser. This is sometimes referred to by developers as the weight of the web page code. This analogy is used to describe the amount of time it takes for the web page to load; in other words, heavyweight implies a longer rendering period and lightweight implies a shorter rendering period. From a programming point of view, most of the web page weight is associated with the time complexity of the JavaScript (or other script language) contained in the web page itself. In addition, there are other factors related to web page efficiency including web page and media object load time. For example, loading a considerable number of images with high resolution may considerably hinder the web page efficiency, since such images may take a long time to download before being displayed. Interlaced images can help with the perceived speed of web page downloads as web browsers display such images progressively over several passes, with more detail being filled in with each pass as the data downloads and becomes available. The net effect is that individual images display relatively quickly at a reduced quality and then become increasingly clear with each additional pass. In contrast, non-interlaced images take longer to appear in the first place as the browser typically must download half of the image’s data before they display anything.
The basic work-around solution for such a problem frequently requires the use of low-resolution images (thumbnails) that act as hyperlinks to specific web pages that contain one single high-resolution image to be displayed. For videos this is even more sensible, since most videos tend to be much larger than images or audio files. Another important aspect of web page efficiency is the weight of certain HTML/CSS commands, since the rendering of the page itself may be an issue for some browsers running on slow devices.
In order to display a web page, multiple calls must be made to the web server to download all of the files needed to render the page content. The speed and performance of the web page is negatively affected by the number of such calls that must be made. It is, therefore, possible to improve web page performance by caching static files, (files that do not change often) so that they do not have to be downloaded again every time a web page that links to them is displayed in the browser. The browser can, rather, use the locally cached version without initiating a new download.
It is important to keep in mind that many aspects of web page efficiency are strongly dependent on internet connection and web server hardware, including both bandwidth and latency. An adequate web page design must take into account which kind of end users the web page is intended for in terms of:
- bandwidth:
- Are the users accessing the website through wired or wireless connections?
- Are the users accessing in the “field” or in a fully connected environment?
- geographic distribution:
- Are the users usually located within the same Local Area Network (LAN)?
- Are they within the same country or continent?
Depending on the expected connection quality of the end users, it is best to keep the web pages as light as possible. There are useful, internet-based evaluation tools that can assess website efficiency. To explore a couple of examples of website efficiency testing, visit either the GTmetrix website (opens new tab) or WebPageTest website (opens new tab).
Watch “Web Performance Optimization (WPO)” (opens new tab) in the course Learning Enterprise Web Application Performance from LinkedIn Learning.
This video teaches you about web performance optimization, its impact on users, and how it translates into business transaction success.
As you watch, consider the following questions:
- What two user experience factors are influenced by web performance optimization?
- website loading – purchase likelihood
- What influence does evolving technology have on web performance?
- makes it faster
Showcasing Your Website
Learning Objectives
- Plan oral presentations of your website, during and after site development.
When developing a website, it is often required to present your plan for approval prior to implementation. However, since a website is already something intended to be displayed visually, a common mistake from developers is to prioritize the full website development ahead of a conversation with stakeholders highlighting the website’s intended use, features, and structure.
Prototypes
A common technique for showcasing your website relies on developing a working prototype that usually conceals programming features (e.g., JavaScript commands and coding language) and focuses on the visual design aspects and navigation. Such a presentation prototype is often called a mockup. It is important to remember that the development of a prototype is also advisable to try out technical aspects such as complex HTML/CSS features. Other important industry standards, such as the use of a menu tree, breadcrumbs, and site map must be present in the mockup since they allow a clear perception of the website navigation experience.
Cao (2017) recommends three ways to build a website prototype and considers the advantages and disadvantages of each. Review the table to learn more approaches to prototyping your web design.
| Prototype Method | Advantages | Disadvantages |
|---|---|---|
| Presentation Software | Slide presentations are simple to use and easy to createDisplays a consistent sequential user flow | Limited to more basic functionality; no complex user navigationLimited interactivity for userRequires software |
| HTML Code | Code is platform agnostic and doesn’t require softwareLow costCuts down on development time, since code can be reused during implementation | Limited creativityRequires technical skillTime intensiveNo collaboration or feedback mechanism |
| Prototype Software and Apps | Enables advanced user flowsExports to multiple formatsAllows collaboration and feedback | Requires Platform FamiliarityHigher Cost |
Website Performance – Summary
Ensuring proper functionality, especially as it relates to optimal user experience, is a key step in web development. During this module, you were introduced to the key considerations for testing website performance throughout the web page life cycle. This included understanding common website performance issues, viewing performance through the lens of efficiency, and showcasing early mockups of your website with clients and stakeholders. You explored common performance issues in relation to both development and deployment. Next, you read about the factors that influence the overall efficiency of a web page including understanding the weight of web page code and media object size. Finally, you discovered the importance of showcasing your website by prototyping its key design features and functionality.
During this module you learned the following:
- how proper HTML syntax can improve web page performance
- how hardware decisions can affect website performance
- how the size or weight of a page can affect performance
- The three different prototype methods
- presentation software
- HTML code
- prototype software and apps