8 Web performance improvement recommendations from engineers

Today, as the internet prevails, more and more online users are looking for a secure and fast access experience. As the Web page expands and the third script eats up traffic, Radware offers site operators the following improvements to help them deliver the fastest and highest quality access experience for their users.

1. Manage "page bloat"

Page size is closely related to performance. According to the survey, the top 100 e-commerce page size median reached 1492KB, a 48% increase before 1.5.

of the 10 fastest pages in the research report, the page contains 50 of the resource requests, with a median page size of 556KB. With the slowest load of 10 pages, the page contains 141 of the resource requests, with a median page size of 3289KB. In other words, the slowest-loaded page has a median of three times times the number of top-loading pages, and six times times the page size.

Carefully study the size of the page, we can get more information. The fastest loaded 10 pages contain a relatively dense range of resources: between 15 ~72, the smallest page size is only 251KB, the largest 2003KB. The 10 most loaded pages contain a wide range of resources: between 89 ~373, with a minimum page size of 2073KB and a maximum of 10MB.

2. Image optimization

An image is one of the culprits that causes page bloat, and typically occupies the 50-60% of page bytes. Adding images to a page or zooming in on an existing image is an effective way to quickly get users and improve business conversion rates. But this approach can have a serious impact on performance.

Image optimization is one of the easiest ways to improve performance, which can make pages load faster. In order to achieve more effective image rendering, the image must be compressed and integrated, the size and format of the image must be carefully adjusted, the image quality must be optimized, so that the importance of the image can be differentiated by the loading processing.

3. Controlling third-party scripts

In a typical page server request, requests from third-party scripts accounted for 50% or more of them. These third-party scripts not only increase the number of bytes in a page, but also become the largest potential point of failure in a Web page. unresponsive, non-optimized third-party scripts can slow down the overall network load.

The workaround is to delay the loading of the third-party script and load it after the content of the critical page, ideally by loading it after the page onload event, so that it does not affect the search rankings of the enterprise (Google will use the OnLoad event as the load time indicator). For some analysis tools and third-party advertisers, if the method of delaying third-party script loading is not feasible, the asynchronous version of the script can be used to synchronize the loading of critical content. Users must understand what scripts are in the site, delete useless scripts, and continuously monitor the performance of third-party scripts.

4. Truly mobile device first

"Mobile first" is not a completely new concept. As early as 2013, mobile devices were used more than desktops, but there was a gap in the real focus on mobile device development compared to the many verbal promises of mobile performance. For example, in November 2011, the average page size on a mobile device was 475KB and now grows to 897 KB. In other words, the average page size almost doubled in just three years.

Despite some progress on mobile devices and networks, performance is still not in sync with service page requirements that are close to 1MB in size. We know that the page size is closely related to the load time, and mobile users are particularly sensitive to slow loading speeds. If the company wants the website to truly "mobile device first", it must deal with these problems correctly.

5. Performance-Responsive web design

Responsive design gives designers and developers more control over the look and feel of Web pages. It can make pages across multiple platforms and devices more beautiful. But it also brings huge performance losses, which are not mitigated by faster browsers, networks, and gadgets. And as time goes on, such effects will continue to deteriorate.

Responsive design is built on style sheets and JavaScript. However, the performance problems of inefficient CSS and JS are far greater than the benefits of their design advantages. The style sheet should be placed in the head document for progressive rendering of the page. However, style sheets often appear elsewhere on the page, which hinders the rendering speed of the page. In other words, a JavaScript file should be placed at the bottom of the page or loaded after the critical content is loaded is the proper way to handle it.

6. Real-time monitoring performance

We all know that to solve a problem you have to have a good understanding of the problem first. To solve page performance problems, businesses need to know when a user can see and interact with the main page content, and the enterprise needs to understand how performance and availability issues affect business metrics. The enterprise needs to have the method to obtain the actual performance index and analyze it. Real-time User monitoring (RUM) tools can capture, analyze, and document the performance and availability of your site in real time from a real user perspective.

7. Do not rely too much on CDN to solve all performance problems

Sites that use Content distribution network (CDN) to render primary content are much longer than sites that have never used a CDN. This is a correlation issue, not a causal relationship: Typically, a CDN Web page is larger and more complex than a site that does not use a CDN. The size and complexity of the page is the culprit for the performance problem, not the CDN. But this result also shows that relying on a CDN alone does not solve all the performance challenges.

If deployed properly, a CDN is a very effective tool for solving latency problems: shortening the time it takes for a managed server to receive, process, and respond to requests for page resources such as images, CSS files, and so on. However, delays are just one of the key issues in modern e-commerce websites. To achieve optimal acceleration, site operators can employ a combination of solutions: cdn+ front-End optimization + Application delivery controller and internal management.

8. Enhance the publicity of Web performance concept within the enterprise

A large number of studies have shown that increasing page speeds can have a positive impact on all key performance indicators: page visits, user cohesion, business conversions, user satisfaction, customer retention, shopping cart content and revenue.

However, as indicated in the 7 recommendations above, many businesses have made the same mistake and ultimately compromised Web performance. Today, companies should focus on the gap between Web development goals and online business goals, and each enterprise should have at least one internal performance specialist to better address Web performance issues.

8 Web performance improvement recommendations from engineers