Best Page Speed Practice: How To Improve Your Web Page Performance

Best page speed practice

it’s no more a secret that Google consider website speed when determining search engine rankings.

In an old post, the team at websiteoptimization.com mentioned about this, and how a slow website can literally kill your Business

“Google found that moving from a 10-result page loading in 0.4 seconds to a 30-result page loading in 0.9 seconds decreased traffic and ad revenues by 20% (Linden 2006).”

“When the home page of Google Maps was reduced from 100KB to 70-80KB, traffic went up 10% in the first week, and an additional 25% in the following three weeks (Farber 2006).”

“Tests at Amazon revealed similar results: every 100 ms increase in load time of Amazon.com decreased sales by 1%. (Kohavi and Longbotham 2007).“

What many people lack when they set up their site is that, if on one hand more and more people are getting access to high speed internet, on the other hand there are many left on dial up. Take in mind those visitors and do a few, simple things to speed up your webpages.

How To Improve Your Website/Blog Speed And Performance.

Best page speed practice

the process to boost your website’s performance, the three main ways you can work on are:

Hardware(your web server)

Server-side scripting optimization(In a nutshell, is a programming language, PHP, Python, Java, which let you make your web pages to be more interactive)

Front-end performance(The structure of the web page)

The vast majority of webmaster or blogger focus on the front end; the interface with web surfers, because it is the most accessible part of your website. 80% of the end-user response time is spent on it.

Also,

It’s inexpensive.

You get immediate results without needs of the particular knowledges.

Reducing the number of components in turn reduces the number of requests required to render the page.

Unfortunately, the Yahoo! YSlow and Google Page Speed Mozilla Firefox plugins don’t tell you what to do with the information they provide.

This post want to focus on front-end performance since it’s the easiest to work on and provides you immediate results and show you the top recommendations you can apply to your website.

Best Practices To Speed Up Your Web Site

Through these simple step I will tell you how to keep your page components as small as possible, finding components that you don’t need or components that can be optimized. Keep file formats under control. save images in the right format to reduce your file size.

These are all good standards that you can use when getting your website to have a better Google Page Speed score.

1. Use CSS to improve your web sites load time – CSS let you add your styles in an external .css file. If you use CSS the browser doesn’t have to read each and every single tag all over again because you replace’s tags with smaller class styles instead.

2. Use External Scripts – When you use the same script on multiple pages, you can simple switch to an external script.

I’m not talking about remotely hosted, I mean loading javascript files from one source instead of adding all that code to each of your pages like this:

That way the browser already has it in it’s cache and won’t have to read it each time another page loads. This one saves a ton of load time, specially for larger scripts!

3. Don’t use big table for faster loading web page – I’m not a big fan of using tables for layout anyway. To make your table show faster, try multiple table. For a faster loading webpage a method that works might be either to having stuff above the main table, so visitors will have something to read because your content in the first table show up faster, while the rest of your page loads.

Try to avoid nesting tables. When you place a table inside another table, it takes a lot longer for the browser to work out the spacing since it has to wait to read the entire html and then work out the layout. If at all possible, try using CSS to create the columns on your page.

4. Try brecking long pages into more readable lengths – People hate see a very long scroll bar, and give up. Often you grab more attention by readers, when you show them more information into multiple page. Also, it make the content show up faster and it’s more likely your readers leave comments in short page than long ones.

Remove Anything You Don’t Really Need

I know many of you now are thinking this is something obvious, but often people lack it and upload images flash and even sound need to showcase all your  all your talents on one page?

Milions of people are surfing every days. People don’t want listen your music or sounds, they have their own music playing hearing song over top.

The last thing anyone wants is a loud music or sounds announcing to their boss that they’re surfing.

As for Java applets, try to ditch them or if you want those effects, JavaScript unusually loads faster and can do just as much or more. Stand back and take a critical look at your website, you may see a few special effects that can be let go of for the sake of faster load time.

1. Remove Excess “Whitespace” – Between two codes there is a whitespace. Removing the unneeded tabs and spaces can help a lot! Doing this will take a lot of extra bytes off the total size of your page and will speed up load time quite a bit.

2. Keep Your Code Clean – Have you ever used wysiwyg editor? If so, be careful. I’ve noticed they will add useless code to your pages. E.g many will leave empty tags which slows your load time pages, and make you pages not validate. So, clean your page by removing any of those excess tags.

Speed Up Images Load Time

The most used images size are the following: Jpeg, gif and Png. If on one hand jpeg provides realistic photos with smooth gradients and color tones on the other hand it’s not the optimal format to use.

