REDUCE PAGE LOAD TIME NEARLY DOWN TO ZERO

SEARCH FORM OPTIMIZATION • INSTANT PAGE LOAD

desktop_mac
INDUSTRY AND REGION

Transportation, Europe

pin_drop
DURATION

2 weeks

date_range
TECHNOLOGIES

JavaScript, HTML5, CSS3, CloudFront

view_headline
TAGS

Page load time, search form optimization, instant load

remove_red_eye

PROJECT OVERVIEW:

  • Independent digital rail platform
  • Online search form page
  • The search form was used on several devices and platforms
  • 1 developer
  • 2 weeks
  • Objective: Reduce Page Load Time: Improve the search form page load time to make it load instantly.
  • Replace dysfunctional modern technologies with native, faster, and more productive versions.
playlist_add_check

BIGGEST CHALLENGES:

  • Slow page load time
  • The original search form size fully exceeded 1MB..
  • The original form was developed in EmberJS, causing problems for users on slower networks. Users were waiting for a long time for the page to start rendering. On average, loading time on third generation technology (3G) took 10.64 seconds.
  • The JavaScript file alone had more than 500KB.
  • The CSS file contained not only form style, but also styles for the results, checkout page, and payments, which resulted in more than 80KB for the CSS file.
flag

OUTCOMES:

  • Instead of using EmberJS, we implemented form functionalities in plain JavaScript, and by doing so, we reduced the file size to 60KB.
  • We made sure the CSS file contains only styles that are used on the form, which contributed to reducing the file size down to 33KB.
  • All the PNG/JPG and SVG files were resized and lossy compressed, bringing their sizes to as low as possible. On average, sizes were reduced by 55%.
  • S3 was used as a hosting platform, which we then linked to CloudFront distribution. CloudFront has been configured to serve gzipped files, to support HTTP2 protocol, and to set Cache-Control headers in order to leverage browser caching.
  • All the files mentioned above were minified, reducing the project size from the original 1MB to just about 66KB, which reduced page load time to only 0.84sec on the 3G network compared to the original load time of 10.64 seconds. The newly-achieved page load time is 12.7x faster.

INTRO

Can the speed of your website really affect your traffic and your sales that much? You might be surprised.

Nowadays, if your web page doesn’t appear at the speed of light, your customer will move on to speedier websites and, rather than converting those clicks into actions, you will deliver a bad customer experience instead. As a matter of fact, studies show the following:

  • If a page doesn’t start showing in the first three seconds, visitors usually leave.
  • 1-second delay in page load time causes 7% loss in conversion and 11% fewer page views.
  • Websites that load faster have better engagement and conversation rates;
  • Slower websites have lower subscription renewal rates.
  • Visitors spend more time on faster websites.
  • If everything loads quickly, visitors do not bounce.
  • Loyal customers might not leave, but they would rate their satisfaction 16-percent less than usual.

CACHE ME IF YOU CAN

There are many different factors that can have an effect on your page load time. The loading speed depends on the hosting server, web design, and the technologies used—number, type, and weight of elements on the page. Sometimes, it also includes user location, platform, device, and browser type.

In summary, websites can always be improved and attract more visitors. Considering we live in an online-environment that is rapidly changing, constant adaptation is something that is needed.

Here are some of the things we can recommend to improve your page load time:

  • Lossy compression
  • Minification
  • Hosting and CDNs
  • Cache-Control
  • Adequate technologies

before:

High Page Load Time

after:

Low Page Load Time

SIZE DOES MATTER! CONTACT US FOR MORE INFO ON INSTANT LOAD