Improving Website Page Speed Performance

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'
      ]
    }
  }
}

Classic ASP Function to Set Dynamic Image (1 of 2)

I reviewed some recent client Classic ASP code and found a 4 level deep branching of an IF statement. Reading the code, its intent is to look at the object type and return an icon representing the type.


   <% 
    if  obj.type = "car" then
            response.write("<img src="/images/icons/car.png" />")
    ElseIf obj.type = "boat" then
	    response.write("<img src="/images/icons/boat.png" />")
    ElseIf obj.type = "bike" then
	    response.write("<img src="/images/icons/bike.png" />")
    Else
	    response.write("<img src="/images/icons/placeholder.png" />")
   %>

 

I try to stay away from IF statements altogether but using a SINGLE if statement is something I do use. However, once the IF statement gets past 2 branches, I consider this a CODE SMELL it requires refactoring.

I am going to break my thoughts into small code refactorings so you can understand each step. each step in itself is an improvement to the code, but combined, it will help make changes for the client easier and less prone to bugs.

Step 1

Taking a look at the above code, I notice we are repeating the IMAGE SRC path. So let’s see if we can make better.


   <% 
    Dim imgSrc
    imgSrc = "/images/icons/"

    if  obj.type = "car" then
            response.write("<img src='" & imgSrc & "car.png" />")
    ElseIf obj.type = "boat" then
	    response.write("<img src='" & imgSrc & "boat.png" />")
    ElseIf obj.type = "bike" then
	    response.write("<img src='" & imgSrc & "bike.png" />")
    Else
	    response.write("<img src='" & imgSrc & "placeholder.png" />")
   %>

 

Step 2

Now, we are still repeating the response.write(" block several times. Let’s refactor the IF statement to only have logic about the obj.type.


   <% 
     Dim imgSrc, img
     imgSrc = "/images/icons/"

     img = "placeholder.png"
     if  obj.type = "car" then img = "car.png"
     if  obj.type = "boat" then img = "boat.png"
     if  obj.type = "bike" then img = "bike.png"

     response.write("<img src='" & imgSrc & img & "'" />")


   %>

 

Refactoring Results

The code is much easier to read and to maintain. We can easily add more branches without thinking of the rest of the logic. A non-programmer can look at this code and figure out how to add more images or even change the root path to the images.

In the next post, we will extract the IF statements into a Classic ASP Function.


If you are a looking for Classic ASP Experts or upgrading to .NET from Classic ASP , give us a call.