Decreasing Web Page Load Times

Optimize Your Images

Know when to use the appropriate file format for your images. Changing to a different file format can dramatically decrease the file size of an image.
  • GIF is ideal for images with few colors like logos.
  • JPEG is great for images with lots of colors and details like photographs.
  • PNG is the choice when you need high quality transparent images.

Compress and Optimize Your Content

The task of compressing your website content can have a huge impact on reducing load times. When using HTTP compression, all of your web page data is sent in a single smaller file instead of a request that is full of many different files. For more information, see this Wikipedia article on HTTP Compression.
You can also optimize and compress your JavaScript and CSS files by combining them and minifying the source code.

Put Stylesheet References at the Top

Moving your stylesheet references to the  of your HTML document helps your pages feel like it is loading faster because doing so allows your pages to render the styles progressively. In addition, it doesn’t hurt that it’s the W3C standard. 

Put Script References at the Bottom

Browsers can only download two components per hostname at the same time. If you add your scripts towards the top, it would block anything else below it on the initial loading of the page. This makes it feel like the page is loading slower.
To avoid this situation, place script references as far down the HTML document as possible, preferably right before the closing  tag.

Place JavaScript and CSS in External Files

Minimize HTTP Requests

Use CSS sprites to combine multiple images.
If you have multiple stylesheets and JavaScript libraries, consider combining them to reduce the number of HTTP requests.

Cache Your Web Pages

If you use a content management system that dynamically generates your web pages, you should statically cache your web pages and database queries so that you can decrease the strain on your server as well as speed up page rendering times.

Missing Assets

Missing CSS and javascript files means the browser has to needlessly communicate with the server to grab files that don't exist. Depending on where the server is and how many files are missing, that could add up to slower page loads.



Comments

Post a Comment