Page Loading Speed Tweaks - Wordpress


#1

Hello,

I am in the process of trying to speed up how fast my page loads and have hit a wall. My site is run on wordpress, and as I’ve come to find out, my themes and plugins use a bunch of javascript which is what’s really bogging down my site speed. Before scrapping the theme or wordpress, I would like to know if there’s a better way to optimize my way through the clunky HTTP requests that javascript seems to be responsible for.

What I’ve done so far:
I’ve used both Yslow and Google Page speed to help do what might be considered the “easy” fixes for a newbie - such as ensuring the images are as compressed as possible, and also sized without having html trying to resize (if that makes sense) and moving my javascript to the bottom of my page for ‘faster’ loading and removing any unnecessary plugins.

I’ve also installed W3 Total Cache, to try and minify the CSS and Javascript, as well as cache pages. While some of the gzip appears to work, there’s a lot of javascript that isn’t showing up on pagespeed or Yslow as compressed. Also, I found out that there are some conflicts with page caching and a wordpress plugin I have called Wishlist Member. As a result, I turned off the minifying of CSS and Javascript, and disabled page caching.

What I “think” needs to happen:
I have multiple http requests coming from javascript files that I think needs to be minimized. I don’t really know how I can:
a) improve the sizes of the javascript file requests - i.e. can i compress them any further if the gzip on W3 Total Cache “appears” to overlook them (according to pagespeed and Yslow)? Is there a way to do this manually on dreamhost and is there an explanation I could follow?
b) lower the number of file requests - instead of the 13, get it down to the fewest number possible that won’t break any plugins or features on my site - i.e. how do i consolidate javascript?

I would love to be able to minify the javascript too, but the issue seems to really be the number of HTTP requests that’s bottlenecking my site speed - especially for first time visitors. Secondarily, the size of the javascript files (esp. /wp-includes/js/jquery/jquery.js?ver=1.7.1) is a place I would love to be able tweak.

Any guidance or assistance would be greatly appreciated! Thanks in advance!


#2

What are the total number of requests per page? More than 20? If it’s much more than that, you could make a poor-man’s CDN by creating a cookie-less subdomain (say, assets) and requesting about half of your page components through that. You will need to do some code tweaking, but basically you point the subdomain back at the original files. That allows for more parallel downloads. However, in my testing, I failed to see an improvement because it also takes time to do a DNS lookup on the subdomain and open the connections. If you have more than 20 components per page, perhaps 30+, you might see a speed improvement.

Of course, another, perhaps much easier way, to improve speed is through setting long expires times. The first load may be slow, but subsequent loads will be faster.


#3

Thanks Bobcat - I’ve got 48 - 58 HTTP requests going, depending on whats on the page (images etc). A CDN is something I’m going to work towards once I’ve got the other pieces as optimized as possible.

I think using a CSS sprite can help with the image requests, and I’ve been toying with the idea of subdomain for assets to tap into the parallel downloads. I’m just not sure if it site performance will improve to have files in the wordpress media library or on a subdomain. Perhaps there is a compromise which uses both the library and a subdomain for certain assets.

I’ve also came across the idea of loading my jquery from google’s CDN. For anyone in the same boat, here is a cool link that’s helped explain how to do that here: http://bit.ly/ygOol1 . Just note that version of jquery they use in their example is different than the current one being used.

Any other thoughts/suggestions on compressing the javascript?


#4

Yes, jQuery should come from a CDN because so many websites use it that it’s probably already on the visitor’s computer.

If your js is not being compressed automatically, then you can force it in .htaccess (I think mod_deflate). Otherwise, you’ll need to look at something like Google’s Closure which will minimize and optimise the js.

Try CloudFlare to get an instant speedbump.


#5

Thanks again. It doesn’t seem like js is being compressed and I would like to try your suggestion, but am not sure how to actually implement it. Is there a tutorial/source you can recommend?

The dreamhost wiki http://wiki.dreamhost.com/Fine_Tuning_Your_WordPress_Install#JavaScript also mentions "Also, while mod_deflate should compress JavaScript, you can cut a little bit of overhead off by pre-caching the compression. All you need to do is save gzipped copies of your theme’s JavaScript in the same directory as your current files. Again, you’ll need to SSH in to do this — but don’t let that scare you.

The location of JavaScript varies from theme to theme, but for the theme itself can always be found in the “wp-content/themes/” directory. Once you have found the JavaScript for your site, simply run:

gzip javascript.js
"
Is there a tutorial or instructions on how to actually do this? Many thanks.


#6

#7

[quote=“quioui, post:5, topic:57236”]"The location of JavaScript varies from theme to theme, but for the theme itself can always be found in the “wp-content/themes/” directory. Once you have found the JavaScript for your site, simply run:

gzip javascript.js
"
Is there a tutorial or instructions on how to actually do this? Many thanks.
[/quote]

Something important is being left out here. The command should actually be

gzip --no-name javascript.js

Normally gzip stores the filename and timestamp at the beginning of the file but the browser may not decide the file is corrupt.


#8

Thanks to all who’ve provided some guidance. In my optimization journey so far I’ve managed to improve the pagespeed score and my Yslow score, however there is still some work left to do.

