You can identify the problems that typically cause slow response and
reduced performance for websites by using tools such as Google Developers Chrome DevTools, Web Page Analyzer – 0.98, and Pingdom Website Speed Test. I highlighted these free online products in my previous article, “Free diagnostic tools for website response and performance issues.”
Once the diagnostic tools identify the issues, you need to know how to
resolve them. In this article, I list the typical resources, objects, elements,
files, and other problems that cause websites to underperform or show slow
response times, and then I describe how to eliminate or at least reduce them.
Remember that you always want to make your website accessible to the
broadest number of users, and while it may seem archaic, there are still many
users who rely on 56Kbps modem connections to access the Internet. Goals and
thresholds for optimization should rely on standards that allow for the fastest
load times on the slowest user connections.
Improve your website’s network utilization
The items listed below are typically known to cause network utilization
issues for websites, and the suggestions will help to minimize these known
Cookies: Although cookies are very
useful tools for websites, they are also known to slow down response times. Best
practices for managing your cookies are:
- Minimize cookie file size by keeping them as
small as possible — 3000 bytes (or fewer) each if possible.
- Eliminate unnecessary cookies, set them at the
appropriate domain level, and serve static content from a domain that does not
Images: You should optimize
your images for websites by using the following guidelines:
- CSS sprites are incorporated by grouping several
images into a single file, and then positioning them within your CSS helps to
reduce the number of requests.
- Data URI provides a way to include data in-line and
allows normally separate elements such as images and style sheets to be called
in a single HTTP request rather than from multiple HTTP requests.
- Specify the width and height in the code of the
actual image size; resizing images that are larger than the coded dimensions
take longer to render.
Total size of HTML files: Keep
your total HTML files size to less than 50K to help keep load times down to a
minimum and to ensure response times of less than 10 seconds for 56K
Total number of objects: Try
to keep the total number of objects on each HTML web page document under 20. The
more total objects you have the more latency can be expected, which will slow
down response times. Object overhead contributes to more than 80% of whole page
Total size of objects: Try to
keep total webpage file sizes to 100K or under to ensure load and response times
will remain under 20 seconds for 56K connections.
Improve web page performance
The following items will help to increase webpage load and response times
and will give your visitors a much better online experience.
the order of CSS and script files: Be sure to link calls to external CSS
files in parallel and have them included in the <head>. Inline styling
within the <body> will also slow down rendering, so be sure all CSS is
contained within the external CSS files. All script files should be placed at
the bottom of the <body> and just before the closing </body> tag; this
allows for progressive display of web page content.
unused CSS rules: CSS rules that are not used by the web page add
unnecessary overhead, which needs to be loaded first before any <body>
content is loaded.
- Total CSS
files and size: Combining your CSS into one file and minifying the CSS will
go a long way to optimizing style load times. Combine, refactor, minify, and
GZIP compression are all good means of optimizing your CSS.
script files and size: I know it is easier said than done for some
implementations, but try to combine your script <script> files to as few
as possible, as each external script file will add more overhead to your
webpages. Optimization techniques for script files include the same options as
CSS, combine, refactor, minify, or even embed scripts where applicable.
browser caching: Setting an expiry date or a maximum age in static HTTP
resource headers (which include instructions to the browser to load previously
downloaded objects from the local client rather than pulling them over the
network) will make significant improvements for browser response times and
redirects: When, for example, old webpages get renamed or moved to new
locations, a simple redirect points users to the new page or location; other options
minimum to cut out the round-trip times.
query strings in URLs from static resources: To enable proxy caching for
static resources, make sure the file name parameters are used in place of query
strings (i.e., “?”).
- Avoid bad
requests: Another dreaded resource hog quite similar to redirects is the
bad request or “Not found” or 410 “Gone” responses that occur
when your front end code has not been updated to reflect objects or resources
that have moved or have been renamed. I don’t know how many times we have had
to run a “broken link” check on websites and microsites because
external resources get moved or renamed.
You can dive deeper into this topic by reading five TechRepublic articles
and by checking out the two Google Developers resources I list below.
- Best practices: Optimize web images for search engines
- Does your website need a browser diet?
- Considerations for creating your web caching policy
- How to create optimized and accessible PDFs for your website
- Five mobile site performance challenges (and how to fix them)
- Google Developers – Optimize Caching
- Google Developers – Minimize Redirects