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
bottlenecks.

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
    serve cookies.

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
connections.

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
latency issues.

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.

  • Optimize
    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.
  • Remove
    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.
  • Total
    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.
  • Leverage
    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
    website performance.
  • Minimize
    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
    include using JavaScript or Meta redirects. Redirects should be used at a
    minimum to cut out the round-trip times.
  • Remove
    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.

Additional resources

You can dive deeper into this topic by reading five TechRepublic articles
and by checking out the two Google Developers resources I list below.