Here’s what’s worked for me though:
-ensuring the images used were not having to be resized by the browser and using lossless image compression (such as smush.it) really helped
-having google’s api host the jquery; that really helped on the download speed. There is a wordpress plugin ‘use google libraries’ which took care of that
-moving javascript to the bottom of the page instead of the top - there’s also a wordpress plugin that does this
-where possible, i used W3 total cache to help minify whatever was stable with my theme. I noticed some instability with page caching and the plugin wishlist member so anyone who wants a membership plugin, be aware that the developers of the plugin aren’t fans of caching.
-Also, I still am working through trying to get some pesky javascript to combine and still be stable with my theme.

My last set of issues now is the long time to first byte (TTFB) as pointed out on a great site: www.webpagetest.org . Lots of detailed info there but the biggest challenge identified is the TTFB - are there any suggestions on how to reduce TTFB on shared hosting outside of trying to reduce the number of HTTP requests?


#9

What’s your TTFB? Some of my measurements: http://discussion.dreamhost.com/thread-134199.html


#10

I’ve had a speed loading problem on two of my websites and after much intense work, and asking dreamhost for help, they concluded that I was running into memory limits; which have a weird relationship with wordpress plugins, the fewer the plugins the faster the load. I found this out because the typical advice is to use plugins that combine all your javascript and css into one call. I however, found this solution to be ineffective since it upped my memory limits and made my processes slow down.

Weirdly, the solution I found came from this discussion list, which was to move from php 5.3 fast cgi to php 5.3 regular cgi (this is in your user panel), the resulting speedup was unbelievable. I went from 22 second loads to .5 second loads. I suspect that wordpress has expanded GREATLY over the last few releases and adding plugins has the effect of loading ALL relevent plugins with the homepage.

I’d experiment with the slower CGI with the lower memory footprint.

-Bill


#11

[quote=“kelly7552, post:10, topic:57236”]
Weirdly, the solution I found came from this discussion list, which was to move from php 5.3 fast cgi to php 5.3 regular cgi (this is in your user panel), the resulting speedup was unbelievable. I went from 22 second loads to .5 second loads.[/quote]

I’ve also done benchmarks on the difference between the two using webpagetest.org and found that not only was FastCGI not faster, but it also used more memory which lead to more errors under heavy load.

Note that in my case, 99%+ requests are ajax requests for about 1-4k of data, so YMMV


#12

My TTFB is 2.636s. Those times you have posted are something I would love to be able to get my TTFB time down to but I suspect because I am using wordpress with the theme I have it’s going to be a real challenge.

I installed a plugin called P3 Plugin Profile which does a nifty analysis of my wordpress site.

I’m going to try doing CSS sprites next and see what, if anything, that will do for the TTFB and overall load time of my site. I did read a great little article that showed some load testing on lots of small file sizes vs one big file that sold me on sprites.

Will keep you guys posted.

PS. Here are the stats on load times on my site:

TTFB: 2.636s
Load Time of whole page: 5.363s
HTTP requests: 45
Bytes in: 400KB


#13

Wow, for only 400k, that is pretty slow. It’s not horrible, but not great.

FYI, the timings I mentioned are for ajax requests that return just a few kb and don’t require a DB connection because all potential requests are cached in advance. Those requests are 99% of the traffic on my site, so I focus on those. They need to be fast.

However, loading the first page takes 1.8 seconds initially, then 0.6 on subsequent loads:

																	Document Complete	Fully Loaded
		Load Time	First Byte	Start Rend	DOM Elmnts	Time	Requests	Bytes In	Time	Requests	Bytes In
First	1.878s	0.466s		1.115s		101		1.878s		20		209 KB		2.076s	21	209 KB
Repeat	0.604s	0.393s		0.448s		101		0.604s		1		4 KB		0.853s	2	4 KB

I should also note that the site is built on a custom framework designed by a friend known for his compulsive quest for fast response times and employs a lot of caching… I’m happy when the ajax requests average < 1s and full page load times are < 2s


#14

Those are great numbers - esp TTFB.

As an update I went into DH control panel and checked the pagespeed optimize option and it helped with a lot of compression of stuff i was wrestling with manually. It definitely helped with lowering # of requests, lowering # of bytes and thereby improved time of first rendering and time to complete (now down to 4.9s for 332KB on 39 requests). My TFFB has negligible improvement at 2.574s. All this is helpful for the first view.

For the Repeat view however, it’s slowed that puppy way down. At one point I was under 1s on <10kb, now I’m up to 3.637s on 5 requests and 20KB - my TTFB is a whopping 2.785s! Any suggestions on how to deal with repeat view performance degradation?


#15

I set aggressive cache times (1 year or more) with mod_expires in .htaccess and append query strings such as ?v=1 to all assets so that if there’s a change, I just increment the number. This seems to work for me.


#16

So in hopes of taking a step forward and improving the site performance by migrating my website from shared hosting to VPS, it seems like I might have taken a big step backwards in performance. Without having added a plugin or changing a setting my site now loads at > 8s (for 497KB, 36 requests) up from 5s pre VPS. I already have a CDN enabled and the google pagespeed optimizer enabled. Can anyone provide suggestions/resources to improve load times, especially TTFB (time to first byte) for a wordpress site on a VPS?


#17

[quote=“quioui, post:8, topic:57236”]
-having google’s api host the jquery; that really helped on the download speed. There is a wordpress plugin ‘use google libraries’ which took care of that[/quote]

Can I ask what would be the possibility of using Piwik to host the jquery? I was planning on using Piwik in my site, is there such a thing from them as with your Google alternative?
Thanks
’meist