Quick Guide to Website Speed Optimization

I hate waiting for a page to load and I”m sure all of my visitors fell the same, as well. We noticed that Guest Post Labs is a little slow in loading its content so we are getting started to improve our loading time. I personally took some time to learn about all the tricks and tips to improve the actual loading time and we will implement all the tips once we switch over from our current host.

And in the meantime, I thought of sharing all the things I”ve learned from this experience. Remember, when you optimize your site speed, every millisecond counts.

1. Choose a Good Web Host

Choosing a web host has no direct relationship with your loading time optimization you perform. But choosing the right one is very critical. You need to make sure that you are in good hands. Hosting is the foundation of your site, where security, price, server stability and customer supports plays important roles.

more on this topic: How to Choose Web Hosting Service

2. Host Your Assets Separately

Assets can be an image, javascript, CSS, or web graphics. Hosting assets separately will not improve your loading time dramatically, but it will improve your server stability with this implementation when your website is having a traffic spike.

more on this topic: Maximizing parallel downloadloading scripts without blocking

3. Use Lazy Loading Whenever Possible

Images are almost always big and heavy. They can slow downloading speed of a page. Instead of loading all the images when a browser loads the page, we can start the loading process when the visitor views the specific area of the page.

more on this topic: Lazy Loading ImagesLazy loading plugin,
WordPress plugin

4. External Javascript and CSS Files

When your web page is loaded, the browser will process external resources like CSS and javascript first. So, instead of using inline CSS and JS, it is best to place them in an external file.

Having an external CSS file helps the browser do less work when it renders the page. Also using external CSS files make site maintenance easier as you only need to maintain a global files.

more on this topic: tips on loading external css and js files,

5. Use a Caching System

If you use database to deliver a same content again and again. It”s time to use a caching system. By having this system is place, you need to create the content once instead of every time a visitor loads your page. Caching systems periodically refresh based on how you set it up to cache constantly changing pages.

For WordPress, plugins like WP Super Cache converts dynamically generated pages to HTML files to reduce server processing. For your PHP web server you can use extensions called PHP accelerators to cache server side scripts and database to improve performance and scalability.

more on this topic: Increasing performance with HTTP Cache Headers

6. Avoid Image Resizing in HTML

If the original size of the image is 1200x800px in dimensions, but you need the dimensions to be 400x300px, you should resize the image using an image editor like Photoshop instead of using HTML”s width and height attributes. This is because, a larger image will be bigger in file size than a smaller image.

7. Stop Using Images to Display Text

Not only your text in the image is unavailable to screen-readers and utterly useless for SEO, but using images to display text also increases the loading time of your page because more the images heavier your page is.

If the need to use a lot of custom fonts is the only thing for you to use images for text, learn about CSS @font-face or use service like typekit to display text more efficiently.

8. Use the correct Image Format

You can optimize image file size without losing quality by picking the right image format. Example, PNG format offers image transparency, if you don”t need that JPG format
displays images at smaller file sizes.

more on this topic: choosing the right image format

9. Clean Code

Do you need all the tags you are using? Can you use CSS instead? For example, instead of using you can easily use CSS to define heading size. Writing efficient code reduces your file size and makes maintenance os HTML and CSS files easier.

More on this topic: clean code

10. Load Javascript at the End of Your Document

It”s always best to have your scripts loading at the end of the page. it allows the browser to render everything before gets started with scripts. This makes your pages more responsive as the way JavaScript works is that is blocks everything below from rendering.

Note: Don”t put your analytics code at the bottom of the page, it might not catch the visits if the page load request canceled before the completion.

more on this topic: Defer loading

11. Use a Content Delivery Network

Your site speed is greatly depended on the user location relative to your web server. Having your content cached in strategically placed geographical locations takes care of the problem. Operating cost of CDN is little higher but will gain more on speed.

More on this topic: use your own cdn

12. Optimize Web Caching

Web Caching is when files are cached by the web browser for later use. A browser can Cache CSS, JS and image files. Apart from using external JS and CSS files, we can make caching effective in many ways.

For Example, You can set HTTP response headers such as expire and Last-Modified to reduce the need to download the page again if the user revisits the page.

More on this topic: leverage browser cachingheader expire

13. Compression With GZip

Compressing the content for sending from server-side to client-side reduces the time to process each request. Gzip is one of the best ways to do this and it varies with the type of server you use. Apache 1.3 uses mod zip, whereas Apache 2.x uses mod deflate.

More on this topic: gzip compression

14. Using CSS Sprites to Reduce HTTP Requests

CSS sprites can reduce the load time by simply reducing the number of HTTP requests your page makes to the server through consolidation of your CSS background images. While it is true that bandwidth will be saved with sprites, it occurs only on initial page load. When you combine that with the fact of higher internet speed and amount of time spent on slicing the design, there may be a little reason to use the sprite method.

More on this topic: CSS Sprites

15. Reduce DNS Lookups

It takes about 20-120ms for DNS to resolve IP address for a given domain name and the browser can”t do anything until the process gets over. Steve Souders suggests that splitting the compress into at least two but no more than four hostnames reduce the DNS lookup and reduce the loading time considerably.

More on this topic: DNS Lookup

16. Merge Multiple CSS and JS Into One File

Loading a page with one combined script. source – http://yuiblog.com/blog/2008/07/21/performance-research-part-6/

We know that reducing the HTTP requests has the biggest impact on improving the loading time and is also the easiest improvement to make. One technique without having to change the page design is to combine multiple JS files into single file and similarly combining multiple CSS files into one.

More on this topic: combining css and js

17. Handling CSS

CSS is the foundation of style, as well as the look and feel for modern websites. It gives greater flexibility in fewer lines of code. However, if done badly, it could backfire badly. Here are some guides to optimize CSS properly:

Keep Elements Kids in Line with Offsprings
Optimizing CSS
7 principles of clean and optimized css

18. Delete Unused Plugins

When you notice your website is loading really slow, see if you have a lot of plugins installed. They might be the culprit

19. Remove Unnecessary PHP Tags.

If you look into your theme”s source code, you will find a lot of tags like these:

They can be pretty much replaced with text content that doesn’t cause a load to the server.

More on this topic: 13 tags to delete from your theme

Useful tools and websites:

ySlow – Analyses web pages and suggests ways to improve their performance.

Fiddler2 – Is a HTTP debugging tool to analyze incoming and outgoing traffic

Monitor.us– It”s a free service for monitoring performance, availability and traffic statistics.

Apache jMeter – A Java-based desktop application for performance testing Apache servers.

CompressJS– It compresses JavaScript files with Google Closure Compiler and then make a single file of them. Reduce file sizes and save bandwidth with just one simple command.

Smushit– Probably one of the most efficient online tool to optimize images (wordpress plugin )

Jpegmini – Compress Jpeg images without loss in quality

pngout – Free tool for lossless optimization of your PNG images

compressor.ebiene.de – JavaScript and CSS compressor

Minify – PHP5 app to combine and compress CSS and JavaScript files.