As part of its drive to ensure optimal user experience, Google continuously adjusts its search algorithm in favor of websites that perform well. This means that a really slow website can harmful to your brand or business, in terms of online visibility. Sadly enough, it is completely ignored by many publishers and digital entrepreneurs.
Google takes into account user experience in its search algorithm as John Mueller points out: “We do say we have a small factor in there for pages that are really slow to load where we take that into account.”
No ad to show here.
Maile Ohye, likewise from Google suggests “[two] seconds is the threshold for ecommerce website acceptability. At Google, we aim for under a half second.“
The bottom line is that you need to optimize your website’s performance and loading speed, in order to get higher rankings and increase profits. Here are seven really simple hacks that will help you to speed up your website and increase conversions:
1. Optimize images and design elements
When the browser retrieves a website, images often account for a big part of the downloaded content. As a result, optimizing images can result in performance improvements and bandwidth savings.
Here are some guides and tools that are useful when optimizing images and web fonts:
Incapsula: Apart from optimizing websites for speed through its content delivery network solution, the service can also automatically optimize images and design elements, as well as minify code to enhance website loading speeds.
Image optimization guide from Google: A comprehensive guide from Google covering topics like eliminating and replace images, vector vs. raster images, implications of high-resolution screens, optimizing vector images, etcetera.
Optimizila: It is the ultimate image optimizer to compress your images in JPEG and PNG formats to the minimum possible size.
Shrink O’Matic: This is an AIR application to easily (batch) resizes (shrink) images. It handles JPGs, GIFs and PNGs.
2. Cut down the number of HTTP/S requests
Enable HTTP keep-alive response headers and use CSS sprites. This will reduce the delays caused by round trips made as the server is downloading other resources.
Similarly, combine all of the JavaScript files into one and hopefully, this will send a small HTTP request. You can also use image sprites within CSS that will have just one background image across multiple elements. Additionally, you can also use data URI instead of spriting images. This way the encoded data for an image can be included within HTML and CSS, removing the need for an HTTP request all together.
3. Consolidate scripts
Duplicate scripts hurt performance by creating unnecessary HTTP requests and wasted JavaScript execution. One way to avoid accidentally including the same script twice is to implement a script management module in your templating system. The typical way to include a script is to use the SCRIPT tag in your HTML page. An alternative in PHP would be to create a function called insertScript.
Additionally, you can use this awesome tool by GTmetrix for finding recommendations on fixing duplicate javascripts and CSS.
4. Improve caching
Every time a browser loads a webpage it has to download all the web files to properly display the page. This includes all the HTML, CSS, javascript and images.
Browser caching simple means that the browser will be instructed to keep some files in the local cache in order to initiate prompt loading of resources that are requested often. This will help to greatly enhance the loading time.
Browser caching can be done with the help of HTTP headers, where we define expiry dates to prevent the same client from requesting data too often. Whenever a server responds to the browser, the server responds with the Cache-Control and ETag headers.
Cache-Control is the tag that determines the time frame required for requesting the data and ETag provides a revalidation token that is automatically sent by the browser to check if the resource has changed since the last time it was requested. For more insights, please have a look at this guide from Google.
5. Localize your hosting
In order to have a fast website you need to have a good hosting provider with a secure, scalable and reliable infrastructure. Quick, responsive sites are more likely to get higher rankings as compared to slower ones.
Cheap hosting options will often mean that you share the server with potentially hundreds of other websites, resulting in poor level of service. If you run a small-time webiste with not much traffic then it’s not a problem. However, if you have a lot of traffic, a high-maintenance web design, or just want to max out on speed, you have better options, like a dedicated hosting account or a cloud hosting solution.
6. Use GET for AJAX requests
It is also preferred to implement GET requests as compared to POST requests because GET requests perform faster.We use the open() and send() methods of the XMLHttpRequest object in order to send a GET request as mentioned in the below code:
xhttp.open(“GET”, “ajax_info.txt”, true);
xhttp.send();
Here is a code displaying a simple GET request:
xhttp.open(“GET”, “demo_get.asp”, true);
xhttp.send();
Next time, you request resources, try implementing a GET request in place of a POST request and you will surely notice the difference in speed.
7. Optimize visible content
Visible content is also known as “above the fold” content, and it refers to the portion of a webpage users see on their screen before they scroll.
Your HTML should render the main content area (text) first before it loads other elements. Prioritize visible content, and move scripts toward the end, so that the readable portion of your website is seen first (by both the browser, users and bots).
Tools that can help
Google Page Speed Insights: Page Speed Insights analyzes the content of a web page, then generates suggestions to make that page faster.
Pingdom website speed test: It lets you View file sizes, load times, and other details about every single element of a web page (HTML, JavaScript and CSS files, images, etc.) and provides a performance overview.
Yslow: Yslow analyzes web pages and why they’re slow based on Yahoo!’s rules for high performance web sites.
WP-Sweep: It allows you to clean up unused, orphaned and duplicated data in your WordPress. It also optimizes your database tables.
WP-Sweep: It allows you to clean up unused, orphaned and duplicated data in your WordPress. It also optimizes your database tables.
WP-DBManager: Allows you to optimize database, repair database, backup database, restore database, delete backup database, drop/empty tables and run selected queries.
Conclusion
Speed is a killer, and optimizing your website speed helps in reducing bounce rates and increasing conversions. A few seconds of delay can make or break your site. Remember that for every second you save in loading time, you’ll add towards a great UX and boost customer confidence.
What are the tools and best practices that you use to optimize the speed of your site? Please let me know in your comments below.
Feature image: Andy Powell via Flickr
