Tools to Optimize Web Speed for both Apache and IIS 7 Server
You need a website that loads quickly because it the first impression that makes the web experience better.
Web page loading speed is not everything that matters – it’s also web layout, content, images, banners, navigation etc. But the first thing that a user notices is your website loading response and that can make or break their “first impression”. This is where Search Engine Optimizers come in, because it is their job to create a lasting impression on the web!
Tools to test your website’s speed
- Google’s Page Speed:
- Firefox (direct download)
- Chrome
- Google’s Page Speed Online
- Yahoo’s YSlow:
- Pingdom Tool
- GTmetrix
Key things that usually affect webpage speed
- Mammoth of code (<div> is the solution)
- Too many file connections in the header section (too many HTTP requests)
- Large image files
- Unnecessary redirects from your page
- Bad server response time
- Calling files from other servers
- Heavy JS and CSS code
- Non-responsive layout not optimized for mobile
Steps to optimize your website’s loading time:
I will now cover some essential steps of the web development process. I won’t be adding anything outside of the scope of development.
1) Bad Server Response Time
Do you have a reliable web hosting provider?
This is the first thing you need to ask yourself. It has already been discussed on the Internet many times, so if you have doubts, you can read Ted Chef’s post on web hosting issues that can kill your SEO.
Nobody cares how much you invest on web-design to attract customers, no matter what products you are selling, no matter what deals you are offering… until it loads completely.
2) Code Cleaning
Two words: File. Size. Use the language that allows for efficient coding whether you are using <div>, iframe, tables or embedding Flash objects.
The best choice, of course, is <div>. It is flexible and code-less (also helpful for responsive web design). However, if you’ve been handed a ready-made website, here’s how you can sweep it up:
- Put all the hard-coded JavaScripts and CSS code into a file and include it in the header section. If you can’t put a particular script in a file, at least put it at the bottom just before the closing the <body> tag. If you still can’t do this, make sure to load CSS files first followed by JS files.
- Remove the JavaScript and CSS files which are not going to be used on that particular page.
- If you are using in-line CSS and JavaScript codes, put them in a class in separate CSS/JavaScript files.
Note: if your website is in iFrame or Flash, I’d recommend you re-build your website because Google bots cannot crawl iFrames and Flash-based objects. No donuts for you.
3) Redirects
Redirects are sometimes necessary for your website. It is normally used to send the visitor to a relevant page when the first is not available. But, it may cause web-performance issues if not used properly.
Suppose you create a new detailed page about your service, say Page A. You may want to redirect Page B and C to Page A. It’s better to redirect both pages separately to Page A, instead of redirecting Page B to Page C and then Page C will take them to the Page A.
4) Loading External Plug-ins
If your website is using third-party plugins, RSS or widgets, they may make your website sluggish. Requests going back and forth between your website and third-party servers create a time lag so it is recommended to either not use third-party plug-ins until absolutely necessary, or use trusted ones that have rave reviews.
5) Minify the Code
Minifying Java Script and CSS simply removes the blank spaces that do not substantiate your programming. You may not be able to understand the code properly after minifying, but there are tools available that will make your JS and CSS return to their original state.
Tools to minify:
- Google’s Page Insights.
- Online JavaScript/CSS Compression Using YUI Compressor.
- To compress JS and CSS for IIS7 Server, follow this link: Enable HTTP Compression of Dynamic Content (IIS 7)
6) Image Compression
Large images are usually prime criminals in a low-response website. Avoid image file issues by:
- Choosing proper file type (for example, .JPG, .PNG, or .GIF). It is well defined on StackOverFlow.
- Defining width and height attributes for the <img> tag.
- Creating thumbnail images as .PNG files
Image compression tools:
- Yahoo’s Smush.it (It will quickly optimize the entire folder in 1 go)
- Dynamic Drive’s tool
Recommend Reading
- Tools for image optimization by Addy Osmani’s
7) For WordPress
For WordPress users and Apache servers, the W3 Total Cache plug-in provides great functionality for zero cost.
8) .htaccess
If you are not on WordPress, use .htaccess for Apache. It will help you in compression, caching and minifying.
There you have it. The web is such a vast world, that you’ll find a thousand different methods for doing the same thing. The ultimate advice? Stay connected. There’s nothing like good-old expert advice. Survey the most popular websites and study how they operate. If you still have a question, put it in the comments below!