The idea of next generation web browsing popped up in my mind while thinking about the upcoming changes with high-speed mobile and wireless networks. Then, I decided to write about next generation web browsing first and associate it with web experience portion of new speed enhancements we’ll be getting soon.
Meanwhile, Google has announced Accelerated Mobile Pages (AMP) Project for a faster web. It’s nice to see that my faster web browsing ideas correlate with Google AMP Project concept.
I often talk about user experience and how important it is. Web browsing experience is defined by following aspects:
- Website / Web Page
- Web Server
- Web Browser
The common key criteria of good user experience
From a website, we expect useful content with a friendly interface. Easy to navigate, easy to read, the right combination of colors, good content, secure, fast loading pages, etc.
From a web server, we expect a fast, stable and safe web server which can handle enough number of requests promptly.
From a web browser, we expect proper and fast rendering (displaying the page).
So, the most common metric where we need to consider at every stage is SPEED!
The importance of speed is often expressed by Google as well. Google counts site speed as a ranking factor for search results since 2010.
Speed is also something not so straightforward to get. You can install WordPress with a fancy team and create a cool looking website in minutes. But taking its speed to next level is not so easy. Is your server fast enough? Are your images optimized? Did you set up caching? Are you properly managing loading sequence of objects, scripts on your page? Try to increase your page speed score at PageSpeed Insights and you’ll understand me better. It’s not an easy task.
Metrics affecting the speed that the user experiences
Regarding the stage between a web server and the web page, the speed is related to the size of the data and speed of data transfer. Most of the speed enhancement suggestions address these two issues. Google’s Accelerated Mobile Pages project also focuses on same major points.
The speed of data transfer is heavily dependent on latency which is connection/transmission speed and the capacity which is bandwidth.
The connection should be fast enough, and the road should be wide enough to avoid any congestion. Above a certain level, reducing latency has a bigger impact than increasing bandwidth. It is why I often focus on latency reduction when it comes to speed improvements.
In the networking world, latency is the amount of time it takes a packet to travel from source to destination. You may think that, using the fiber optic lines the latency should be already at the desired level.
Unfortunately not!
Latency is one of the major speed components which is much harder to improve than the other elements. Because it does not include only the time passes during data transfer. It also includes the time the other party decides what to respond and what to ask for more.
That’s why even the total data size is same, as the number of individual data sets (files) increase the overall time also increase. It is almost same as any types of data transfer. From a flash memory to a hard disk, a single 4 GB file will be copied quicker than 4k x 1Mb files although the total sizes are the same.
The situation is similar on the browser side. Depending on the complexity of the web page, a browser can work hard during the rendering process.
Apart from small rendering differences between various browsers usually we tend to use the browser which is the fastest, means fastest for rendering and displaying the content to the user.
I believe the “rendering speed” and “rendering quality” aspects are the main reasons why Blackberry is dead and why younger browsers beat Internet Explorer. The location of menus, detailed functionality, etc. a browser provides do not matter much for most of the internet users.
Which browser opens a website and displays the first visible part (Above the fold) faster?
That matters!
Let’s take “above the fold” as a side note here and continue.
Some speed enhancements are already in place. What is missing?
SPEED = DATA SIZE x TRANSFER SPEED x RENDERING SPEED
We are aware of the formula. There are certain solutions for each component. We can enable server-side compression to reduce data size. We can have a higher speed connection to increase transfer speed, and we can have a better browser with faster-rendering algorithms.
The issue is, to keep the compatibility of server and client (browser) software, they comply with standards which are limiting further speed improvements.
Then, here’s my suggestion for next generation fast web browsing:
A new web server and browser “couple” that works in harmony and focuses on speed and user experience.
Until now, the server software and browser software were always developed independently. A web server, of course, has to support all browsers but why doesn’t it bring additional features (speed enhancements) for a particular web browser, it’s pair?
These features would also be available to other browsers if they would like to use. It is the quickest way to introduce a new technology. Otherwise, it may take ages to align among all browser vendors to change the standards.
If the new technology is a right thing to do, anyhow it will be adopted fast and become an industry standard. Meanwhile, Google is pushing similar strategy with Accelerated Mobile Pages project.
What will the “Web server and browser couple” bring us new?
So, what may this “couple” bring to us regarding faster web browsing? Okay.. now, let’s combine the side notes we have taken: rendering, above the fold, latency and let the browser and server couple focus on these aspects.
Current web servers are already able to compress both static and dynamic data. But, they still don’t combine the files. Let’s take CSS Image Sprites technique as guidance. This method was created to reduce the number of server responses by combining image files and reducing the number of files.
Using a similar method, if the web server can combine files into bigger files but smaller in number and send it using less number of web requests/responses and the pair web browser can break down the combined file into smaller pieces to render, the latency issue will be less.
The combination process on the web server side can be batched instead of real time. Different web pages might use different combinations and by a process of compilation, the optimum number and combination of static files can be calculated and prepared by the web server.
Today, plugins like WP Super Cache generates static files from dynamic WordPress blog.
Why static files provide a faster user experience than the dynamic ones?
Because servers do not need to run scripts and calculate the result each time a visitor requests a page. In this method, the computation is done in advance, and the same result is used for similar requests, saving server processing capacity.
What if this approach is already integrated into the server? Why do we need to install a plugin/platform to enable it?
Pre-generate static files can be a default function of the web server that can be turned on by the administrator.
Moreover, the server can check if the visitor is using a pair browser and also test the client computer’s processing power. If the client if powerful enough and has enough capacity, it can move some of the dynamic processing to the client and do it there. It is how browser plugins like flash, Shockwave, Quicktime etc. used to work.
It is also a basis of client-side Javascript. If the web server can use pre-compiled static content when the client is weak and convert server-side code into client-side script whenever the client is powerful enough, the user experience may improve across different platforms and devices.
The browser can include major common scripting libraries and frameworks by default to increase rendering speed and to decrease the size of data need to be transferred.
Accelerated Mobile Pages project utilizes the same technique. For example, most of the websites include the jQuery library, most of the responsive sites include the Bootstrap framework. Although they are mostly served through a CDN and cached by browsers, I would accept to download additional data (when I’m away from the device) if it would improve my browsing speed whenever I visit a site using already downloaded libraries.
User perception is the reality
Here comes the prioritization of “above the fold” content which is the first content visible to the user. I mentioned about the new server capable of generating static content or combine files whenever needed or in advance of the requests. If it can do the same for only “above the fold” area, the user’s perception of speed might significantly improve. The server can send the above the fold area first, and the browser displays it to the user immediately. Subsequently, the server can send the rest of the page.
Today, this can partially be achieved by proper HTML designing and coding. Because where stylesheets and scripts are included in the document matters. These decisions can have a significant impact on the page load speed, but if the server software can do it automatically, it will improve the user experience without making detailed coding adjustments.
We are talking about in advance or dynamically changing the sequence of data being sent to achieve the better speed perception.
One step further: Accelerated Mobile Pages
What I was trying to describe above mostly will be performed by Google’s AMP Project. The difference is, my idea relies mainly on the web server and client software where Google AMP focuses on web page code that supports caching better than today’s codes.
In the Accelerated Mobile Pages, only pre-defined and limited set of Javascript libraries will be used to enable code simplicity, less code/data size and full caching.
Similarly, CSS will also be limited. We almost never need thick borders with heavy animations on mobile views. So, losing some CSS functionality will have very minimal effect on mobile browsing experience.
For HTML, it’s the same story. Do we really need “label” tag? Actually, no. Can’t we do without “span” tag? Yes, we can. It’s possible to create same looking user interface without using any fancy HTML tag.
There is a MOZ blog post that includes a video about what you need to know about Accelerated Mobile Pages. It’s still at early stages, and all details are not shared by Google yet, but I suggest web developers follow AMP project closely to get a good rank on Google search results when it becomes a ranking factor for SERP.
With the increasing bandwidths and network connections, the next generation browsers (supported by servers) can display the web pages in a blink time with the assistance of projects like Google’s Accelerated Mobile Pages. Let’s see altogether when will we get it 🙂
Happy browsings!