Current time: 08-28-2014, 03:06 PM Hello There, Guest! (LoginRegister)

Post Reply 
 
Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Gzip compression and CSS sprite issue left
12-16-2012, 10:52 AM
Post: #1
Gzip compression and CSS sprite issue left
Hi,

I've tried my best to improve the speed of my website. See the latest report on
http://www.webpagetest.org/pagespeed.php...1&cached=0

There are only two issues troubled me.
1. Gzip compression:
As I did enable it via .htaccess according to the thread below,
http://www.webpagetest.org/forums/showth...light=gzip
I've read Gzip website and tried to use other means but none of them completely solve the issue.

2. CSS sprite to those images
They are background images need x-expand but can't be used in sprite;
or they are encoded in the way of <img src="..."> which I have no idea to add and specify their position in a sprite image.

Can anyone help me out? Many thanks in advance.

Daniel
Find all posts by this user
Quote this message in a reply
06-27-2013, 06:57 PM
Post: #2
RE: Gzip compression and CSS sprite issue left
0. You're testing with IE7 which isn't representative of most users these days (even in the Outback). Use IE8, 9 or Chrome. IE7 only makes two connections per hostname rather than the usual six, which causes you a lot of pain because...
1. You have too many HTTP requests. A lot of these are for 'furnature', e.g. vtop/grey/bg.jpg which would probably be better off served as PNGs anyway. Then you can sprite them. You do not need to consider spriting IMG elements yet.
2. jQuery, fastslideshow.js and thickbox are all blocking all subsequent requests: synchronous jaavascript is killing your FEO.
-> Turn off javascript in your browser, and adapt your page so that it can load fully and look OK without javascript.
-> Now that all the javascript that remains is just 'enhancements', move it into a $.document.ready(function () { ... }) call. Place this at the end of your HTML just before the closing body element, with the jquery load just in front of it.
3. add a dns-prefetch for your image subdomain.
4. move the google analytics code to the end, after the jquery stuff. Make sure it is loading asynchronously.
5. Use a CDN for requesting jQuery. the only one in the game really is Google's. Use a popular version to enhance the chances of it already being cached. I use 1.7.2
6. Move your gzip compression to the web server (e.g. apache) instead of your application language (e.g. PHP). make sure Javascript and CSS get compressed.

Once you've done all this, come back and post your test results, and we'll see where we can go from there.
Find all posts by this user
Quote this message in a reply
06-30-2013, 12:06 AM (This post was last modified: 06-30-2013 02:32 AM by lena.)
Post: #3
RE: Gzip compression and CSS sprite issue left
Hi daniel,

(12-16-2012 10:52 AM)daniel2008 Wrote:  2. CSS sprite to those images
They are background images need x-expand but can't be used in sprite;
or they are encoded in the way of <img src="..."> which I have no idea to add and specify their position in a sprite image.

Your second best option to images sprites is CSS sprites [these ones allow x-expand edit: whatever that is, but you might consider stacking the images vertically or diagonally to build an image sprite, no?]. What you are doing in the second case is serving several background images embedded in only one CSS file. The way of doing it is constructing a second CSS file with only the background images embedded with data URIs. Call this file img.css. You can find a discussion here:

http://stackoverflow.com/questions/52580...ata-base64

IE6 and IE7 do not support data URIs, but there's a work around using mhtml to embed the background images. Call that file img-ie.mht. You can find a discussion here:

http://www.phpied.com/mhtml-when-you-nee...and-under/

Then what you need to do is using the following code [assuming that you are using html5]:

Code:
<link rel="stylesheet" href="path-to/general.css">
<!--[if lte IE 7]>
<link rel="stylesheet" href="path-to/img-ie.mht">
<![endif]-->
<!--[if gt IE 7]><!-->
<link rel="stylesheet" href="path-to/img.css">
<!--<![endif]-->

The conditional comments are used to prevent unnecessary downloads.

The .mht file must be served with the correct mime type, otherwise it wont work, cf.:

http://www.phpied.com/the-proper-mhtml-s...ment-78586

As a second order optimization, you might try to join the general.css and img.css files to see if it is quicker.
Find all posts by this user
Quote this message in a reply
Post Reply 


Forum Jump:


User(s) browsing this thread: 1 Guest(s)