3 {{ upvoteCount | shortNum }}
3 {{ upvoteCount | shortNum }}

Help - Enabling Compression and Combining Images in to sprites?

by willyboy104
2 replies
  • WEB DESIGN
    • |
Hi guys,

I have this site:
Which Laptop

As you can see the page load speed is terrible, I have been told by Google's page speed tool that I need to do the two following things:

1. Enabling Compression - Compressing resources with gzip or deflate can reduce the number of bytes sent over the network.

Compressing http://www.whichlaptop.com/.../base.css?... could save 84.9KiB (85% reduction).
Compressing http://www.whichlaptop.com/.../jquery.js?... could save 59.7KiB (64% reduction).
Compressing http://www.whichlaptop.com/.../custom.js?... could save 57.6KiB (78% reduction).
Compressing http://www.whichlaptop.com/.../jquery.prettyPhoto.js?... could save 18.0KiB (74% reduction).
Compressing http://www.whichlaptop.com/.../bootstrap.min.js?... could save 15.3KiB (73% reduction).
Compressing http://www.whichlaptop.com/.../forums.css?... could save 12.6KiB (79% reduction).
Compressing http://www.whichlaptop.com/.../widgets.css?... could save 12.5KiB (79% reduction).
Compressing http://www.whichlaptop.com/.../responsive.css?... could save 9.3KiB (80% reduction).
Compressing http://www.whichlaptop.com/.../admin-bar.css?... could save 9.0KiB (79% reduction).
Compressing http://www.whichlaptop.com/.../prettyPhoto.css?... could save 7.3KiB (79% reduction).
Compressing http://www.whichlaptop.com/.../slideshow.css?... could save 5.9KiB (81% reduction).
Compressing http://www.whichlaptop.com/.../admin-bar.js?... could save 3.2KiB (62% reduction).
Compressing http://www.whichlaptop.com/.../layout.css?... could save 3.0KiB (77% reduction).
Compressing http://www.whichlaptop.com/.../style.css could save 1.1KiB (68% reduction).

2. Combining images in to sprites - Combining images into as few files as possible using CSS sprites reduces the number of round-trips and delays in downloading other resources, reduces request overhead, and can reduce the total number of bytes downloaded by a web page.

http://www.whichlaptop.com/.../433stars.png
http://www.whichlaptop.com/.../466stars.png
http://www.whichlaptop.com/.../4stars.png
http://www.whichlaptop.com/.../5stars.png
http://www.whichlaptop.com/.../main-menu-bg.png
http://www.whichlaptop.com/.../scroll-next.png
http://www.whichlaptop.com/.../scroll-prev.png
http://www.whichlaptop.com/.../slide-btn-bg.png
http://www.whichlaptop.com/.../sub-menu-bg.png
http://www.whichlaptop.com/.../tick-arw-l.png
http://www.whichlaptop.com/.../tick-arw-r.png
http://www.whichlaptop.com/.../tick-pause.png
http://www.whichlaptop.com/.../top-bar-strip.png

Any able to help me here?
#combining #compression #enabling #images #sprites
  • Profile picture of the author WebsiteBegin
    Do you currently use a caching plugin? I recommend WP Super Cache, but W3TotalCache is also a good one - try them both and pick your poison.

    If you need more help, feel free to reference a post I wrote a few months back;
    Improve Site Loading Speeds by 200% | WebsiteBegin
    Signature
    WebsiteBegin | Learn to Build and Manage an Amazing Website

    Follow me on Twitter - Joeb3219
    {{ DiscussionBoard.errors[6859054].message }}
  • Profile picture of the author clickbump
    Check this thread to bring your site speed up to par (+90 on Google pagespeed) > http://www.warriorforum.com/website-...5-minutes.html

    Converting your images to sprites is a bit more challenging, but highly recommended. Here's a neat little app that will help you create a sprite file for your site > http://spriteme.org/

    However, you probably only want to do this for the "commonly" used images used throughout your site (for example, featured images and inline post images are *not* good candidates for converting to sprites, but images used for your template design are great candidates for spriting).

    As an example, here's my theme's CSS sprite file (its a single file called sprite.png which contains 51 individual images used throughout my site):



    By combining these images into a single file and placing them within the theme as background images, using CSS background-positioning, I'm eliminating 50 http requests from the server load. As you can imagine, this has a huge impact on the speed of the site.

    In addition to converting your theme's commonly used images to a sprite file, you can achieve faster page loads by optimizing your featured images and inline images with tools such as PNG Crush and PunyPNG

    Chris Coyier has the best tutorial I've found on sprites (and one of the best css sites around) > CSS Sprites: What They Are, Why They're Cool, and How To Use Them | CSS-Tricks
    Signature
    {{ DiscussionBoard.errors[6862652].message }}

Trending Topics