Best return on time investment? - Printable Version

WebPagetest Forums

Best return on time investment? - Printable Version

+- WebPagetest Forums (https://www.webpagetest.org/forums)
+-- Forum: Web Performance (/forumdisplay.php?fid=3)
+--- Forum: Optimization Discussions (/forumdisplay.php?fid=5)
+--- Thread: Best return on time investment? (/showthread.php?tid=4075)

Best return on time investment? - AMcDermott - 09-23-2011 03:09 AM

Hi folks,

Some seriously impressive stuff in here - I particularly love the laptopgpsworld vs google video - awesome, and Patrick's code to inline CSS for first time visitors.

I'm in a different league - a lower one! My main concern is not being optimised to the extent that some of you guys are - for me it's about getting the best bang for my buck of time investment. I'm looking for any low hanging fruit that I've missed out on. This post is pretty long because I want to provide as much info as possible to make it easier for you folks to help me Smile

Smile

I have a sales page that is quite long, and has a lot of images. I've done a bunch of stuff to improve load time - CSS sprites, minifying CSS and JS (within reason - I regularly need to edit the CSS so not going overboard). I've moved to Litespeed hosting - very happy with new hosts actually.

My question for you is assuming that you can't remove any of the content, what further optimisations would you implement on this page?

I'm getting a "Grade C - Overall performance score 71" from YSlow v2 ruleset. In reverse order, here's what it recommends addressing:

YSlow(V2) Wrote:F Use a Content Delivery Network (CDN)
F Reduce DNS lookups
F Put JavaScript at bottom
F Make fewer HTTP requests
F Configure entity tags (ETags)
F Add Expires headers
C Minify JavaScript and CSS
C Compress components with gzip
B Reduce cookie size
B Avoid CSS expressions
A Use GET for AJAX requests
A Use cookie-free domains
A Remove duplicate JavaScript and CSS
A Reduce the number of DOM elements
A Put CSS at top
A Make favicon small and cacheable
A Make AJAX cacheable
A Do not scale images in HTML
A Avoid URL redirects
A Avoid HTTP 404 (Not Found) error
A Avoid empty src or href
A Avoid AlphaImageLoader filter
n/a Make JavaScript and CSS external

I'll ignore the A's and B's. Here's what's left & my comments:

Quote:F Use a Content Delivery Network (CDN) << several page components are coming in off CDN, appreciate further suggestions
F Reduce DNS lookups << don't think I can do much more - we do load Facebook, Google, Youtube and other content. Images on subdomain
F Put JavaScript at bottom << done it where possible - couple of ones that are awkward
F Make fewer HTTP requests << notes:
This page has 25 external Javascript scripts. Try combining them into one. << partially done where possible
This page has 11 external stylesheets. Try combining them into one. << partially done where possible
This page has 9 external background images. Try combining them with CSS sprites. << already done.
F Configure entity tags (ETags) << I disabled ETags because they weren't working - maybe something I should revisit?
F Add Expires headers << removed due to over-caching of frequently changing images - I will add these back in when site under less frequent development.
C Minify JavaScript and CSS << done as much as possible
C Compress components with gzip << done as much as possible (2 external video scripts)

Here's what my .htaccess looks like on my images subdomain:

Code:

# GZIP content.

<ifModule mod_gzip.c>

  mod_gzip_on Yes

  mod_gzip_dechunk Yes

  mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$

  mod_gzip_item_include handler ^cgi-script$

  mod_gzip_item_include mime ^text/.*

  mod_gzip_item_include mime ^application/x-javascript.*

  mod_gzip_item_exclude mime ^image/.*

  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

  # Netscape 4.x has some problems...

  BrowserMatch ^Mozilla/4 no-gzip

</ifModule>

#Expire Header

<ifModule mod_expires.c>

  ExpiresActive On

  ExpiresDefault "access plus 1 seconds"

  ExpiresByType text/html "access plus 1 seconds"

  ExpiresByType image/gif "access plus 259200 seconds"

  ExpiresByType image/ico "access plus 259200 seconds"

  ExpiresByType image/jpeg "access plus 259200 seconds"

  ExpiresByType image/png "access plus 259200 seconds"

  ExpiresByType text/css "access plus 259200 seconds"

  ExpiresByType text/javascript "access plus 259200 seconds"

  ExpiresByType application/x-javascript "access plus 259200 seconds"

</ifModule>

#CacheControl

<ifModule mod_headers.c>

  <filesMatch "\\.(ico|pdf|flv|jpg|jpeg|png|gif|swf)$">

    Header set Cache-Control "max-age=516000, public"

  </filesMatch>

  <filesMatch "\\.(css)$">

    Header set Cache-Control "max-age=216000, public"

  </filesMatch>

  <filesMatch "\\.(js)$">

    Header set Cache-Control "max-age=216000, private"

  </filesMatch>

  <filesMatch "\\.(xml|txt)$">

    Header set Cache-Control "max-age=216000, public, must-revalidate"

  </filesMatch>

  <filesMatch "\\.(html|htm|php)$">

    Header set Cache-Control "max-age=1, private, must-revalidate"

  </filesMatch>

</ifModule>

#Turn off ETags

<ifModule mod_headers.c>

  Header unset ETag

</ifModule>

FileETag None

My question for you is assuming that you can't remove any of the content, what further optimisations would you implement on this page? Is there any low-hanging fruit left here?

Thanks in advance!
Alastair.

RE: Best return on time investment? - pmeenan - 09-24-2011 03:35 AM

For the benefit of others who might look to help, here is one of your test runs on WebPagetest: http://www.webpagetest.org/result/110922_Y2_1P2ZZ/

My recommendations:

- Fix the 404

- Change the +1 button to use the async code snippet: http://googlewebmastercentral.blogspot.com/2011/07/1-button-now-faster.html

- Install W3 Total Cache and configure it to combine your js/css (and see if you can move the js to load later)

- Use a CDN for images.selfassemblysites.com instead of serving them directly

- Move the social networking icons at the bottom of the page into a sprite (they are being served individually right now)

- See if there is ANYTHING you can do to make the images smaller (png 8 if they are 24, try jpeg, etc).

Thanks,

-Pat

RE: Best return on time investment? - AMcDermott - 09-25-2011 07:30 AM

(09-24-2011 03:35 AM)pmeenan Wrote: For the benefit of others who might look to help, here is one of your test runs on WebPagetest: http://www.webpagetest.org/result/110922_Y2_1P2ZZ/

Thanks Pat - I didn't realise it was saving the URLs, dead handy.

(09-24-2011 03:35 AM)pmeenan Wrote: My recommendations:

- Fix the 404

Done.

(09-24-2011 03:35 AM)pmeenan Wrote: - Change the +1 button to use the async code snippet: http://googlewebmastercentral.blogspot.com/2011/07/1-button-now-faster.html

Done.

(09-24-2011 03:35 AM)pmeenan Wrote: - Install W3 Total Cache and configure it to combine your js/css (and see if you can move the js to load later)

Done.

(09-24-2011 03:35 AM)pmeenan Wrote: - Use a CDN for images.selfassemblysites.com instead of serving them directly

Won't do this yet but on the cards for later.

(09-24-2011 03:35 AM)pmeenan Wrote: - Move the social networking icons at the bottom of the page into a sprite (they are being served individually right now)

To do.

(09-24-2011 03:35 AM)pmeenan Wrote: - See if there is ANYTHING you can do to make the images smaller (png 8 if they are 24, try jpeg, etc).

Did a round of optimisation on these a while back - will look at them again.

(09-24-2011 03:35 AM)pmeenan Wrote: Thanks,

-Pat

Thank you! Great suggestions, have implemented all the easy picking and the rest are on my todo list - cheers!

I've re-run the test with the changes above made - here's the link:
http://www.webpagetest.org/result/110924_HN_1PVH9/

- Alastair.

RE: Best return on time investment? - AMcDermott - 09-26-2011 08:18 AM

W3TC backed out until I can do further testing on it - bunch of 404s occurring.