15 Quick Ways to Shrink Page Load Times

August 9, 2008 / Programming

While more and more people are using faster Internet connections, there seems to be less emphasis by web developers on optimizing pages for faster load times. We’re seeing more and more widgets and javascript-heavy pages that take a long time to load, even on fast Internet connections. It’s a breath of fresh air when a website loads quickly and cleanly.

Web developers sometimes neglect some simple rules when it comes to developing a fast website, which really hurts the user’s experience. Fast page load times are crucial for keeping users happy. This is especially true for ecommerce websites. Here are a few reasons why quickly loading websites are critical to the web developer.

  • Faster pages make a better user experience. The user notices page load times, either consciously or subconsciously. Load times are a lot like the kicker on the football team: they’re only noticed when they’re not good. There’s something refreshing about a snappy-loading web page.
  • It’s possible that page load times are directly associated with search engine rankings. Google has made it clear that they’re paying attention to load times when they’re indexing Adwords pages, so it wouldn’t be too much of a stretch to assume that page load times might be a factor in how sites are ranked.
  • Slow pages lose money - Sites lose money when users click away from a slow-loading website. It’s estimated that the ecommerce industry loses $1.1 to $1.3 billion yearly on slow load times.

Slow load times can be a killer to even the best web design. Here are some great methods and tools to ensure your site is running quickly and smoothly.

1. A basic site analyzer

There are a lot of these tools, but I’ve always used the Web Page Analyzer to check for general errors and seeing the “health” of my site in terms of load times. The analyzer shows tons of information about how many scripts you have, total file size, and many other things that factor into load time.

2. Pingdom

Pingdom is a nifty site that allows you to check for broken images and paths, as well as loading time for all of your images and scripts. Broken paths and images can be a major load time killer. For example, I ran my blog LifeDev through the pingdom checker, and found that I had 1 script and 2 images that weren’t loading because of bad paths. Once I fixed the errors, it split my load time in half

.

pingdom graph

Another nifty feature of Pingdom is being able to see the lengths of the different stages of loading. Pingdom shows a different color for each stage of the loading process, like initial connection, first byte downloaded and last byte downloaded, so you can see where the image or script is taking the longest to load.

3. Host files locally

While this may take a bit more bandwidth for your servers, you’ll gain a lot of speed by not having to go out into the web to find the image. Instead of using services like Flickr to host your images, put them on your own server and save the time spent for the browser to travel to flickr.com and download the image. Local files almost always load faster than external files

.

4. Use image heights and widths

Here’s a sample of a correctly tagged image with height and width tags:

<img src="images/mine.gif" border="0" alt="my image" width=”125″ height=”250″ />

Adding width and height tags to images can make a huge difference when the web browser loads the page. If the browser knows the width and height, it can go right on past the image and let it load in the background while it renders the rest of the page. If an image doesn’t have these tags, the browser has to wait until the image loads before it can go on loading the rest of the page.

5. Reduce widgets

It’s easy to forget that even though widgets are cool and add some functionality to a website, the benefits of having a slew of them on a page hardly outweigh the slow load times. If the site is down that is serving the widgets, it could keep your site from loading properly as well.

6. Use static caching

Caching is a There are many different solutions for caching. Essentially, caching is this: Taking pages written in dynamic languages like php and turning the result into a static web page. Web servers are incredibly good at serving static files. By turning your dynamic pages into static pages, you’ll reduce load on your server and greatly improve page loading times. Here are some great primers on caching for a few popular languages:

7. Accelerators

Dynamic languages typically have scripts that can help accelerate how fast the language is run. If you develop in PHP these scripts might help: , APC, Zend cache, Xcache

.

8. Firebug

Firebug Networking Firebug is a Firefox extension that offers tons of reporting tools for a Web site, right inside the browser frame. One of the main features of Firebug is the ability to analyze all the aspects of a given web page. It’s especially helpful for figuring out slow load times and

9. CSS shrinker

