The document discusses various front-end issues that can affect website performance, such as HTML, CSS, JavaScript, images, and third-party content. It provides examples of common problems like slow loading times, missing links, incompatible code, and outdated files. The document then recommends using a website monitoring tool like SolarWinds Web Performance Monitor to identify and address such issues. The tool allows monitoring page load speeds and individual transaction steps from multiple locations, setting alerts, and using image matching to check image loading.

1. 1
How to Monitor & Identify
Website Issues
© 2013, SolarWinds Worldwide, LLC. All rights reserved.

2. 2
Front-end Issues in Websites
» Website performance issues can come from anywhere: the
page elements or the back end supporting infrastructure
HOW TO MONITOR & IDENTIFY WEBSITE ISSUES
2
Let’s take a look at
website performance
issues that occur in
the front end

3. 3
Common HTML Issues in Websites
• Takes longer than usual to process, causing websites to
load slowly
• It can happen if there are poorly written queries, or if the
server does not have enough physical or virtual memory
HTML Requests
• If there are HTML typos or in cases of non-compliant HTML
tags, the webpage would be displayed with errors
Non-compliant
HTML Tags
• Files and images are uploaded but not linked in HTML
• Because of missing links, images do not get displayed in the
website
Missing Links to Files
and Images
3
HOW TO MONITOR & IDENTIFY WEBSITE ISSUES

4. 4
Root Cause to CSS Issues in Websites
Inappropriate
CSS Reset
Leads webpages to render differently, so the layout and format might
appear different on different computer screens
Color Names Using color names incorrectly causes a webpage to display text in wrong
or different colors
Long CSS Code Lengthy CSS code will only mean that your website is going to take a
longer time to load
Failure of Page
Elements
Images, graphics, and page layout can sometimes fail to load or take an
unacceptable amounts of times to load completely
Text and Image
Style Elements
Failure to set correct parameters for text and image elements in Web
pages can cause them to display in smaller fonts and shrunken images
Location
Specific Issues
CSS files and its elements look different depending on physical or
geographic location
4
HOW TO MONITOR & IDENTIFY WEBSITE ISSUES

5. 5
JavaScript Issues You May Encounter
5
Server
Performance
• Momentary server hiccups may result in incomplete code being
sent to the browser
Third Party
Sites
• If you query a third-party site without having it load
asynchronously, you will likely have JavaScript issues on your site
Corrupt
Cache File
• This can cause unstable application performance and random
error messages that pop up in the browser
Outdated
Files
• The browser might be using an outdated version of one or more
JavaScript files from its cache
Other Issues
• The scripting engine, video card drivers, or Direct X controls
could be corrupt or outdated
HOW TO MONITOR & IDENTIFY WEBSITE ISSUES

6. 6
How Third Party Content Affects Website
Performance
Website Plugins
• Embedded Flash® movies, audio, or video in your Web
application sometimes won’t run correctly with
JavaScript
Content View
• Some webpages use Java applets for interactive content
like online games
• If the Java plug-in isn’t installed, then the browser won’t
be able to run the applet and interactive content can’t
load
Ads
• Live ads in a web page that pull data from a third party
site will cause performance issues in websites
Live Content
• Live third-party content like, game scores or a stock
ticker, will constantly refresh the page with the latest
updates
• This can affect other page elements and slow their load
times
6
HOW TO MONITOR & IDENTIFY WEBSITE ISSUES

7. 7
How Images Brings Down Website Performance
Images
Load but
Looks
Incorrect
Happens when you use a web
accelerator software which
reduces image quality
Pathnames to
Image Files
Image
Permissions
Some browsers prevent certain
websites from loading images
just to increase load speed
Cache and
Cookies
Plugin
Issues
Some plug-ins installed in the
browser allows images to load
only on the very first viewing.
They may not load during
successive visits to the same
page, even after refreshing
Internet
Security
7
A corrupt cache file or cookies can
sometimes prevent images from
loading
Antivirus, firewall, and other security
programs may block images and
prevent them from loading
Images that contain backslashes in
their URL might have issues
displaying in the browser. This may
vary from browser to browser
HOW TO MONITOR & IDENTIFY WEBSITE ISSUES

