Maximize Your Website Performance

Delivering high-performance mobile experience to the users has become mandatory as more than half of the internet usage worldwide is spent on smartphones and one in every five consumers expect mobile pages to load instantly. Most consumers abandon the website that takes more than 3 seconds to load and mobile pages often load in at least 8 seconds. It’s obvious, having a mobile optimized website is the key factor when it comes to beating the online competition.

Below is a list of key web optimization tips:

Testing Website Speed and Load

Mobile sites lose half the visitors while loading. Analyze the overall speed of the website from multiple locations around the globe using multiple real browsers with a website speed test tool. Testing the load time of all the website objects such as – html, images, Javascript, CSS, iframes etc. is equally critical. Test the load of your site to see what might be causing the bottlenecks.

Image Optimization

More often than not, the main reason behind slow loading webpages and site speed are exceedingly large images that consume a lot of bandwidth and processing time. If you want your site to load up at reasonable speed resize your images to maintain a decent quality by reducing the size of the file. There are various online and offline tools which can do that for you. Online tools like Tinypng and CompressJPG reduces approximately 50% of your file size. When you compress an image using these tools, similar colors in your image will combine together. This process is called “Color Quantization”. In other words, it turns a 24bit RGB file into a palletized 8bit file with transparency support. In this process, you do lose some of the color depth but it’s very imperceptible. You can also use offline tools for command line or you can download Photoshop plugins.

Accelerated Mobile Page

AMP (Accelerated Mobile Page) is a basic form of HTML for articles, blogs, and e-commerce web pages. Primarily, an HTML page is designed to be light weight and critically coded for really fast loading. In AMP, certain tag of HTML is out of the picture as they increase the load time (e.g. form elements). Additionally, AMP requires a streamlined version of CSS. You can still use most of CSS, but some parts falling under best practices are not allowed. You can read more about AMP specifications to follow the best practices. JavaScript is prohibited for AMP, you have to use an off-the-shelf JavaScript library that AMP provides you with things like lazy loading etc. You can start building your AMP pages by learning from easy tutorials.

Reduce HTTP Request of Your Website

Understanding the HTTP request is very important. Websites usually takes more load time because of too many HTTP requests. The more external files on your website means the more HTTP requests your user’s browser will need to make, and more HTTP requests leads to longer loading time. A number of ways you can reduce the HTTP request are:

• Combine CSS File: Multiple CSS file adds number of HTTP requests on your website. Combine multiple CSS files altogether, as CSS code can be in any number of files and it’ll still works just as well.
• Concatenate your JS: Concatenating your JavaScript can be really painful sometimes as working on websites requires a lot of back and forth and minifying JS and combining it takes most of the time. Grunt is JavaScript task runner, a tool which can automatically perform tasks such as minification, compilation, and unit testing. Grunt is a task based tool which runs on command line and terminal. You can learn more about Grunt and use in your next project to make your website more efficient.

Render Blocking Resources

While analyzing the speed of your web pages take into consideration what might be blocking the DOM and causing delays in your page load times. Also referred as render blocking resources, such as HTML, CSS (this can include web fonts), and JavaScript.

Few tips on how to prevent your critical rendering path.

• Use web safe font: You should buy the font you’ve chosen or you can use a Google font. Sometimes when you convert a black listed font for web purpose they don’t support all the browsers which increase your page load time and originates layout issues.
• Relevant HTML tags and attributes: HTML tags like img, anchor tag and form elements require a lot of other attributes. It is a good habit to use attributes such as alt tag with brief description and keywords for images. These attributes support a good SEO foundation and are better for website performance.
• Compress your icons: Use of heavy icons is very common to feature the main content on a web page which also increases the load time. The best way to use icons is to convert them to SVG (Scalable Vector Graphics) or convert them into a single font file. You can convert your desired icon into a web font using online tool like Fontello. Instead of loading the entire heavy Awesome fonts directory now you can only load the require icons and reduce your page load time.
• Asynchronous JavaScript: JavaScript itself is synchronous language. It is only asynchronous when you do ajax call or, calls a function on window scroll. At this point, the code will stop executing until the call returns successfully. No other code will be running but also won’t interrupt any other that’s already running. An asynchronous JavaScript on a web page is one of the reasons to increase the load time or, sometimes cause page crashing issue on browsers. When you load a web page its loads DOM from top to bottom and when it hits asynchronous code block the browser stops loading everything else until that function loads. The best practice is to put all the scripts in the bottom of your HTML file and use synchronous functions like requestAnimationFrame, nextTick, setTimeout and setTimeInterval or, window load.

Page Caching

The amount of dynamic information you display in your pages will correlate directly to the server resources, memory, and processing cycles utilized, which affect your page load speed. By caching your pages, since they are saved in their fully rendered state, you can achieve performance that nears of static web pages. Page caching allows visitors to access that page more quickly since the database does not have to retrieve each file every time. Caching in most cases works for repeat visitors. First time user will not have the website cached since the page needs to load files at least once before it stores them. If you are using WordPress, you can install third party plugin to enable caching.

W3 Total Cache: most popular performance plugin
WP Super Cache: suggested for high-traffic sites with underpowered servers, seems to be updated most often

Use Content Delivery Network (CDN)

A CDN helps you deliver your asset around the globe in a fast and efficient manner while decreasing your latency. As a website consists of 80% of static resources, using a CDN reduces the load on the origin server.

Avoid 301 Redirects

As redirects slow down the website, it’s always better to avoid redirects as it generates additional round trip times (RTT) and quickly doubles the time that is required to load the initial HTML document before the browser even starts to load other assets.

Damco is a leading provider of fully optimized and mobile friendly responsive website and development services. We have deep domain knowledge and extensive technology capability across the complete spectrum of mobility and web designing, including strategic consulting, design, development, testing, and implementation that are aimed to facilitate faster time to market.

For more information on our expertise, check out Damco’s Digital Services.