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
.
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 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
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
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
- Best practices for speeding up a website by Yahoo!
- Optimizing page load times
- Serving Javascript Fast
About the Author:
Promote this Post:
Enjoyed this post? Your vote is always appreciated!!
34 Comments
Leave a comment
#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.
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
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
oh, and another FYI, in #4, it looks like you didn’t escape the < in the img tag write up.
YSlow is a great tool to analyze your web page performance…
http://developer.yahoo.com/yslow/
Excellent tips. Thanx for that
Very good post - thanks for consolidating these tips - most of these are scattered all over the web.
great job! I really apreciated!
regards from Argentina!
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.
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.
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.
Great tips. I also use Gzip to reduce some document sizes.
thanks for sharing, very useful, but no database optimisation?
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.
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.
#9
http://www.cssclean.com/
Goes to a carpet cleaner site.
@Nicholas - Heh. Nice catch!
I’ve changed it. However, clean carpets are an important aspect of web development that shouldn’t be taken lightly 
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
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 =)
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?
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.
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.
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).
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.
great list, thanks for this input, i’ve learn a lot with this, for javascritp compressor, i prefer to used on yui compressor…
Very good. Speed is very important for websites, and it is often overlooked because users generally have fast connections.
Other ways to minimize load times include optimizing source code (CSS over tables) and optimizing images (quality settings and image format).
Nice work… was really useful…
Now my site is sure faster
Kudos
_ATOzTOA
http://www.atoztoa.com
ztuqbdamykywlynrwell, hi admin adn people nice forum indeed. how’s life? hope it’s introduce branch
2]Get your own Nintendo Wii
The games console with one of the strangest names on the planet (it’s pronounced ‘wee’) is also one of the most innovative. In fact, with its potential to change the face of the gaming landscape, Wii may be on the verge of a new era, if you’ll pardon the pun.
The $400 Wii package comprises a square white console unit and stand that plugs into your TV or AV receiver, a wireless sensor bar that connects to the console and receives wireless commands from the battery-powered paddle-style Wiimote controller. Basic composite cables are supplied, but if you have a plasma or LCD the $50 component cable options will deliver better picture quality. The console also supports an SD slot, USB port and a DVD drive for games.
Games data can be saved to SD memory cards, which weren’t officially released at the time of publication, but in lieu of their arrival, GameCube memory cards will suffice. The USB port can’t be used to save games either, but will enable future hardware upgrades such as a hard drive or DVD player, although no announcements have been made to this effect.
Despite its DVD drive, the console is not a DVD player (a modification chip is required if you want to watch movies). Nor is it the high definition, hard drive-toting, networked multimedia online multiplayer gaming machine that is the Xbox 360 or forthcoming Playstation 3. Instead, it presents as the most affordable ‘next generation’ games machine available and, certainly, lacks for no important ingredients if you want to have fun.
Nice post, some days ago I’ve wrote an post on my blog about this, a little more technical.. For the portuguese: http://joaopedropereira.com/blog/2009/04/03/optimizacao-websites/
I have tested all of these. I can tell you that depending on the type off site you run, there are a few here that are more important than others.
For example, using a quality CDN is perhaps the single best way to improe load times. This can bring load times down from several seconds, to under 1 second.
Next, especially if you dont want to use a CDN, is objects, and waiting for each to be called. The problem is that most browsers (except Chrome I believe) can only request one object (e.g. image) at a time, and has to wait for it to finish loading. This accounts ON AVERAGE, 75% OF PAGE LOAD TIMES! Using HTTP pipelining is your best best. And its easy to do. Just create around 2 or 3 sub-domains that point to your main site, and then alternate where images, and other files are pulled from. This tricks the browser into pulling a few images/files at a time.
Doing things like compression CSS are marginal unless you have a massive CSS file, or are a major website that needs to save a few KB here and there.
One other serious point that was not covered is CSS sprite maps. This involves combining several smaller images (e.g. icons) into a single image, and then using CSS to position it as needed. This can really cut down load times if you have a lot of small images.
Firefox’s Firebug plugin eliminates most of the need of Pingdom.
Combining and compressing JS files should be done too if you have big/several files.
Things like static page generation, php caching, and database query caching (which he didnt cover) should be measured. In some cases, they provide little to no measurable benefit, while in other cases, they can be lifesavers.
It should also be noted that much of the afore-mentioned tactics are designed to speed up loading times for those with broadband connections (as well as dial-up).
Many people unfortunately do not realize that for example, a site that loads in 1 - 2 seconds can be much more effective in converting than a site that takes 5 or more seconds.
curiculum vitae samples
neiman marcus white chili recipe
liters to ounces
california driver education marin
aberdeen ground proving
cures for erectile dysfunction
ashland daily independent
schwinn exercise bike
broker hot red ticket
beni hannah restaurant locations
houston city jail inmates records
pei way chinese food
rock n roll marathon
tdcj inmate info
aurora myspace com site
retarded animal baby
chinese lunar calendar gender
the source magzine
freedom lolitas tgp gateway
ijazah kursus lepasan perguruan
Fantastically useful as our main site was suffering from slow load speeds.
Yet another resource for analyzing page composition is available at
http://analyze.getsnappy.com
This tool categories and orders the resources on your web page as well as revealing whether compression and caching is enabled for each resource.
28 Trackbacks
[...] 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 [...]
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….
[...] הפוסט הזה מציע כמה שיטות בסיסיות ביותר לקיצור זמן הטעינה של האתר שלכם - החל מכלי בדיקה פשוטים המודדים את משקל העמוד, דרך טיפול בתמונות ושימוש בתוכנות לקיצוץ בסקריפטים וב-CSS. [...]
[...] 15 Quick Ways to Shrink Page Load Times | Web Jackalope [...]
[...] 15 Quick Ways to Shrink Page Load Times - 15 Tipps um die Ladegeschwindigkeit von Websites zu erh
[...] 15 Quick Ways to Shrink Page Load Times - [...]
[...] 15 Quick Ways to Shrink Page Load Times: Sehr interessanter Artikel zum Thema Komprimierung und Ladezeitverbesserung einer Website. [...]
[...] 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 [...]
[...] http://webjackalope.com/fast-page-load-time/ [...]
[...] 15 Quick Ways to Shrink Page Load Times - 15 maneiras de fazer uma página carregar mais rápido. Destaque para o item 4. [...]
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….
[...] 15 Quick Ways to Shrink Page Load Times [...]
[...] 15 Quick Ways to Shrink Page Load Times - 15 Wege um Ladegeschwindigkeiten zu senken [via Perun.net] [...]
[...] 28. 15 Quick Ways to Shrink Page Load Times [...]
[...] 15 דרכים להקטין את זמן טעינת העמוד. [...]
[...] 15 Quick Ways to Shrink Page Load Times - [...]
[...] HTML, CSS and optimize [...]
[...] חסכוני בעוגיות (cookies) משפיע לא רק על רוחב הפס של ה download אלא במקרים רבים חוסך גם upload [...]
[...] 15 דרכים להקטין את זמן טעינת העמוד. [...]
[...] was able to find a couple of good references that every web developer should read (view here and here). I also tried some of the patches that attempt to solve the problem posted on the bug page. Also I [...]
[...] 15 quick ways to shrink page load times [...]
[...] reading: Optimizing Page Load Times 15 Quick Ways to Shrink Page Load Times Pingdom Free Tools - Full page [...]
[...] 原文地址：http://webjackalope.com/fast-page-load-time/ [...]
[...] reading: Optimizing Page Load Times 15 Quick Ways to Shrink Page Load Times Pingdom Free Tools - Full page [...]
[...] reading: Optimizing Page Load Times 15 Quick Ways to Shrink Page Load Times Pingdom Free Tools - Full page [...]
[...] this site where I got my information [...]
[...] 15 Quick Ways to Shrink Page Load Time [...]
[...] [upmod] [downmod] 15 Quick Ways to Shrink Page Load Times | Web Jackalope (webjackalope.com) 1 points posted 9 months ago by SixSixSix tags imported webdesign [...]