PikoPong
  • Web Dev
  • Hack
  • Database
  • Big Data
  • AWS
  • Linux
No Result
View All Result
PikoPong
  • Web Dev
  • Hack
  • Database
  • Big Data
  • AWS
  • Linux
No Result
View All Result
PikoPong
No Result
View All Result
Home Web Dev

Third-party JavaScript performance

May 25, 2020
in Web Dev
283 9
Read files in JavaScript


Find out how third-party JavaScript can affect performance and what you can do to keep it from slowing down your sites.

Aug 13, 2019

Appears in:
Fast load times

Milica Mihajlija

Third-party JavaScript generally refers to scripts embedded in your website that are:

  • Not authored by you
  • Served from third-party servers

Sites use these scripts for various purposes, including:

  • Social sharing buttons
  • Video player embeds
  • Chat services
  • Advertising iframes
  • Analytics and metrics scripts
  • A/B testing scripts for experiments
  • Helper libraries (like date formatting, animation, and functional libraries)

Third-party scripts can provide powerful functionality, but that’s not the whole story. They also affect privacy, security, and page behavior⁠—and they can be particularly problematic for performance.

Performance #

Any significant amount of JavaScript can slow down performance. But because third-party JavaScript is usually outside your control, it can bring additional issues.

Network #

Setting up connections takes time, and sending too many requests to multiple servers causes slowdowns. That time is even longer for secure connections, which may involve DNS lookups, redirects, and several round trips to the final server that handles the user’s request.

Third-party scripts often add to network overhead with things such as:

  • Firing additional network requests
  • Pulling in unoptimized images and videos
  • Insufficient HTTP caching, which forces frequent fetching of network resources
  • Insufficient server compression of resources
  • Multiple instances of frameworks and libraries pulled in by different third-party embeds

Rendering #

The way third-party JavaScript is loaded matters a lot. If it’s done synchronously in the critical rendering path it delays parsing of the rest of the document.

Key Term:
The critical rendering path includes all resources that the browser needs to display the first screen’s worth of content.

If a third party has server issues and fails to deliver a resource, rendering is blocked until the request times out, which can be anywhere from 10 to 80 seconds. You can test and simulate this problem with WebPageTest Single-Point-of-Failure tests.

A/B testing scripts can also often delay rendering. Most of them block content display until they complete processing—which can be true even for asynchronous A/B testing scripts.

What to do about it #

Using third-party JavaScript is often unavoidable, but there are things you can do to minimize adverse effects:

  • When choosing third-party resources, favor those that send the least amount of code while still giving you the functionality you need.
  • Use performance budgets for third-party content to keep their cost in check.
  • Don’t use the same functionality from two different vendors. You probably don’t need two tag managers or two analytics platforms.
  • Routinely audit and clean out redundant third-party scripts.

To learn how to audit third-party content and load it efficiently for better performance and user experience, check out the other posts in the Optimize your third-party resources section.

Last updated: Aug 13, 2019



Improve article



Source link

Share219Tweet137Share55Pin49

Related Posts

2020 Roundup of Web Research
Web Dev

CSS-Tricks Chronicle XXXIX | CSS-Tricks

I’ve been lucky enough to be a guest on some podcasts and at some events, so I thought I’d...

March 6, 2021
A Super Flexible CSS Carousel, Enhanced With JavaScript Navigation
Web Dev

A Super Flexible CSS Carousel, Enhanced With JavaScript Navigation

Not sure about you, but I often wonder how to build a carousel component in such a way that...

March 5, 2021
Language in Dev Culture | Laravel News
Web Dev

Language in Dev Culture | Laravel News

How we use language in development-centric circles is as important as the code we design and the sprints (development...

March 5, 2021
Through the pipeline: An exploration of front-end bundlers
Web Dev

Through the pipeline: An exploration of front-end bundlers

This last week I spent a lot of time buried deep in the documentation of parcel, rollup, and esbuild....

March 5, 2021
Next Post
Good News! EA To Open Source Command and Conquer’s Tiberian Dawn & Red Alert

Good News! EA To Open Source Command and Conquer's Tiberian Dawn & Red Alert

Setting TypeScript For Modern React Projects Using Webpack And Babel — Smashing Magazine

Building Reusable React Components Using Tailwind — Smashing Magazine

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recommended

GitHub reduces Marketplace transaction fees, revamps Technology Partner Program

GitHub reduces Marketplace transaction fees, revamps Technology Partner Program

February 4, 2021
How to Play Chess in Linux Terminal

How to Play Chess in Linux Terminal

September 1, 2020
“Durable”

“Durable”

October 20, 2020
Simplifying application orchestration with AWS Step Functions and AWS SAM : idk.dev

Simplifying application orchestration with AWS Step Functions and AWS SAM : idk.dev

May 27, 2020

Categories

  • AWS
  • Big Data
  • Database
  • DevOps
  • IoT
  • Linux
  • Web Dev
No Result
View All Result
  • Web Dev
  • Hack
  • Database
  • Big Data
  • AWS
  • Linux

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In