If your websites are experiencing response and performance problems, follow these steps to try to resolve the issues and make users smile.
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 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.
- 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.
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