Page Speed on a website can help especially for mobile users visiting your website. We recommend testing a website across different tools and not just relying on one.  Some of the tools we use for testing Page Speed performance are WebPageTest.org, Pingdom Website Speed Test, and Google PageSpeed Insights.

Image Optimazation

This is often overlooked but it’s probably the most important aspect of optimizing your website. Some methods/tools of image optimization you can use are

• Photoshop – You can export images and save them at Quality 70
• TinyPng.com – Allows you to upload both .jpg, .png files 20 at a time and optimizes them for you.
• Grunt – Running a task to optimize your images while developing. We use grunt-contrib-imagemin.

Minify/Concat JS/CSS files

If you have multiple js/css resources on your site concatinating and minifying these files into 1 single file will help improve Page Speed performance. A Grunt Task can also help with this task. grunt-contrib-cssmin and grunt-contrib-uglify. Below is an example of what a Gruntfile.js may look like when using grunt-contrib-cssmin and grunt-contrib-uglify.

uglify: {
  options: {
    mangle: false,
    sourceMap: true
  },
  my_target: {
    files: {
      'assets/js/scripts.min.js': [
        'src/js/google-fonts.js',
        'src/js/jquery.nivo.slider.js',
        'src/js/jquery.prettyPhoto.js',
        'src/js/main.js'
      ]
    }
  }
},
cssmin: {
  options: {
    sourceMap: true
  },
  target: {
    files: {
      'assets/css/styles.min.css': [
        'src/css/bootstrap.css',
        'src/css/reset.css',
        'src/css/nivo-slider.css',
        'src/css/prettyPhoto.css',
        'src/css/styles.css'
      ]
    }
  }
}