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 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 learnt from this experience. Remember, when you optimize your site speed, every millisecond counts.
1. Choose a Good Web Host
Choosing 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
more on this topic: Maximizing parallel download, loading scripts without blocking
3. Use Lazy Loading Whenever Possible
Images are almost always big and heavy. They can slow down loading 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 Images, Lazy loading plugin,
more on this topic: tips on loading external css and js files,
5. Use 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 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 Codes
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 you file size and makes maintenance os HTML and CSS files easier.
More on this topic: clean code
Note: Don”t put your analytics code at the bottom of the page, it might not catch the visits if the pageload request cancelled 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 web browser for later use. 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 caching, header 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 amount 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 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 untill the process gets over. Steve Souders suggests that splitting the compress into at least two but no more than four hostnames reduces the DNS lookup and reduces 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 lokk and feel for modern websites. It gives greater flexibility in less 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
7 principles of clean and optimized css
18. Delete Unused Plugins
When you notice your website is loading really slow, see if you have 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 don’t cause 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.
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
Vinoth Shankaran is Guest Post Lab's resident evangelist. He is a major content and UX junkie who loves typography and is constantly in search of new beautiful typefaces.