8 Ways to Improve Webpage Performance

pageloadspeedWebpage performance now affects your search engine ranking. It is because today’s search engines opt for usability and how site visitors are able to view the page, navigate it, and keep users informed. Spam search engine optimization methods won’t stand a chance against today’s search engines.

Front-end performance
The front-end of your webpage (HTML, CSS, JavaScript, and images) is the most requested part in your website. Shared hosting plans won’t let you tweak the server and adjust its settings and even if you do, it will be complicated and you won’t have immediate results.

Optimizing for front-end performance is cheap and has immediate results. Front-end performance is also responsible for the website’s immediate change in response times.

1. Reduce web components to 25kb

Profile your webpage to determine components that need to be optimized and what doesn’t. Profiling lets you analyze your website components like images, HTML, documents, JavaScript, and CSS are being requested by the user, how big it is, and how long it takes to load. The general rule of thumb is to keep your web complements as low as 25kb as possible.
Firebug is a good profiling tool but is only available as a Firefox add-on. I find Monitor.us a useful tool for monitoring my site because it’s web-based and has the same features as Firebug.

2. Save images in the right format
There is a reason bitmap (bmp), jpeg, gif, and png exist. Different image formats are optimized to use for different kinds of images. Here’s a guide on how to use image formats.

  • JPEG is best for photos specially if you want to keep the size small and don’t mind about the quality.
  • BMP is for pixel-based images.
  • PNG is when you need smaller file sizes with no loss in quality. It also supports transparency which means it is great for web page designs.
  • GIF have limited colors therefore it is great for logos, web buttons, diagrams, cartoon-like drawings, headings and is also perfect for compact web animations.

3. Use CSS Sprites to reduce HTTP Requests
A CSS Sprite is a combination of images into one big image. You then use the background-position attribute to locate these images for use in your web page.
Minify/Compress CSS and JavaScript

Minification is the process of removing unnecessary characters like white spaces, source code comments, and tabs to reduce your source code file size. Minifying HTML, CSS, and JavaScript can increase web page load times by up to 50 percent.

There are so many free minify/compressor tools online and my favorite is HTMLCompressor.net. The site has everything you need from compressing HTML to minifying JavaScript and CSS.

4. Combine all CSS and JavaScript to reduce file requests
For every component requests in a web page, HTTP request is created to the server. You don’t have to waste your time gathering all your files and combining it into one because CSSSpriteGenerator.net can do these for you. This web-based tool generates not only combined images but also your CSS code and an example of how to use it.

5. Don’t use inline CSS and JavaScript
CSS and JavaScript files are cached by default in the user’s browser. These files are save into their browser, so when they revisit your site, your page loading speed will increase because their browser doesn’t need to download these files again. If you have a lot of inline CSS and JavaScript in your page, you won’t be taking advantage of the browser caching feature.
6. Use GZip compression
GZip compression reduces HTTP Requests by reducing file size through file compression. GZip compression is similar to the ones you are using in your desktop if you want to compress the files before sending it via mail. Your web server will “zip” your page to the user’s browser then unpack it for your visitors to view the page.

7. Unload site assets and features
By unloading site assets and features to third party web services, you’ll notice that there will be reduced wor.k for your web server. Unloading or Offloading is simply sharing the burden of serving page components to other servers.

Feedburner can manage your feeds, Flickr will take care of your images, and Google AJAX has all the JavaScript you need.

8.Monitor server performance
Your web server is responsible for getting or sending requests and responses to your visitors. It also serves all your web page components. Therefore, it is necessary to monitor your web page performance and have benchmarks of it regularly. This is to detect what issues persist in your website and why your page is loading slow. Select one reliable hosting from best web hosting companies listed here.

Benchmarking before and after making changes will give you some idea on what happened after you have done the tweak or fix to your server. However, it may be that your website cannot handle traffic load. If this happens, either ask for upgrade options or migrate to a bigger, better server.