Css Clean Smaller external scripts like javascript and CSS can make a big difference in load times. Try using online services like CSS clean to take your CSS source and strip things like

  • white spaces
  • line breaks
  • remove unnecessary charachters
  • and many more things, depending on the level of compression that you’ll want.

10. Server from multiple domains

If you’re serving a lot of web objects on a page, it might be a good idea to utilize multiple domains for serving the content, like server.example.com, server2.example.com, etc. You can only have a limited number of connections sent to the web browser at a time. By using multiple domains (even if they’re using the same IP address) you can download objects at the same time, where on a single server you’d have to load one at a time.

11. Cut back on cookies

Much like in our diets, cookies should be cut back from if the goal is to have healthy page load times for our websites. Extra cookies that are set on the user’s browser adds time to each page load. Make sure that you’re only using the smallest possible number of cookies, and also try optimizing cookie usage

.

12. Use a different domain for cookie-free resources

In an attempt to optimize cookie usage, try using a different domain for resources that don’t need to have cookies set. This is helpful when you’re using top-level cookies (yoursite.com). Everything downloaded from yoursite.com will have a cookie attached to it. Sites can get around this by using a completely different domain to store the resources that don’t need a cookie attached to them. For example, Yahoo! uses the domain yimg.com to store their resources that don’t need a cookie attached to them.

13. Shrink your javascript

