Your web server, server-side scripting optimization and front-end performance are the three main areas you can work on to boost your website’s performance.
Tweaking and adjusting server settings may not be possible if you are on a shared web hosting plan since you probably will not have root to access the server. Besides, even with adequate permissions, you need to have specialized knowledge of web server and database engineering to be able to do anything with it. Comparatively, the front-end, which is your website’s most accessible part and includes your CSS, HTML, JavaScript and images, is easier to handle and experiment with until benefits begot.
Also, front-end optimization is cheaper, requiring nothing except your time to bring about the results you desire. This article focuses on improving front-end performance since it’s the easiest to work on and benefits your website the most.
Here are a few simple ways to improve the speed of your website and overall performance:
1. Web Page Profiling
Profiling your web page helps you to find components that can be optimized and components that can be left out. Using a profiling tool such as Firebug, you can determine the CSS, HTML, JavaScript and images files that are being requested by a user. Additionally, you can find out the component loading time and its size. Page components should ideally be as small as possible. Less than 25KB size for a component is a good target.
Firebug’s Net tab can also help you detect those huge files that make your website slow.
Here are few other tools (not a comprehensive list) you can use to profile your web page
- Fiddler 2 – Browser-based HTTP debugging tool that helps you analyze incoming and outgoing traffic.
- Cuzillion – Helps to see how your page components interact with each other and find the optimal web page structure.
- mon.itor.us – Helps monitor your website’s performance, availability, traffic statistics, and establish response time.
- Httperf – Helps you see if you can handle high amount of traffic and still maintain stability.
- Pylot – Uses HTTP load tests to help you plan, benchmark, analyze and tweak website performance.
2. Using Right Image Saving Format for File Size Reduction
Images are an integral part of your website design. The three optimal web image file formats are GIF, JPEG and PNG. JPEG is great for realistic photos with smooth color tones and gradients. GIF and PNG are ideal for solid colored images like charts, diagram, logos, etc.
PNG produces same quality images as GIF, but the size of files is comparatively lower than GIF.
3. Keeping CSS and JavaScript Coding Simple
By removing unneeded characters such as spaces, tabs, source code comments, etc, you can reduce the size of your code, save a few bytes and still have them work just fine. For example, the following CSS chunk
.some-class {
color: #000000;
line-height: 15px;
font-size: 8px;
}
can be converted to:
.some-class{color:#000;line-height:15px;font-size:8px;}
and still get the same result.
4. Reducing HTTP Requests by Combining JavaScript and CSS
An HTTP request will be created to the server for every component that will be needed to render a web page. So, 5 CSS files for a single web page will require 5 separate HTTP GET requests to render that particular page. Combining CSS files will reduce the HTTP request required to generate the web page.
You can combine your JS and CSS files using PHP and several other methods. Good old copy and paste to combine works too.
5. Reducing HTTP Requests Using CSS Sprites
A CSS Sprite is a combination of smaller images into one big image. Correct image display requires adjusting the background-position of the CSS attributes. When you combine multiple images this way, it reduces HTTP requests to render a web page.
You can combine several images into one by using the CSS Sprite Generator which allows you to first upload images to be combined into one, and then outputs the CSS code to render the images.
6. Reducing File Sizes by Using Server-Side Compression
If you are on a shared web host that does not have server-side compression, compressing files can be tricky although it will still be required to optimize page components. Compressing components is similar to zipping up files to reduce their file size when sending through email.
Your web server acts as the zip that compresses your page components to send it to the web browser, which in turn unpacks your zip file to see the component. Popular compression methods are Deflate and gzip.
Running your own server or having a VPS makes the task easier. Even if you don’t have compression enabled, installing an application to handle compression is pretty easy.
7. Avoiding Inline CSS and JavaScript
When a user visits your web page, the user’s browser will by default cache external CSS and JavaScript files. When the user navigates away from your page, his browser will carry your stylesheets and JavaScript files and store them until the next time they visit the web page. Caching saves the need to download styles and scripts every time a user visits any particular web page.
However, using a lot of JavaScript and CSS means you won’t be taking advantage of the web browser’s caching features.
8. Offloading Site Assets and Features
Reduce your web server load by offloading some of your website’s assets and features to third-party web services. By doing this, you will be sharing the burden of rendering components with another server. For example, you can use Flickr to display your images, Feedburner to handle RSS feeds, and Google AJAX Libraries API to serve popular JS frameworks or libraries like jQuery, Dojo and MooTools.
9. Monitoring Web Server Performance
The web server is the brains that help your website work. A good performing web server can get you the maximum benefits of your SEO efforts. Constant web server checks is essential to keep website performance issues at bay.
If you have root-like access, check out Httperf from IBM. If you don’t have access to your web server, check out remote tools like Fiddler for analysis and monitoring of web traffic (refer #1).
Some insight will also be available from benchmarking before and after changes to your web page. Consider upgrading your web server, or migration to another web server, if your current web server fails to handle website generated traffic.
src: SixRevisions.com
5 Comments
Leave a Reply
Its hard to find good help…
I am regularly saying that its difficult to find good help, but here is…
Check this out…
[...] that is the end of this article. Here you’ll find some sites that we think you’ll appreciate, just click the links over[...]……
Buy Yankee Candles Cheap…
[...]below you’ll find the link to some sites that we think you should visit[...]…
Its hard to find good help…
I am constantnly saying that its hard to find quality help, but here is…
Tumblr article…
I saw someone writing about this on Tumblr and it linked to…