DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
View Events Video Library
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Integrating PostgreSQL Databases with ANF: Join this workshop to learn how to create a PostgreSQL server using Instaclustr’s managed service

Mobile Database Essentials: Assess data needs, storage requirements, and more when leveraging databases for cloud and edge applications.

Monitoring and Observability for LLMs: Datadog and Google Cloud discuss how to achieve optimal AI model performance.

Automated Testing: The latest on architecture, TDD, and the benefits of AI and low-code tools.

Related

  • How to Improve Upon Google’s Four Golden Signals of Monitoring
  • Working With Account APIs for Google Tag Manager and Google Analytics
  • What Is useContext in React?
  • Setting up Request Rate Limiting With NGINX Ingress

Trending

  • Distributed Tracing Best Practices
  • A Better Web3 Experience: Account Abstraction From Flow (Part 1)
  • Monetizing APIs: Accelerate Growth and Relieve Strain on Your Engineers
  • Spring Authentication With MetaMask
  1. DZone
  2. Coding
  3. JavaScript
  4. Google PageSpeed Double Loading: A Third Party Blind Spot

Google PageSpeed Double Loading: A Third Party Blind Spot

Mehdi Daoudi user avatar by
Mehdi Daoudi
·
Mar. 26, 15 · Interview
Like (0)
Save
Tweet
Share
2.02K Views

Join the DZone community and get the full member experience.

Join For Free

[This article was written by Ryan Pelette]

As humans we often trust a product or tool, and innocently believe it works as expected. However, in today’s complex web world with multiple factors at play and products changing on daily basis, this trust could turn into a big blind spot.

Two of the most popular dynamic page optimization solutions are Google’s PageSpeed products, one a module for Apache, the other an online service.

The main advantage of both products is that they apply optimizations automatically without requiring changes to site content, configuration, or coding. The products apply several types of optimizations, all configurable by the site. One particular optimization feature is the “Defer JavaScript,” which defers execution of JavaScript until page load is complete – a great way to improve the page load time and the user’s perceived load time.

While recently troubleshooting a client issue, we identified a problem with the Defer JavaScript module. During testing we noticed that jQuery library was being loaded by the browser twice, though the HTML only referenced it once. After careful troubleshooting, it turned out to be the PageSpeed feature in certain browsers and OS.

Consider the following HTML:

PageSpeed HTML script

In the code above we are using PageSpeed’s “Defer Javascript” to defer the loading of jQuery.

This results in the following in the network panel in Chrome devtools:

PageSpeed Chrome devtools

We can see in the Initiator column that the parser initiated the request to jQuery. This was then followed by a request to the Defer JavaScript library. Immediately after is a request to jQuery again, but this time initiated by the Defer JavaScript library – and luckily served out of cache.

Now, since this is a simple page built to illustrate the problem, it is easy to identify the double request, and the impact was negligent since it came out of cache. However, the client’s page that this was identified on was much more complex and comprised of many more requests. In the live example, the repeat requests were separated by so many requests that when the Defer JavaScript library was added to the page, the problem wasn’t noticed.

The lesson here is that when making changes to a page, always measure before and after. Are the expected amount of requests being triggered, or are there more than there should be? Are more bytes being served than expected? Is there an impact on performance?

The other problem we noticed in the client’s page was that the second request did not always come from cache; sometimes Chrome on Mac loaded the same jQuery library twice.

We noticed this same issue occurring on various pages including PageSpeed’s own example page. In their case, the duplicate request also didn’t come from cache and the downloaded file size was the same (according to devtools).

PageSpeed defer javascript

One of the hard lessons we have learned at Catchpoint is to never trust a single tool, and one should always cross reference and check in a different tool to be safe. Therefore, we made sure Wireshark was running and repeated the test. Here is the packet capture that it provided:

PageSpeed Wireshark

The Wireshark capture confirmed that there were two requests made. In this example, the file size was small so the consequence of this problem is minimal, but had these duplicate requests been larger, and if this was on a mobile device, the impact would be even worse.

Sadly, for our client who reported this problem, the above scenario occurred with jQuery.

PageSpeed devtools jQuery

Downloading 33KB is a pretty significant impact both on the user and the site’s bandwidth bill. It is unclear what the impact is across the web, or what devices and browsers are exactly impacted. According to Datanyze, mod_page_speed is used by 100,895 sites.

It is unclear how many of these sites use the “Defer JavaScript” feature, but for those using it, we encourage you to take a close look at this blind spot to make sure that your pages aren’t being affected as well. Test your pages on various browsers and operating systems, and ensure your libraries are not double loading.

Note: Ensure you test multiple times in the same browser and device, as the problem can happen intermittently. When testing ensure you do not enable “Disable cache” in the browser’s developer tools, as this feature will cause the second request to always load again from server – it is not what happens to actual end users. To defeat caching in between tests, simply delete the cache manually.

Requests JavaScript library Google (verb)

Published at DZone with permission of Mehdi Daoudi, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • How to Improve Upon Google’s Four Golden Signals of Monitoring
  • Working With Account APIs for Google Tag Manager and Google Analytics
  • What Is useContext in React?
  • Setting up Request Rate Limiting With NGINX Ingress

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends: