/    Sign up×
Community /Pin to ProfileBookmark

website loading very slowly

hi,

i have a wordpress-based webcomic site. i did a test to see the loading time using pingdom, and it turns out the loading time is extremely slow.
here are the pingdom reuslts:
[img175.imageshack.us ]

as you can see, for some reason some objects load within about 3-4 seconds, whereas some take about 12seconds (and nothing in between). i really can’t figure out what i’m missing here. does anyone have any idea why certain objects take so long to load? what can i do about this?

thanks in advance

to post a comment
Full-stack Developer

5 Comments(s)

Copy linkTweet thisAlerts:
@Jarrod1937Apr 21.2010 — Your image isn't showing. Though i would prefer to run the site through my own tools before giving you suggests. So if you could, please post the url.
Copy linkTweet thisAlerts:
@matan811authorApr 21.2010 — ok, the url is:

www.ho-lo.co.il

(notice that this site isn't in English)
Copy linkTweet thisAlerts:
@Jarrod1937Apr 21.2010 — It looks like your first page view takes about 6 seconds, with your repeat view taking about 3.5 seconds (faster because of some caching), with the start render times being 3.5 and 2.5 seconds respectively.

It looks like the bulk of your delay is coming from the time to first byte delay for each resource. The ttfb delay includes network delay as well as any backend processing times. The best way to speed up your site is to reduce the amount of objects you load, thus reducing your http requests per page and so incurring less ttfb delay penalties.

I see you currently have 6 .css files (2 listed in code, the rest being imported by the .css files) and 7 .js files loading on just your home page! Combine these into as few files as possible. I'd actually recommend combing them so you only load one .js file and one .css file per page. That alone could easily shave of seconds from your load time. Next, if you have the ability you may want to load your images from a sub domain. By standards proper browsers can only open 2 simultaneous connections to a server at one time, so if you have more than 2 objects to load, you'll be having the others queued until a connection is free... this will cause more delay. Loading some of your objects from a sub domain will increase download parallelization so more objects get downloaded at the same time. Don't do this if you're only going to load a few objects fro the sub domain, as the dns lookup incurs its own delay, so it is only effective if you plan on parallelizing a moderate amount of objects on your page.

Next, move all javascript include files to the bottom of your page, they're all currently listed near the top. Having .js files near the top clogs up the system while they're downloading, this will then stop a lot of your display elements (like your .css files) from downloading, thus slowing down the page start render time. Conversely you'll want to move the .css files up to the top as far as they can be within your head section, this way they'll get downloaded first and the page will start rendering sooner.

Next, apply proper caching http headers. The browser is caching some elements, hence the faster repeat view time... but it is still taking longer than it needs to as the browser has to send a conditional get requests for each one and then has to wait for the server to send a 304 response. This alone can add a lot of delay, adding proper caching headers means the browser won't rquest the objects the next view because it knows how long before they expire, dramatically increasing your repeat page view time.

Lastly, your images are a lot larger than they need to be. Your comic strip is using .png, and even utilizing 8 bit transparency... however since your background is white, you can give your comic strip a white background, then save the image as a high quality .jpg, which if done properly is still half the size of your current .png image file size.
Copy linkTweet thisAlerts:
@matan811authorApr 22.2010 — thank you for your detailed analysis jared. i'm working on implementing some of the changes you mentioned. i just want to make sure - it's better to have one larger .css file, than several smaller ones?
Copy linkTweet thisAlerts:
@Jarrod1937Apr 22.2010 — thank you for your detailed analysis jared. i'm working on implementing some of the changes you mentioned. i just want to make sure - it's better to have one larger .css file, than several smaller ones?[/QUOTE]
Yes, because the bottleneck in this case (and usually is for sites) is the amount of objects that can be simultaneously downloaded, so if you cut down on the amount of objects and/or increase parallelization, you will speed up the loading of your site.

There was something called http pipelining that fixed the object/http request bottleneck, but it mostly got abandoned by major browsers, not sure why though (perhaps someone here would know better than me).
×

Success!

Help @matan811 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...