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
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
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.
Render Blocking Resources
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.
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.
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.