Shreya Bose, Technical Content Writer at BrowserStack - June 26, 2020
As always, the basic question is the best place to start.
While these frameworks do help make websites more appealing and functional, they also require adding more assets (stylesheets, scripts, videos, images). Each of these assets consumes a certain measure of resources on user devices – GPU, CPU, memory, network.
Obviously, more resources add up to a sluggish, lag-filled, and essentially frustrating user experience. It doesn’t matter how attractive or functional a website is, no user will stick around for a slow website.
- Minify, Compress, Distribute
Remember that internet bandwidth is finite, and latency inevitably occurs when data has to be transferred over long distances. But there are a few ways to reduce this without changing the code.
- Minify the code with a tool like Closure Compiler, JSMin or Uglify. Minification reduces the code size without compromising any of its functionality.
- Distribute static assets with a Content Delivery Network (CDN) that can serve website visitors from a place closer to them geographically. This helps reduce the latency that may occur when browsers download website assets
While these are industry-standard practices, they can be forgotten during development because the network issues would not be noticeable if the website is being developed on a high-speed connection that most organizations tend to provide for developers.
Of course, it is possible to monitor how a website functions under different network conditions using BrowserStack’s real device cloud. Testers can simulate network conditions on real devices and browsers. That means they can run a website on a real device/browser combination, and then change the network strength (from 4G to 2G, for example) and then run the website to check its performance.
- Parse, Compile, Execute
- Parsing reads the bytes of a script received by the browser and generates an internal representation of the script structure.
- Compilation takes this internal representation and generates machine code that can be directly run by the processor.
- Execution is the process of actually running the generated machine code.
Remember, the overall code complexity and structure determines how many resources the processes described above will consume.
Now, as mentioned before, the nature of the user’s device has a significant effect on their experience. Not everyone is accessing the internet with a high-speed connection while using a top-of-the-market MacBook Pro or the latest iPhone. Device power varies immensely, especially with mobile devices.
Testing website speed on Real Devices
Obviously, developers won’t be expending effort and time on optimizing websites if it isn’t slow and user-unfriendly. On the other hand, if a website is slow and losing users, it must be sped up on priority.
However, instead of waiting for traffic to fall before investigating is page load speed is low, use a tool to test website speed before it is released into production. Additionally, as explained earlier, the same website can load fast or slow on different devices because of the device configuration itself. Therefore, it is mandatory to run a website speed test on a tool that uses real devices.
BrowserStack SpeedLab provides exactly that. When a user enters their URL, this free tool runs a speed test of that website across multiple real browsers, devices, and operating systems. The resulting report will show not just how fast (or slow) the website is, but how it fares in terms of speed across multiple real desktop and mobile devices, as well as multiple browser versions.
Speed tests run on SpeedLab generate accurate results, every time. Developers and testers can monitor their website status before and after making optimizations, thus making it easier to track progress, streamlining their efforts, and bringing efficacy into the development cycle.