Agafonov Slava Digest about software

ASP.NET web site perfomance tools, services and plugins

You can use the tools, services and plugins below to reduce the size of the images, JavaScript files, and CSS files used by an ASP.NET application. Website performance is a hugely important topic, so much so that the big companies of the Web are obsessed with it. For the Googles, Yahoos, Amazons and eBays, slow websites mean fewer users and less happy users and thus lost revenue and reputation. Even if you don’t have millions of users (yet), consider one very important thing: people are consuming the Web nowadays less with fat connections and massive computers and more with mobile phones over slow wireless and 3G connections, but they still expect the same performance. Waiting for a slow website to load on a mobile phone is doubly annoying because the user is usually already in a hurry and is paying by the byte or second. It’s 1997 all over again. Why Speed optimization of your website is Important? At Pub Con, Matt Cutts from Google said there is strong attempt to influence in Google to introduce a new ranking factor into the algorithm. The new ranking factor has to do with how fast a site or page loads.

Optimize front-end performance first, that's where 80% or more of the end-user response time is spent”.

Pingdom

You can sign up for Pingdom by visiting Pingdom.com. You can use Pingdom to monitor a single website for free. At the Pingdom website, you configure the frequency that your website gets pinged. It gives you a complete profile, file by file which your page loads. This will let you know exactly which files, javascripts or images are slowing down your page. You might even find out that your host is slow. You never know what surprises you’ll find. Pingdom perform test to check the loading speed of all the objects of a website such as HTML, Frames/iFrames, Images, RSS, CSS. It gives the graphical view of loading times of each item which is very easy to understand and check the individual loading speed of each element. It shows the report of website loading time, loading time of each element, number of elements and total number of elements as a summary of test.

Website performance

Visual Studio 2010 Extensions and plugins:

HTML Spell Checker

Why doesn’t Visual Studio have a built-in spell checker?  Fortunately, however, a former member of the ASP.NET team wrote a free spell checker that you can use with your ASP.NET pages. It is easy to delude yourself that you are capable of perfect spelling. The fastest way to add the HTML Spell Checker extension to Visual Studio is to select the menu option Tools, Extension Manager within Visual Studio. Click on Online Gallery and search for HTML Spell Checker:

clip_image008

IS SEO Toolkit

If people cannot find your website through Google then you should not even bother to create it. Microsoft has a great extension for IIS named the IIS Search Engine Optimization Toolkit that you can use to identify issue with your website that would hurt its page rank. You also can use this tool to quickly create a sitemap for your website that you can submit to Google or Bing. You can even generate the sitemap for an ASP.NET MVC website.

Website performance tools

Image Optimizer

Cool plugin for Visual Studio 2010 for making your images smaller. Adds a right-click menu to any folder and image in Solution Explorer that let's you automatically optimize all PNG and JPEG files in that folder. The optimization doesn't effect the quality of the images, but optimizes them using industry proven algorithms for removing EXIF and other metadata. The extension uses SmushIt for optimizing the images.

Features

  • Optimizes PNGs
  • Optimizes JPGs
  • Works on single images files or entire folders
  • Converts images to base64 strings for stylesheet embedding
  • Embed referenced images directly from any stylesheet (beta)


Website performance plugings


Website performance


Website performance features

When right-clicking image references in stylesheets, you are able to convert it into an embedded data URI in one single step.

Know Your Performance Blockers

Performance can be measured in various ways. One way is technical: seeing how fast a page loads and how many bytes are transferred. Another is perceived performance, which ties into usability testing. This can only be measured by testing with users and seeing how satisfied they are with the speed of your interface (e.g. do they start clicking on your JavaScript carousel before it is ready?).

The good news (and hard truth) about performance is that 80 to 90% of poor performance happens in the front end. Once the browser gets the HTML, the server is done and the back-end developer can do nothing more. The browser then starts doing things to our HTML, and we are at its mercy. This means that to achieve peak performance, we have to optimize our JavaScript, images, CSS and HTML, as well as the back end.

So here are the things that slow down your page the most.

External Resources (Images, Scripts, Style Sheets)

Every time you load something from another server, the following happens:

  1. The browser opens up the Internet’s address book and looks up the number associated with the name of the server that’s holding the things you want (i.e. its DNS entry).
  2. It then negotiates a delivery.
  3. It receives the delivery (waiting for all the bytes to come in).
  4. It tries to understand what was sent through and displays it.

Every request is costly and slows down the loading of the page. This is also caused by browsers loading things in chunks (usually four at a time) rather than all at the same time. This is akin to ordering a product from a website, choosing the cheapest delivery option and not being at home between 9:00 am and 5:00 pm. If you include several JavaScript libraries because you like a certain widget in each, then you’ll double, triple or even quadruple the time that your page takes to load and display.

Scripts

JavaScript makes our websites awesome and fun to use, but it can also make for an annoying experience.

The first thing to know about scripts that you include in a document is that they are not HTML or CSS; the browser has to call in an expert to do something with them. Here is what happens:

  1. Whenever the browser encounters a <script> block in the document, it calls up the JavaScript engine, sits back and has a coffee.
  2. The script engine then looks at the content in the script block (which may have been delivered earlier), sighs, complains about the poor code, scratches its head and then does what the script tells it to do.
  3. Once the script engine is done, it reports back to the browser, which puts down its coffee, says good-bye to the script engine and looks at the rest of the document (which might have been changed, because the script may have altered the HTML).

The moral of the story is to use as few script blocks as possible and to put them as far down the document as possible. You could also use clever and lazy JavaScript, but more on that later.

Images

Here is where things get interesting. Optimizing images has always been the bane of every visual designer. We build our beautiful images in Illustrator, Photoshop or Fireworks and then have to save them as JPG, GIF or PNG, which changes the colors and deteriorates the quality; and if we use PNG, then IE6 arrives as the party-pooper, not letting us take advantage of PNG’s cool features.

Optimizing your images is absolutely necessary because most of the time they are the biggest files on page. I’ve seen people jump through hoops to cut their JavaScript down from 50 KB to 12 KB and then happily use a 300 KB logo or “hero shot” in the same document. Performance needs you!

Finding the right balance between visual loss and file size can be daunting, but be grateful for the Web preview tool, because we didn’t always have it. I recall using Photoshop 4 and then Photoshop with the Ulead SmartSaver, for example.

The interesting thing about images, though, is that after you have optimized them you can still save many more bytes by stripping unnecessary data from the files and running the files through tools that further compress the images but are non-lossy. The bad news is that many of them are out there, and you’ll need different ones for different image formats. The good news is that tools exist that do all that work for you, and we will come back to this later.

LinqPad

If your ASP.NET website accesses a database then you should be using LINQ to Entities with the Entity Framework. Using LINQ involves some magic. LINQ queries written in C# get converted into SQL queries for you. If you are not careful about how you write your LINQ queries, you could unintentionally build a really badly performing website. LinqPad is a free tool that enables you to experiment with your LINQ queries. It even works with Microsoft SQL CE 4 and Azure. You can use LinqPad to execute a LINQ to Entities query and see the results. You also can use it to see the resulting SQL that gets executed against the database:

Top Website performance

Test Your Performance

The first thing to do is find out how your website can be optimized. Here are three great tools (among others that crop up all the time) to use and combine.

ELMAH

ELMAH stands for Error Logging Modules and Handlers for ASP.NET. ELMAH enables you to record any errors that happen at your website so you can review them in the future. You can download ELMAH for free from the ELMAH project website. ELMAH works great with both ASP.NET Web Forms and ASP.NET MVC. You can configure ELMAH to store errors in a number of different stores including XML files, the Event Log, an Access database, a SQL database, an Oracle database, or in computer RAM. You also can configure ELMAH to email error messages to you when they happen. By default, you can access ELMAH by requesting the elmah.axd page from a website with ELMAH installed. Here’s what the elmah page looks like from the Superexpert.com website (this page is password-protected because secret information can be revealed in an error message):

Web perfomance tools

Host Tracker

If your website does go down then you need some way of determining whether it is a problem with your local network or if your website is down for everyone. I use a website named Host-Tracker.com to check how badly a website is down.

ASP.NET web site perfomance

Yahoo’s YSlow

YSlow is a Firebug add-on from Yahoo that allows you to automatically check your website for performance issues. The results are ranked like American school grades, with A being the best and F being the worst. The grades are cross-linked to best practice documentation on the Yahoo performance pages. You can test several settings: “classic YSlow,” which is targeted to Yahoo-sized websites, “YSlow 2? and “small site or blog.” Results are listed clearly and let you click through to learn.

AOL’s WebPageTest

Rather late to the game, AOL’s WebPageTest is an application with some very neat features. (It is also available as a desktop application, in case you want to check Intranets or websites that require authentication.)

WebPageTest allows you to run tests using either IE8 or IE7 from a server in the US or the UK, and it allows you to set all kinds of parameters, such as speed and what to check for:

Once you have defined your parameters and the testing is completed, you will get in-depth advice on what you can do to optimize. You’ll get:

  • A summary,
  • Detailed results,
  • A performance review,
  • An optimization report,
  • The content breakdown,
  • The domain breakdown,
  • A screenshot.
Website performance options

The tools section in YSlow offers a lot of goodies:

  • JSLint Checks the quality and security of your JavaScripts by running them through JSLint.
  • All JS Shows all JavaScript code in a document.
  • All JS Beautified Shows all JavaScript code in a document in an easy-to-read format
  • All JS Minified Shows all JavaScript code in a document in a minified format (i.e. no comments or white space)
  • All CSS Show all CSS code in a document
  • All Smush.it Automatically compresses all of your images (more on this later).
  • Printable View Creates a printable document of all of YSlow’s results (great for showing to a client after you’ve optimized the page!)

Microsoft Ajax Minifier

Whenever possible you should combine, minify, compress, and cache with a far future header all of your JavaScript and CSS files. The Microsoft Ajax Minifier makes it easy to minify JavaScript and CSS files. Don’t confuse minification and compression. You need to do both. According to Souders, you can reduce the size of a JavaScript file by an additional 20% (on average) by minifying a JavaScript file after you compress the file. When you minify a JavaScript or CSS file, you use various tricks to reduce the size of the file before you compress the file. For example, you can minify a JavaScript file by replacing long JavaScript variables names with short variables names and removing unnecessary white space and comments. You can minify a CSS file by doing such things as replacing long color names such as #ffffff with shorter equivalents such as #fff. The Microsoft Ajax Minifier was created by Microsoft employee Ron Logan. Internally, this tool was being used by several large Microsoft websites. We also used the tool heavily on the ASP.NET team. I convinced Ron to publish the tool on CodePlex so that everyone in the world could take advantage of it. You can download the tool from the ASP.NET Ajaxhere. I created the installer for the Microsoft Ajax Minifier. When creating the installer, I also created a Visual Studio build task to make it easy to minify all of your JavaScript and CSS files whenever you do a build within Visual Studio automatically. Read the Ajax Minifier Quick Start to learn how to configure the build task. website and read documentation for the tool

Application Tools/ Plug-ins

1. Pylot

For performance and scalability test, Pylot is an open source tool. It generates the HTTP request, check for the server response and produce reports with metrics. This process is called the HTTP load test which makes the capacity planning, benchmarking, analysis and system tuning easy.

Website performance tools and plugins

2. Google Page Speed

Page speed is the open source tool for webpage speed checking. It mostly used by the developers to check the performance of the webpage and to get suggestion on how to improve them.

Website performance

3. YSlow

YSlow is a Firefox add-on integrated with the firebug. It gets information about all the elements load on the page and display the stats in form of pie chart. It also suggests the ways to improve their performance based on three predefined or used defined rulesets. The ySlow tool is a free add-on for Firefox created by Yahoo that enables you to test the front-end of your website.

Website performance

4. Page Test

PageTest is an Internet Explorer plug-in that show the requests made by the browser visually. It also gives the suggestions on how to improve the performance of the page.

Website performance tools

5. Multi-Mechanize

Multi-Mechanize is an open source framework for load testing and web performance. To generate load against a web site, it allows to run simultaneous python scripts.

Website performance optimization

References

10 Essential tools to build perfomance web site

Top 18 web site perfomance tools

Summary

I like site that can be loaded in 2 seconds. You can always use lazy load for your images, put them in 70% quality and speed up your web site. Also you can use some additional plugins and service web sites for that. Google make top search results arrangement's on web site speed too and you need to calculate it when you making something huge. Let me know if there are any tools that you use daily when building ASP.NET websites  and what can use say about this plugins and tools for better web site performance?

Website loading speed has become the most important part of the website development from last few years. And to optimize it during the development phase is the primary duty of the developers. We as a Professional Website Design Company has listed down the useful Web applications & tools to measure the web performance. But first there is a need to understand its importance in the web development. People love fast loading website so website optimization can make your website getting more traffic and sales. Moreover, it saves your bandwidth since it reduced the website sizes.

Comments (12) -

  • Agafonov Slava

    12/8/2010 12:51:33 PM | Reply

    What free tool to check asp.net code performance do you use?

  • cheap cnx

    12/10/2010 2:45:00 PM | Reply

    Nice article, i will share this to my friends.

  • cyril Gupta

    12/22/2010 2:37:29 PM | Reply

    Super post!... I have known about some of these things since ages, but I use only a few.

  • Slava

    12/23/2010 1:01:26 AM | Reply

    Dron, thanks for this tool I appreciate your help. I found really good method for speed optimization in my blog. http://siteloadtest.com shows CSS Java Script, Images Elements optimization options.

  • Ashley kevin

    12/27/2010 10:40:58 AM | Reply

    This blog gives a lot of ideas. Great job for the article. Very interesting. More informative.

  • kpss kitaplar─▒

    4/18/2011 11:04:23 PM | Reply



    thanks for this usefull informations..
    now i find what i want to know..
    thanks..

  • used cpap

    5/5/2011 9:41:46 PM | Reply

    ASP.NET web site performance tools have been used for JavaScript and CSS files. With this application software monitoring has been made easy. Indeed innovation and technology made our life simpler.

Add comment

Loading

Copyright © 2018 - Design by FS