You can use tools such as Google Developers Chrome DevTools, Web Page Analyzer-0.98, and Pingdom website speed test to identify issues that often cause slow website response and poor performance. I focused on these free online products in my previous article “Free Diagnostic Tools for Website Performance and Response Problems”.
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. Inline styling within thewill 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 theand just before the closingtag; 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 anycontent 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