On the Internet nothing causes people as much grief, anger and aggravation as a slow loading website.
If a website does not load within the critical first 2 seconds 50% of viewers will click or tap away and most of them won’t return. This means lower conversion rates, lower rankings on searches and anemic traffic , that’s why improving web application performance is more critical than ever.
How do you make your website load super fast? Check out these 10 tips from my experience:
1. Sign Up With A Good And Powerful Hosting Provider
Don’t skimp on this part. While signing up with a web host with budget plans (think a dollar or three per month) might be tempting it’s kind of like wanting to cross the North Atlantic in 24 hours in a sailboat. Check out this guide before signing the cheque.
2.Replaces Images With CSS Or Font Icon
CSS has come a long way and can now do things that you normally could only do via photoshop (“designing in the browser” can probably help clarify this process too). Consider where you can replace, say, a background image with a CSS gradient or instead of creating a bunch of png icons, use something likeFont Awesome (or, you can go the Github route, and deliver font icons via SVG, if you are worried about quality on scale).
3. Compression, Minify Code & Optimise Code
Compression reduces the bandwidth of your pages, thereby reducing HTTP response. You do this with a tool called Gzip.
Use minified stylesheets, HTML and JS. Removing comments, spaces and tabs will gain you a few kbs per file. Doesn’t seem like much but in page load optimisation, every kb counts.
Lazy load images, CSS and JS. Arrange external JS and CSS so that they are loaded later, or combine several CSS and JS files into one. Configure your server so that everything is compressed (the GZIP compression algorithm cuts down size by almost 70%). Parallelised download of files from cookie less domains can also decrease loading times.
Read this article for more details on Gzip compression. Then set up your server to enable compression:
Apache: Use mod_deflate
Nginx: Use HttpGzipModule
IIS: Configure HTTP Compression
4.Use A CDN
When you host your site on a good CDN (content delivery network) your static assets are hosted in different data centres spread across the globe. A browser located in London won’t have to send server requests to a distant data centre in Seattle- it will send them to a data centre nearer, maybe in London or Paris. That means faster loading times, almost 100% uptime and reduced bandwidth usage.
5.Use A Font Delivery Network
Fonts on your site take up a lot of space and delivering them, especially the ones that are not very common, can be a design challenge. You can use a third party cloud service like Typekit to serve your fonts to readers without slowing load times.
6. Speed Up For Mobile
Compared to desktop devices, mobile devices have lower CPU speeds and have to often work on slow data networks. Minimise the amount of JS that’s needed to render the page and delay parsing the unneeded JS until it has to be executed.
If you are redirecting visitors to a mobile specific landing page – for example www.mysite.com to m.mysite.com – make the redirect cacheable to speed up loading times for repeat visitors.
7.Cache Static And Dynamic Content
Caching improves web application performance by delivering content to clients faster. Caching can involve several strategies: preprocessing content for fast delivery when needed, storing content on faster devices, storing content closer to the client, or a combination.
There are two different types of caching to consider:
- Caching of static content: Infrequently changing files, such as image files (JPEG, PNG) and code files (CSS, JavaScript), can be stored on an edge server for fast retrieval from memory or disk.
- Caching of dynamic content: Many Web applications generate fresh HTML for each page request. By briefly caching one copy of the generated HTML for a brief period of time, you can dramatically reduce the total number of pages that have to be generated while still delivering content that’s fresh enough to meet your requirements.
8.Minimize HTTP Requests
According to Yahoo, 80% of a Web page’s load time is spent downloading the different pieces-parts of the page: images, stylesheets, scripts, Flash, etc. An HTTP request is made for each one of these elements, so the more on-page components, the longer it takes for the page to render.
That being the case, the quickest way to improve site speed is to simplify your design.
- Streamline the number of elements on your page.
- Use CSS instead of images whenever possible.
- Combine multiple style sheets into one.
- Reduce scripts and put them at the bottom of the page.
Also Check Some Advices From SOASTA
Bandwidth: While businesses may have carefully planned for the bandwidth their website will need to generally sustain and maintain a proper user experience, it is important to know what happens when there is a surge in traffic. One key area to pay attention to: the use of unnecessarily large high-res files. For instance, one large “beauty shot” of a popular retail item can be a pointless bandwidth hog that disrupts the desired user experience, while a jittery video can turn off would-be buyers. One strategy to account for this variability is for businesses to design their mobile and desktop apps differently.
Load balancing: Load balancing issues, which are when processing and communications activity aren’t distributed evenly across a network, emerge as a consistent impediment to proper performance. At a minimum, businesses must make sure they monitor and track their load balancers, looking specifically at CPU and memory consumption, as well as SSL transactions.Watch for application issues: There’s no such thing as perfect code. And that means that everything in an app should be tested to find inefficient code, synchronization issues, garbage collection memory leaks or code that’s locking or blocking other functions, such as an e-commerce ordering system that can only process one order at the time. Configuring the application is a critical piece of improving the performance of a website. This problem often manifests itself through page errors or response codes indicating missing resources or incorrect domains. Be vigilant in searching for these errors when moving the application from development to production.
Measure database performance: Whenwebsites grow more complex and as they begin to store more information about users, their database will slow down if they haven’t been optimized properly. For instance, make sure to generate and refresh indexes for all tables. Regularly review SQL queries, the code used to communicate with databases, and statements to ensure optimum efficiency and monitor the memory usage as well as the connections into and out of the database. Finally, beware of the unrestricted, unmanaged growth of data in the databases. Many companies are finding it advantageous to implement careful data lifecycle programs that balance the need to archive less-frequently used data with the need for optimal responsiveness for more current data.
Assess architecture: It’s essential to factor in architectural considerations. Unbalanced tiers, mismatched technology choices, scalability limitations, suboptimal designs and inefficient network configurations can all ultimately manifest themselves in poor application performance. With proper testing in place, businesses can bring these issues to the surface before they impact the user experience.Ensure proper connectivity: Connectivity is a crucial factor in Web application performance. Businesses need to know how many connection points their website currently has and if they are planning to revise or update them. If alterations are coming, businesses want to have a clear understanding of what happens to those applications when they make connection point updates. For instance, there could be latency issues between various systems, as well as firewall capacity or DNS routing issues. It’s best practice to provide redundancy or failover for critical systems.
Don’t overlook configuration settings: Configuration settings may be easy to overlook, but it’s essential that not to settle for out-of-the-box defaults. The right configurations help improve performance and strengthen security. Make sure to tune all environments, from lab to staging to production, and apply those settings on a consistent basis.Watch out for shared environments: With many major sites employing complex architectures, it is important to be fully aware of all of the shared environments that can impact performance. It’s critical to not only communicate with stakeholders, but also be cognizant of internal partners who share the same technical resources.
Verify third-party services: Many websites rely on third-party providers that connect to the site to provide additional data and crucial services, such as Google Analytics, credit card processing or social-media widgets. These third-party services sit outside the architecture, but businesses must include them in their test plans, since they have a direct impact on Web application performance.
Create a performance culture: All of the proper testing the world won’t make a difference if your organization lacks a performance-centric culture. By emphasizing the importance of performance in all areas of the company, businesses can better plan, develop and release a high-performing Web application.
Top comments (0)