Js Shrink Much like you should reduce your CSS sizes (#9), it’s a very good idea to compress your javascript files as well. Using services like Dean Edward’s packer can strip out unwanted line breaks, characters, and other redundant code in your javascript files.

14. Combine javascript files

As a general rule, downloading lots of small scripts takes longer than downloading one large script. If you can combine your javascripts into one large file, you’ll see faster download times. The easiest way to do this (without using programming knowledge) is to physically open your javascript files and copy and paste all of the javascript into one file. However, this isn’t always the easiest option, so here are a few resources that show how you can merge javascript files dynamically.

15. Use a content delivery network

If you’re starting to get some serious international traffic to your website, it might be a good idea to start thinking about using a Content Delivery Network (CDN). CDNs allow you to use servers from around the world, depending on where the user is from. For example, it takes a lot longer for a user from Australia to download a webpage served from New York than it does a user from within the USA. Content delivery networks would recognize that the user was from Australia and would serve the page from a server within Australia, or close nearby. This results in much faster page load times.

Conclusions

Sometimes it’s easy to get carried away adding extra functionality when building a website. As a general rule of thumb with web development, less is more. Having less images, external scripts and widgets to load mean that your pages will load faster. A few small changes can make a major difference to page load times for the user. Remember: Quickly loading pages mean happy users.

Other Page Load Resources

Photo by paulwoolrich

About the Author:

Glen Creator of http://webjackalope.com

Editor of Web Jackalope.

Buy this author a coffee or beer


Promote this Post:

Enjoyed this post? Your vote is always appreciated!!

Digg / Del.icio.us / Stumble / Float!

24 Comments

  1. Richard X. Thripp  August 13, 2008 at 1:24 am

    #4 on image widths and heights could be clarified. Most browsers including Firefox will load all the text, but they won’t know the size of the images until fetching them. When you start reading a site and the text keeps jumping up, you know the missing image attributes are to blame. If they were there, the browser would show blank space equal to the size as a place-holder while loading. It can’t do that if it doesn’t know the dimensions.

    #3 is true, but local hosting will be slower if you’re on shared hosting to start.

    I didn’t know that using multiple domains would help. It seems like multiple connections would just mean two slow downloads instead of one fast one.

    Using few cookies and offloading them is interesting, and something I haven’t read elsewhere. I’ll try that sometime.

    This is a light article, but you’ve got a good start. Good subjects are Gzipping CSS and JavaScript (saves lots of space), combining CSS files (not just JS), Gzipping pages, caching them to avoid CPU overhead (WP Super Cache for Wordpress is good), the overhead of HTTP requests (one large image is faster than five small ones), image formats and compression, and inline vs. external CSS. (Inline CSS is done with a server-side include for easy updating.)

    When I created my URL trimming service, th8.us, I used inline CSS and compressed all the HTML to one line with no extraneous whitespace to make it as fast as possible. Google does this; their HTML code is an interesting mess. Quite efficient too, except for all the tables, though Gzipping minimizes bandwidth concerns.

  2. Luke Smith  August 17, 2008 at 12:00 pm

    Nice list. I especially like the point about leveraging other domains (possibly even vhosts from the same server) to avoid cookies weighing down resource requests.

    FYI,
    “6. Caching is a There are many different solutions for caching.”

    Some other things that are handy:
    * YSlow plugin for FireBug
    * If you are using a common javascript library to add fanciness to your site, you can likely ref the files from a CDN. YUI is hosted on Yahoo!’s CDN,/a>, and Google recently added CDN support for jQuery, Prototype, MooTools, and dojo libs via their AJAX Libraries API. YUI also uses a ComboHandler service on its CDN where you can request all the needed lib files via a single URI (#14 + #15 yay)
    * Use css sprites for common graphics

  3. Luke Smith  August 17, 2008 at 12:02 pm

    Wow, bad markup. That should have been:

    * If you are using a common javascript library to add fanciness to your site, you can likely ref the files from a CDN. YUI is hosted on Yahoo!’s CDN, and Google recently added CDN support for jQuery, Prototype, MooTools, and dojo libs via their AJAX Libraries API. YUI also uses a ComboHandler service on its CDN where you can request all the needed lib files via a single URI (#14 + #15 yay)

    Oh, for a preview feature ;)

  4. Luke Smith  August 17, 2008 at 12:04 pm

    oh, and another FYI, in #4, it looks like you didn’t escape the < in the img tag write up.

  5. Kent Johnson  August 17, 2008 at 1:40 pm

    YSlow is a great tool to analyze your web page performance…

    http://developer.yahoo.com/yslow/

  6. Gerasimos  August 17, 2008 at 2:01 pm

    Excellent tips. Thanx for that :)

  7. Rajeev  August 17, 2008 at 4:58 pm

    Very good post - thanks for consolidating these tips - most of these are scattered all over the web.

  8. rule-xdesign  August 17, 2008 at 5:13 pm

    great job! I really apreciated!
    regards from Argentina!

  9. Ad Manager  August 17, 2008 at 5:14 pm

    Firebug for Firefox can replace both #1 and #2. It can show both basic measurements and very detailed analysis. Another tip is making sure you’re hosting on a decent server, not some unlimited plan with thousands of other busy sites.

  10. Josh  August 17, 2008 at 11:32 pm

    How is hosting images locally faster? Considering most browsers are limited to 2 connections per domain, you could get a lot more concurrent downloads on the client by splitting content across domains such as flickr.

  11. Ozh  August 18, 2008 at 12:08 am

    Setting weight & height wont make images load faster.
    Storing locally absolutely won’t make things faster.
    #3 and #15 are mutually exclusive.

    This guide is BS, sorry.

  12. Ives  August 18, 2008 at 12:23 am

    Great tips. I also use Gzip to reduce some document sizes.

  13. acms  August 18, 2008 at 2:04 am

    thanks for sharing, very useful, but no database optimisation?

  14. Bodo  August 18, 2008 at 4:11 am

    A good summary - even if it does not contain anything new ;-)

    My worst problem is firefox loading resources unneccessarily. E.g. loading the style-sheet again on each page or requesting one image with multiple occurances in one document also multiple times from the server. This is especially annyoing on large lists with icons in each row.

  15. bernd  August 18, 2008 at 7:33 am

    hi,

    nice post.

    http://www.cssclean.com/ should be replaced with http://www.cleancss.com/

    For Python and Django a webframework for Python i can recommend to use “memcached” http://www.danga.com/memcached/. It really kicks asses and it’s also available for other languages.

  16. Nicholas Forneris  August 18, 2008 at 8:27 am

    #9

    http://www.cssclean.com/

    Goes to a carpet cleaner site.

  17. admin  August 18, 2008 at 9:10 am

    @Nicholas - Heh. Nice catch! :) I’ve changed it. However, clean carpets are an important aspect of web development that shouldn’t be taken lightly ;)

  18. andy king  August 18, 2008 at 12:34 pm

    Thanks for the mention of our Web Page Analyzer tool. We also just published a new book on Website Optimization by the same name from O’Reilly. Half of the book is devoted to improving web performance (CSS, HTML, Ajax, Advanced) and the other half is devoted to search engine marketing. More information available here at the book companion site:

    Website Optimization Secrets

  19. Aaron Barker  August 19, 2008 at 7:37 am

    First off, a mostly good list. Any post that is encouraging looking at performance is a good one =)

    But… I’m going to have to agree with a few of the comments above about a few points being incorrect.

    #3 “Local files almost always load faster than external files” I’ve never heard this and it doesn’t make any sense. A browser opens an HTTP connection to a site and downloads a file. If that file is sitting right next to the .html file it still has to make the request, wait for the server to respond, and download it. If the initial file was on the opposite side of the world, and the secondary file was on a server across the street, the secondary file would load much quicker. Proximity is the key here which you refer to with your CDN tip #15.

    #4 “If an image doesn’t have these tags, the browser has to wait until the image loads before it can go on loading the rest of the page.”

    This is incorrect. The page will in fact continue to load, but the layout will change as the images are downloaded and the sizes are discovered.

    If you have facts you can point to prove your points above I would love to hear them and will remove my foot from my mouth =)

  20. Nick C  August 19, 2008 at 12:40 pm

    I’m also not sure about #3. The only reasons I could think of this being slower is the extra DNS request, and opening a new HTTP connection to a different server, but given that both CDN and multiple servers would suffer from the same overhead, I don’t quite see the validity of the argument. Could you explain your reasoning?

  21. Matthias Mauch  August 20, 2008 at 1:08 pm

    The points 1 and 2 can also be done with the Safari 3.x Web Inspector. It’s similar like Pingdom and you can also display informations about the used images.

    Aside from that, nice list. I will try all if I have some time.

  22. niaher  August 28, 2008 at 10:07 pm

    Even though it is not the most valid info, it’s got some very nice points especially for beginners like myself. Thanks to the poster.

  23. zuborg  September 19, 2008 at 9:11 am

    I would also recommend this online free tool: http://Site-Perf.com/

    It measure loading speed of page and it’s requisites (images/js/css) like browsers do and shows nice detailed chart - so you can easily spot bottlenecks.

    Also very useful thing is that this tool is able to verify network quality of your server (packet loss level and ping delays).

  24. Mickael  October 1, 2008 at 3:31 am

    I have been struggling trying to hire a genuine carpet cleaner. I came across this site which really made things clear for me and helped…it is http://www.CarpetCleaningConsumerGuide.com.au It made all the difference to me and the carpet cleaning professional I hired really did a good job.

