Css Sprites?

[Guest]

I am trying to teach myself how to improve my sites speed and performance. It has been suggested on many forums to add css sprites to the page to speed up image loading. I am new to this and don't have a clue what they are talking about.

 

Is there a mod that does this? Has anyone created this in their store? I use Additional images on 2.2 RC2 sites but the images are still being reported as very large in byte size.

 

Any suggestions?

[germ]

CSS Image Sprites

[MrPhil]

Any suggestions?

 

Well, osC could be sped up a bit by consolidating all the little icons and other "utility" images on a page into one big image, and using CSS sprites capability to display just a segment of this big image. This is instead of loading a separate image file for each little image, which has a lot of overhead. Frankly, the amount of speed-up probably wouldn't be significant, and you would have to rewrite every place that's a foreground image and change it into a background image. I doubt it would be worth the effort.

 

Product images are probably not worth turning into sprites. For thumbnails, a sprite might be used, but again the code has to be rewritten to put the thumbnails into background images. For large images, it would probably be counterproductive to glue them together. You're not necessarily going to look at all the full sized images, so the shopper is wasting time waiting for all of them to load at once in a super-sized sprite.

 

If you're having excessive image load times for full sized product images, perhaps something could be done with Javascript to preload (in background) all the full sized images while the shopper is looking at the first one. I don't know if any add-ons have been written to do that. Also consider using images where you have not turned off compression when you save them. For JPEGs, the image quality goes down the more you compress them, but the space (and load time) savings can be substantial. Just be aware that every time you save a JPEG image with any level of compression, image quality is permanently lost. So, always start with a fresh copy as you experiment with the level of compression that balances load time with image quality (don't save an image, decide to adjust a setting, save it again in the same file...). GIF and PNG formats have "lossless" compression that is better quality, but doesn't compress quite as much (as fine detail isn't thrown away as JPEG does). Finally, is your host not delivering sufficient file transfer speeds that you should reasonably expect? Maybe it's time to switch to a better host.

[germ]

I visited both sites in your profile.

 

The first is definitely "faster" than the second.

 

The problem with the second site might be that most of the images being displayed are not their actual size so the browser has to resize them.

 

I think FWR Media recently posted an image thumbnailer contribution that may help (if I understand it's intent and usage). The support thread is in the "Templates and Images" forum.

 

As a side note on the second site, there are two items in the footer causing "unsecure items" popup in Internet Explorer on your SSL pages.

[MrPhil]

Good point about the resize. If your HTML specifies a height and width (in pixels) for an image, and this does not happen to match the actual "raw" dimensions of the image, the browser needs to scale the image up or down to fit the specified space. This can be a fairly slow process (as well as producing results that don't measure up to an image editor such as GIMP or Photoshop). It's not uncommon to see a site (w00t) where a huge image (2000px by 1500px, say) is transferred to the browser, and then it's scaled down by the browser to say, 200 x 150px. You should use an image editor to scale down the image to the largest size you'll need, and consider providing a separate thumbnail image rather than dynamically scaling down the image.

[♥FWR Media]

I would say: -

 

1) Sprite for all small regularly used site wide icons/images

2) Ensure you are delivering exact dimension images in img tags and do not allow the browser or JS to resize.

3) Even when you have a good image try your own image compressor then see if smushit can do better.

[Guest]

Thanks all!

The first site is faster because I have been optimizing the code using suggestions from this forum and a few others. I learned to put css calls before the </head> tag and scripts just before the </body> tag. I have removed redundant functions and also removed the http_vars from all get and post functions. Its a lot of work but in the industry I compete in it could mean the difference between getting the sale or not.

I also recommend minifying scripts to condense the code.

[npn2531]

Another way to speed up images loading is to load them on a different server, i.e. on website that has nothing in it but a single folder containing the images.

 

The reason is that a website can only download 6 'things' (pages, css files, javascripts, etc) at a time per server. If you have your images on another server, you download those images simultaneously with 6 other things from your original server. In effect you have doubled your 'bandwidth'. You can see this demonstrated with 'Firebug' which is a free and neat tool available on Firefox.

 

I have a primer on this at:

www dot css-oscommerce dot com/pagespeedserve-static-content-from-a-cookieless-domain/

 

You can still create your images as sprites on the remote server, and pick up even more speed. And Google likes fast sites.

[Juto]

And, if the images contains metadata remove those. It's easily done with Imagick and can be done with the GD lib as well.

Sara

[♥FWR Media]

Yes all these things are valid.

 

Loading images from a cookieless CDN.

 

Compress already minified JS and CSS.

 

Compress HTML

 

Ensure the site is using gzip compression.

 

Valid html

 

img tags with images matching exactly the specified hight and width

 

Compressed/optimised images

 

Usage of sprites for small site wide images

 

Use of an opcode cache ( essential for PHP apps, especially apps that include a lot of files ).

 

cache slow queries

 

Optimise slow queries

 

Ensure database indices are optimal

 

Ensure database is analysed and optimised regularly

 

Ensure the script is not generation errors ( most osCommerce sites I work on are generating in excess of 300 hidden notices/warnings )

 

So on and so forth ...

[npn2531]

The first three items on your list "Loading images from a cookieless CDN, Compress already minified JS and CSS, Compress HTML" (after minifying JS and CSS) are the low hanging fruit. IE not too difficult to do and can easily double page loading speed.

[Guest]

Got my total query time down to 0.1858 seconds but still have 231 queries? This is my slowest query: <code>Query: select p.products_id from products p left join products_description pd on p.products_id = pd.products_id where ( pd.products_head_keywords_tag like '%fast funnel%' or pd.products_name like '%fast funnel%' ) and p.products_status = 1 and pd.language_id = 1 limit 1</code>

and it repeats several times for different products.

I also have a error_log.txt file located in my catalog/includes. It has several reapeats of the same error "PHP Fatal error: Call to a member function altgroupoutput() on a non-object in public_html/product_info.php on line 648" any idea what causes this?

[npn2531]

Here is another speed tip: Let Google host your main two Jquery files. There are at least three reasons why this speeds things up:

• Google delivers the two files compressed. These are huge files. OSCommerce 2.3 delivers these files with a combined size of 270.8 kb, Google compresses them to 73.6kb. 270kb is larger than the total size of all the catalog files.
  
• Up to six files at a time can be requested from one server. But since two files are being requested from a second server, Google API, you can download 8 files concurrently.
  
• The visitor to your website might not even have to download them. If your visitor has been to another site anytime within the past year where these very popular files are used, they are probably already downloaded.
  

another primer on this here:

www dot css-oscommerce dot com/cut-page-load-time-in-oscommerce-2-3-osc-to-css/

[♥FWR Media]

Both of your problems derive from add ons and not from the osCommerce core code.

 

Got my total query time down to 0.1858 seconds but still have 231 queries? This is my slowest query: <code>Query: select p.products_id from products p left join products_description pd on p.products_id = pd.products_id where ( pd.products_head_keywords_tag like '%fast funnel%' or pd.products_name like '%fast funnel%' ) and p.products_status = 1 and pd.language_id = 1 limit 1</code>

and it repeats several times for different products.

 

No great surprise that this is slow, it's a site killer of a query .. it's not indexable and is a partial text search .. horrible!! .. looks like some header/meta tag contribution .. All you can do really is ask the contribution author to write a more sensible query failing that use a better coded replacement.

 

I also have a error_log.txt file located in my catalog/includes. It has several reapeats of the same error "PHP Fatal error: Call to a member function altgroupoutput() on a non-object in public_html/product_info.php on line 648" any idea what causes this?

 

Google altgroupoutput there are loads of appropriate returns.

[Guest]

Both of your problems derive from add ons and not from the osCommerce core code.

 

 

 

No great surprise that this is slow, it's a site killer of a query .. it's not indexable and is a partial text search .. horrible!! .. looks like some header/meta tag contribution .. All you can do really is ask the contribution author to write a more sensible query failing that use a better coded replacement.

 

 

 

Google altgroupoutput there are loads of appropriate returns.

 

I am using Headertags seo. I am hesitant to change it as I will loose all of my custom tags.

 

Thanks for the direction on altgroupoutput. I will try it.

[Praful Kamble]

Going through whole thread I found below important things missing.

 

- Expire headers

- Vary: Accept-Encoding header

- Leverage browser cache

[Guest]

Can you expand on your comments? It helps the entire oscommerce community whenyou share your tips with text or a link so that everyone can benefit. Not everyone that uses it is a trained coder.

Thanks!

[♥FWR Media]

Can you expand on your comments? It helps the entire oscommerce community whenyou share your tips with text or a link so that everyone can benefit. Not everyone that uses it is a trained coder.

Thanks!

 

He means having something like the following in .htaccess

 

# Set expires headers
<ifmodule mod_expires.c>
 <filesmatch "\.(ico|jpg|jpeg|png|gif|swf)$">
ExpiresActive on
ExpiresDefault "access plus 6 months"
FileETag None
 </filesmatch>
</ifmodule>

 

And Vary: Accept-Encoding

 

<IfModule mod_headers.c>
 <FilesMatch "\.(js|css|xml|gz)$">
Header append Vary: Accept-Encoding
 </FilesMatch>
</IfModule>

 

Both of which require particular modules to be loaded in apache:

mod_expires and mod_headers

[Praful Kamble]

He means having something like the following in .htaccess

 

# Set expires headers
<ifmodule mod_expires.c>
 <filesmatch "\.(ico|jpg|jpeg|png|gif|swf)$">
ExpiresActive on
ExpiresDefault "access plus 6 months"
FileETag None
 </filesmatch>
</ifmodule>

 

And Vary: Accept-Encoding

 

<IfModule mod_headers.c>
 <FilesMatch "\.(js|css|xml|gz)$">
Header append Vary: Accept-Encoding
 </FilesMatch>
</IfModule>

 

Both of which require particular modules to be loaded in apache:

mod_expires and mod_headers

 

 

To Leverage browser caching

<IfModule mod_expires.c>

ExpiresActive On

ExpiresByType image/png A604800

ExpiresByType image/gif A604800

ExpiresByType image/jpg A604800

ExpiresByType image/jpeg A604800

ExpiresByType text/javascript A604800

ExpiresByType application/x-javascript A604800

ExpiresByType text/css A604800

</IfModule>

 

Forgot to share one thing

 

 

# Speed up caching

FileETag MTime Size

[♥FWR Media]

To Leverage browser caching

 

I believe I just offered a far shorter version of that. FileEtag ought to bo none.

[♥altoid]

I have a primer on this at:

www dot css-oscommerce dot com/pagespeedserve-static-content-from-a-cookieless-domain/

 

 

Great primer...

1) After this is done where will images go for new products uploaded after this tweak is in effect?

2) Would the hypothetical http://www dot new-cookieless dot website dotcom/images/be able to serve images to multiple sites if the had images referenced accordingly?

[♥altoid]

I would say: -

 

3) Even when you have a good image try your own image compressor then see if smushit can do better.

 

Impressive...just tested smushit on some images and it lopped of up to 70% of the image size. Another great tip!!

[Guest]

I use Light Image Resizer www.obviousidea.com .