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