If your websites are experiencing response and performance complications, follow these steps to try and resolve the issues.
You can pinpoint the problems that normally cause slow response and reduced performance for websites by using a tool such as Pingdom Website Speed Test.
Once the diagnostic tool has identified 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 slow response times and/or the under performing of websites. I then describe how to eliminate or at least decrease them.
You want to make your website accessible to all types of users, and while it may seem outdated, there are still numerous users who rely on 56Kbps modem connections to access the Internet. Goals and thresholds for optimization ought to rely on standards that allow for the fastest load times on the slowest user connections.
Improve website network utilization
The items listed below are usually known to cause network utilization issues for websites, and the recommendations will help to minimalize these known bottlenecks.
Cookies: Although cookies are very valuable tools for websites, they are also known to slow down response times. Best practices for handling your cookies are:
- Reduce cookie file size by keeping them as small as possible — 3000 bytes (or fewer) each if possible.
- Eliminate needless 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 website images by using the following guidelines:
- CSS sprites can be incorporated by grouping multiple images into a single file, and then placing them within your CSS to help reduce the number of requests.
- Data URI brings a way to include data in-line and permits normally separate elements such as images and style sheets to be called in a single HTTP request rather than from several HTTP requests.
- Specify the width and height in the code of the actual image size, as resizing (compressing) images that are larger than the coded sizes will take longer to render.
HTML files (total size): Keep your overall 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.
Number of objects: Try and keep the total number of objects on each HTML web page document to 20 or under. The greater number of objects you have, the more latency can be expected, which will slow down response times. Object overhead contributes to more than 80% of page latency issues.
Objects (total size): Try and keep total webpage file sizes to 100K or under to ensure that load and response times will remain under 20 seconds for 56K connections.
Web page performance improvements
These items will help to increase webpage load and response times which will give your visitors a much more appealing online experience.
Optimize the order of CSS and script files: Be sure to link calls to external CSS files in parallel and include them in the <head>. Inline styling within the <body> will also slow down rendering, so make 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.
Get rid of unused CSS rules: CSS rules that are not used by the web page adds needless overhead, which would need to be loaded first, before any of the <body> content.
CSS files (total and size): Combining your CSS into one file and minifying the CSS will go a long way to optimizing style sheet load times. Combine, refactor, minify, and GZIP compression are all good ways of optimizing your CSS.
Script files (total and size): It is easier said than done for certain implementations, but try and combine your script <script> files into as few as possible (as each external script file will add more overhead to your webpages). Optimization methods for script files include the same options as CSS (combine, refactor, minify, or even embed scripts where relevant).
Leverage browser caching: Set an expiry date or a maximum age in static HTTP resource headers (which include instructions to the browser to load earlier downloaded objects from the local client rather than hauling them over the network) will make substantial 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., “?”).
Elude bad requests: Another feared resource hog quite similar to redirects is the bad request, “Not found” or “410” “Gone” responses which happen 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 due to external resources being moved or renamed.