Photoshop Question posted in
The official user guide can be found here.

How can I enable compression on my site? – Photoshop

I want

my page to load faster or at least to load at it best.

I’ve concatenated & minified all of my JS, CSS, and even HTML.
I’ve also optimized most of my images using Photoshop and ImageOptim on a Mac. Now, I want to enable/configure the compression on my site.

I’m new

the world of compression : gzip/deflate, and I’m trying to learn them.

I’ve tried

setting it up within Grunt.

I’ve installed npm install grunt-contrib-compress --save-dev

Then, I have it configure like this

compress: {

    main: {

        options: { mode: 'gzip' },

        expand: true,
        cwd: 'img/',
        src: ['**/*'],
        dest: 'dist/img'
    }
}

Testing

When I run grunt I got everything in my img/ folder compressed and store in my dist/img/as expected.

Created dist/img/overlays/01.png (214 bytes)
Created dist/img/overlays/02.png (212 bytes)
Created dist/img/overlays/03.png (209 bytes)
Created dist/img/overlays/04.png (211 bytes)
Created dist/img/overlays/05.png (212 bytes)
Created dist/img/overlays/06.png (211 bytes)
Created dist/img/overlays/07.png (217 bytes)
Created dist/img/overlays/08.png (159 bytes)

Comparing

Then, I went to the folder dist/img/ and check the file size different. They’re not that big different. Example , 58 kb vs. 59 kb

Question

Right now, I only compress my images.
Do I need to compress my minify assets like : JS, CSS, HTML ?
What is the most efficient way to enable compression on our site ?

Please feel free to suggested me anything.

Tags:

3

Answers


  1. 0

    Google has a good guide to optimize content efficiency. You can take a look here. The general idea is

    • Compress text assets if possible
    • Image is already compressed usually. Gzip/deflate cannot compress it much further. Image optimization is a better way to reduce the payload size.
    • Use HTTP caching whenever possible.
    Login or Signup to reply.
  2. 0

    You can also compress your minified JS/CSS by adding the report option:

    cssmin: {
    dist: {
       options: {
         report: 'gzip'
     },
     files: [{...

uglify: {
    options: {
        mangle: true,
        report: 'gzip'
    },

    Use grunt-uncss to remove unused CSS from your projects.

    If you’re using compass, try Spriting your images instead of just compressing them.

    Login or Signup to reply.
  3. 0

    Right now, I only compress my images.

    Don’t. All the image formats used on the WWW have native compression schemes. You don’t gain anything by adding gzip on top.

    Do I need to compress my minify assets like : JS, CSS, HTML?

    Yes. Text files benefit from gzip compression.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search