Post a Comment

Your email is never shared. Required fields are marked *

*
*

17 Trackbacks

  1. By Cómo reducir el tiempo de carga de un sitio | unblogged. A blog about nothing. Yeah, nothing on August 17, 2008 at 1:42 pm

    [...] de carga de un sitio Publicado por Pablo el 17 de Agosto de 2008 a las 16:40 0 15 diferentes formas de reducir el tiempo de carga de nuestro sitio web. Excelente artículo! ↑ Volver arriba Ver los comentarios de este post [...]

  2. By vBharat.com » 15 Quick Ways to Shrink Page Load Times on August 17, 2008 at 10:21 pm

    From vBharat.com » 15 Quick Ways to Shrink Page Load Times…

    Fast page load times are crucial for keeping users happy. Slow load times can be a killer to even the best web design. Here are some great methods and tools to ensure your site is running quickly and smoothly….

  3. By 15 טיפים לקיצור זמן טעינה של אתר אינטרנט | רויטל סלומון on August 18, 2008 at 2:14 am

    [...] הפוסט הזה מציע כמה שיטות בסיסיות ביותר לקיצור זמן הטעינה של האתר שלכם - החל מכלי בדיקה פשוטים המודדים את משקל העמוד, דרך טיפול בתמונות ושימוש בתוכנות לקיצוץ בסקריפטים וב-CSS. [...]

  4. By My daily readings 08/19/2008 « Strange Kite on August 19, 2008 at 5:31 am

    [...] 15 Quick Ways to Shrink Page Load Times | Web Jackalope [...]

  5. By Die Linkschleuder » Peruns Weblog on August 19, 2008 at 6:49 pm

    [...] 15 Quick Ways to Shrink Page Load Times - 15 Tipps um die Ladegeschwindigkeit von Websites zu erh

  6. By uglychart.com: a blog about stocks » Blog Archive » links for August 21st on August 21, 2008 at 2:00 pm

    [...] 15 Quick Ways to Shrink Page Load Times - [...]

  7. By Links, Verweise, was auch immer… (3) « eBooks, Unterfangen, Graphen, PHP-Klasse, pChart, Design, Themen, OldVersioncom « ajaveeb on August 21, 2008 at 2:47 pm

    [...] 15 Quick Ways to Shrink Page Load Times: Sehr interessanter Artikel zum Thema Komprimierung und Ladezeitverbesserung einer Website. [...]

  8. By Links For August 21st 2008 | .Net on August 21, 2008 at 11:53 pm

    [...] jQuery Timers jQuery: Animation for Dummies A Horizontal Layout Navigation Web Page Using jQuery 15 Quick Ways to Shrink Page Load Times Speed Up Your Web Pages By PreLoading, Caching… B2B Communication and Securing [...]

  9. By Links zum Wochenende - Ausgabe 2 | DotNetBlog der DotNet-Blog - von Sascha Baumann on August 22, 2008 at 2:02 am

    [...] http://webjackalope.com/fast-page-load-time/ [...]

  10. By Dicas de 18.8.2008 a 22.8.2008 — QueroTerUmBlog.com! on August 22, 2008 at 4:01 pm

    [...] 15 Quick Ways to Shrink Page Load Times - 15 maneiras de fazer uma página carregar mais rápido. Destaque para o item 4. [...]

  11. By Vote for this article at blogengage.com on August 26, 2008 at 12:18 pm

    15 Quick Ways to Shrink Page Load Times…

    Slow load times can be a killer to even the best web design. Here are some great methods and tools to ensure your site is running quickly and smoothly….

  12. By 15 Quick Ways to Shrink Page Load Times at Hobby World CH -BLOG- on September 2, 2008 at 3:50 pm

    [...] 15 Quick Ways to Shrink Page Load Times [...]

  13. By Link-Sunday: Milliardär werden, mehr Speed, Affiliate Einnahmen tunen, Nischwebsites - Nischenseiten, Nischenseite, Nische, To-Do-List, Off-Topic, Nischen-Ideen, Nischenblog, Eine - Geldkrieg on September 21, 2008 at 2:26 am

    [...] 15 Quick Ways to Shrink Page Load Times - 15 Wege um Ladegeschwindigkeiten zu senken [via Perun.net] [...]

  14. By Amazing web development articles of Summer 2008 - Morning Break on October 20, 2008 at 12:38 pm

    [...] 28. 15 Quick Ways to Shrink Page Load Times [...]

  15. By השפעת זמן טעינת עמוד על קידום אתר בגוגל | שאלות ותשובות בנושא בקידום אתרים AskPavel | AskPavel on October 26, 2008 at 2:09 am

    [...] 15 דרכים להקטין את זמן טעינת העמוד. [...]

  16. By Vale o Click! for outubro 26th through outubro 28th | Blog do .#43 on October 28, 2008 at 12:37 pm

    [...] 15 Quick Ways to Shrink Page Load Times - [...]

  17. By Testing update | point-blank 42/ on October 31, 2008 at 2:19 am

    [...] HTML, CSS and optimize [...]