8. 8
8 Tips to Identify & Monitor Website Issues
•Monitor and alert page elements and load times – ex: monitor
how long it takes for content within Web pages to load
•Use for HTML, third-party, CSS issues
Page Element Load
Speeds
•Use image matching to monitor the number of seconds it takes
for images to load
•Use for HTML, third-party, image issues
Time It Takes
Images to Load
•Use image matching to validate if the image is displayed as
intended
•Use for HTML, JavaScript, image issues
Validate Image
Display
•Play back Web transactions from multiple locations and see if
the page is actually loading content as intended
•Use for HTML, third-party, CSS issues
Monitor From
Multiple Locations
8
HOW TO MONITOR & IDENTIFY WEBSITE ISSUES

9. 9
8 Tips to Identify & Monitor Website Issues (continue)
• Monitor response times for SQL queries will show if the query is taking a
longer time to process
• Use for HTML issues
SQL Query
Response Time
• Monitor the server’s virtual and physical memory capacity so requests can
be processed with speed
• Use for HTML, third-party, image issues
Physical or Virtual
Memory on Server
• When you’re building the website, you can monitor the logic of the code
by recording transactions that involve JavaScript code and verifying their
functionality
• Use for JavaScript issues
Verify Functionality
in Development
• Make sure you do QA testing on multiple browsers to ensure JavaScript
has the desired effect on all browsers your application supports
• Use for HTML, third-party, CSS issues
Browser
Compatibility
9
HOW TO MONITOR & IDENTIFY WEBSITE ISSUES

10. 10
Learn How SolarWinds
Web Performance Monitor (WPM)
Can Help Monitor Front End
Issues in your Websites
HOW TO MONITOR & IDENTIFY WEBSITE ISSUES

11. 11
Monitor Website Performance from Multiple
Player Locations
11
» SolarWinds
WPM allows
you to play
back
recordings
from multiple
locations to
gain insight
into the
global user
experience
HOW TO MONITOR & IDENTIFY WEBSITE ISSUES

12. 12
Easy-to-Use Transaction Recorder
» SolarWinds WPM allows you to quickly and easily record complex multi-
step transactions with no scripting involved
12
HOW TO MONITOR & IDENTIFY WEBSITE ISSUES

13. 13
Monitor Individual Steps of Website Transactions
13
» SolarWinds WPM
keeps track of
each website
recording step as
a separate event,
and allows you to
 Monitor each
step in a
transaction
 See the historical
availability for
each step in the
transaction
 Quickly identify
all steps with
problems
HOW TO MONITOR & IDENTIFY WEBSITE ISSUES

14. 14
Transaction Alerting/Notifications
14
» SolarWinds WPM
allows you to set
custom thresholds for
transactions and
discrete steps
» You are also
automatically notified
when a transaction
fails, or is incomplete,
or slow
» You can receive
notifications in many
different ways,
including email and
text
HOW TO MONITOR & IDENTIFY WEBSITE ISSUES

15. 15
Image Matching
» Monitor image and file load times
 Use image matching to monitor the number of seconds it takes for images to load. This will tell if the
image loaded within the specified time and whether or not the Web transaction passed or failed
 Use image matching to validate if the image is displayed as intended
15
Image match will
allow you to edit load
times for images in
your Web page
HOW TO MONITOR & IDENTIFY WEBSITE ISSUES

16. 16
Helpful Resources
16
We invite you to learn more about SolarWinds Web Performance Monitor
--- Click any of the links above ---
Explore the FEATURES
of SolarWinds WPM
• Continuously monitor your end-users’
experience
• Monitor any Web application, whether
internal (behind the firewall), external
(customer-facing), or cloud-based
Play Video
SolarWinds Web Performance Monitor
Play Webcast
HOW TO MONITOR & IDENTIFY WEBSITE ISSUES

17. 17
Thank you!
HOW TO MONITOR & IDENTIFY WEBSITE ISSUES