Optimizing webpages for better site performance

An important part of web development is optimizing your website to give users a better browsing experience. There are many ways you can improve your website to reduce load times, for example:

• Use one CSS and JS sheet
• Serve scaled images
• Use caching

CSS and JavaScript files

Having multiple CSS and JavaScript files can cause performance issues, because the browser needs to make multiple requests and download each file individually. While the browser does this the rest of the page won’t load, which is obviously a problem. Most people will do this because style sheets and JavaScript files are getting bigger and unreadable, so the solution is to combine and minimise the files dynamically!

We use this solution, because we have many style sheets and JS files and it is quite hard to keep track of them. So they are separated and then dynamically combined into one big file. For C# the code is simple: Create a List<string> collection and add all your files, then using a foreach statement, StreamReader and StreamWriter class add your files to one big global file.

    //Add all your files into this collection
        List<string> CssFiles = new List<string>();

        CssFiles.Add(Server.MapPath(WebsiteSettings.CSSDirectory + "style.css"));
        CssFiles.Add(Server.MapPath(WebsiteSettings.CSSDirectory + "tutorials.css"));
        
//if the main stylesheet exist delete it first
            if (File.Exists(OutputPath))
            {
                File.Delete(OutputPath);
            }

//Loop around each file reading it’s content
            foreach (var file in files)
            {

                using (StreamReader Reader = new StreamReader(file))
                {

            //write the file, true means append file
                    using (StreamWriter writer = new StreamWriter(“global.css”, true))
                    {

                        writer.Write(Reader.ReadToEnd());
                        writer.Flush();
                        writer.Close();
                    }

                }

            }

The above example is given for CSS, however the same method can be used for JS. Since there are popular libraries for JavaScript (JQuery being the most popular) it is also best to use a CDN, since most users are likely to have a cached copy. This means the browser will not need to request it again.

For our website this style sheet is around 48KB uncompressed. Another feature you can add is using regex to remove all white spaces and comments, which shrinks the file to 44KB uncompressed.

Images

Large and unscaled images are a big performance waster for a website. Most users will exit your website if images blocked the rendering of content, so it is good practice to place width and height attributes on <img> tags and serve scaled images. This is becoming increasingly necessary since the mobile market is taking over, and you don’t want to give a mobile user a 1080px wide image on a 320px device!  This is quite difficult to fix, especially when images are embedded with content, however there are solutions. You can use CSS to dynamically resize the image, but this does not offer any speed boosts for mobile users since they would need to download the larger image in the first place. For ASP.NET the solution would probably be to resize images on the fly using parameters.

If you’re not developing for mobile it is still good practice to provide scaled images.

Caching

Lastly, use caching. Most browsers will cache pages to speed up loading times, however ASP.NET also offers application caching and output caching. Caching is ideal for content which will not change (especially database content). For example, here is an intranet website we have that tells us the website stats:

These stats don’t change often and there is no point querying the database every page load.

As you can see it took the page (intranet) 9 seconds to load, which is a long time for a page load.

    if (Cache["DatabaseStats"] == null)
    {
       //Db Queries
    }

Application cache is stored in memory and you provide key/value providers for storing cache items. To retrieve cached items provide the name (make sure it’s NOT NULL). After placing our queries into that If Statement, here is the load time result.

After caching there is a HUGE improvement: the page loaded in 16ms!

Site performance is an important part of web developing, and it is good practice to optimize your website to give users a good web experience. Just remember there are many ways to speed up your website:

• Serve scaled images
• Combine CSS and JS files
• Use caching
• Remove unnecessary code

To learn more about the ASP.NET caching see this Microsoft Article.