Firebug let you know how long component(i.e. images, css files html documents, and javascript files) take to load, and how big it is.

1. Don’t Go Overboard On Images – While images can greatly enhance the look of a site they can really slow it down if there are too many. Try to decide if all your images are really needed (quite a few nice effects can be done with css, so sometimes images are unneeded.)

2. Height And Width Tags – When the page loads and the image size is already defined (ie. you’ve used the height and width tags), the browser knows where everything will be before the images are loaded. Otherwise the page has to wait and load the images before the text. Same goes for tables, so try to use width tags when possible on those as well for a speedier page.

3. Faster Images? Reduce Their File Size – There are many totally free, online image optimizers so you don’t even have to install anything and it’s extremely easy! Online Image Optimizer will greatly reduce the file size of your gif, jpg, or pngs and neither you or your visitors will be able to see the difference other than a page that loads a heck of a lot faster. They also keep the transparency and animations in gifs!

4. GIF, JPG or PNG – Personally on new sites I tend to use pngs file format. PNG is a lossless compression format: that means it compresses images without losing any quality and load fast when optimized.

Jpgs however are usually better for photos and sometimes highly detailed images. The best idea is really to try the image you want in different formats and compare file size to quality.

In brief… If you need images that load quicker, but don’t need sharp pic, PNGs or GIFs are ideal over JPEGs. If your site is for photos, the Jpeg is ideal.

1. Image maps – Combine multiple images into a single image. The overall size is about the same, but reducing the number of HTTP requests speeds up the page. Image maps only work if the images are contiguous in the page, such as a navigation bar. Defining the coordinates of image maps can be tedious and error prone. Using image maps for navigation is not accessible too, so it’s not recommended.

2. Inline images use the data: URL scheme to embed the image data in the actual page. This can increase the size of your HTML document. Combining inline images into your (cached) stylesheets is a way to reduce HTTP requests and avoid increasing the size of your pages. Inline images are not yet supported across all major browsers.

More

1. Combined images – Use CSS Sprites. It’s one of best method for reducing the number of image requests. Combine images into a single image(a CSS Sprite!). You’ve probably heard of it, but do you really understand it? Here’s how it works.

2. Combined files – Combining all scripts into a single script is a great way to reduce the number of HTTP requests, and similarly combining all CSS into a single stylesheet. Combining files is more challenging when the scripts and stylesheets vary from page to page, but making this part of your release process improves response times.

 

3. Reduce complex programs – Your site should use less programs and plug-ins as possible. Check up what you really needs to your purposes. This can help you out with getting your site to load up faster and without as much effort. Also, this will make your website a little easier for anyone to read, and navigate.

 

4. Reduce your redirects – You will need to remove your redirects or those links that might be used to send a user to a different part of your site. Use only the real links. This could take a little longer for a person to go from one page to another if a redirect is used. This will allow you to get your site to be a little easier to use.

 

Minify Your CSS

 

If you want to save a few bytes on your documents you can simple minify your CSS by removing unneeded characters (such as tabs, spaces, source code comments) from the source code to reduce its file size. For example:

This chuck of CSS:

.some-class {color: #ffffff;line-height: 10px;font-size: 5px;}

can be converted to:

.some-class{color:#fff;line-height:10px;font-size:5px;}

…and it’ll work just fine.

To simplify your life and avoid to do the entire job manually, there’s a lot of free tools available at your disposal for minifying your CSS and JavaScript files. For CSS, you can find a bunch of easy-to-use tools from this CSS optimization tools list.

Minify Your Javascript

A good minifying application gives you the ability to reverse the minification for when you’re in development. There are very few tools for that.

When I work on a Web application, I minify the Javascript with tools like JSMIN, YUI Compressor, and JavaScript Code Improver. An alternatively, you can use an in-browser tool like Firebug to inspect html and modify the formatted version of your code in real time.

What If You Can Monitor web server performance

Web server is the brains of the operation. If your web server isn’t performing well, you won’t get the maximum benefit of your optimization efforts.

It’s responsible for getting/sending HTTP requests/responses to the right people and serves all of your web page components.

It clear that do not all users have root-like access, and can install stuff on the server, check out ab – an Apache web server benchmarking tool or Httperf from IBM.

If you don’t have access to your web server you’ll want to use a remote tool like HTTPWatch an integrated HTTP sniffer for IE and Firefox that provides new insights into how your website loads and performs.

Benchmarking before and after making major changes will also give you some insight on the effects of your changes. If your web server can’t handle the traffic your website generates, it’s time for an upgrade or server migration.

 

Leave a Reply

Your email address will not be published.