How can you minimize the use of third-party scripts on mobile web pages?

Even before you go to tools like DevTools, WebPageTest, Lighthouse etc. IMHO doing a whiteboarding is of utmost importance. Simple question to begin with -- what pupose does it solve? Also create a matrix that lists all the offerings from a third party script. This will help in identifying if there's any offering which is common across multiple service providers... this will help in consolidation and optimization.

Checking the source code as well when was the recent update made to the script/library is really important. Checking for any malicious code in the script library. Checking for any collection of data/cookies and endpoints made by the library. How well the code is tested and how much reusable is the library. Time needed for your team to write such a library versus using existing one. These are all important parts of the audit it self before you decide should you use or remove any script. For example: for simple date time picket you can use pure html elements for date which will trigger the native mobile datepicker instead of using libraries that brings their UI for calendar.

To minimize the use of third-party scripts on mobile web pages, you can: 1. Evaluate the necessity: Assess the need for each third-party script and remove any that are non-essential. 2. Prioritize critical scripts: Load critical scripts inline or asynchronously to prioritize rendering of important content. 3. Combine scripts: Consolidate multiple scripts into a single file to reduce HTTP requests and improve page load speed. 4. Use lazy loading: Employ lazy loading techniques to defer the loading of non-critical scripts until they are needed.

5. Optimize script loading: Load scripts asynchronously or defer their execution to prevent blocking the rendering process. 6. Implement caching: Leverage browser caching to store scripts locally, reducing the need to retrieve them from external sources. 7. Monitor performance: Regularly test and monitor the impact of third-party scripts on page load speed and user experience. 8. Consider alternatives: Explore alternatives such as native solutions or self-hosting scripts to minimize reliance on third-party dependencies.

Auditing your scripts is akin to decluttering your digital space. It involves assessing the necessity, relevance, and performance impact of third-party scripts. Tools like Google Lighthouse offer insights into each script's influence on page speed and user experience. It's essential to differentiate between vital, optional, and outdated scripts to optimize loading times and streamline user interactions. Moreover, reviewing third-party providers' policies guarantees alignment with your privacy and compliance standards, ensuring a healthier digital environment for your website's users.

My best advice here is to use the right tools for the job. There are tools that help solve the customer problems, and there are tools that help you solve the customer problems faster. If using jQuery makes you faster, use it. I tend to favor React because it's what I've used most of my career, even though Solid may offer performance benefit. Elon Musk has a great rule of "make the requirements less stupid." I really take this to heart. Every package needs to fight for its value. If it doesn't add value, I take it out.

Identify any third-party scripts that are redundant or outdated. Redundant scripts may be providing the same functionality as other scripts, while outdated scripts may no longer be supported or may contain security vulnerabilities. Removing these scripts can streamline your website's code and reduce potential risks.

1- Performance : Chaque script ajouté à une page web peut contribuer au temps de chargement de la page.En les éliminant, vous réduisez le nombre de requêtes HTTP et accélérez le chargement de la page, améliorant ainsi l'expérience utilisateur, surtout sur les dispositifs mobiles ou les connexions réseau plus lentes. 2- Réduction des dépendances : vous réduisez la dépendance à l'égard de services externes. Cela peut rendre votre site moins vulnérable aux pannes ou aux problèmes de sécurité associés à ces services. 3- Simplicité du code : Un code plus propre et plus simple est plus facile à entretenir et à comprendre. En éliminant les scripts inutiles, vous simplifiez le code de votre site web, ce qui facilite sa maintenance et son évolution.

if using third-party libraries is necessary then check the domains to be behind a DNS server. because it will helps your clients to load your page scripts from nearest server.

Deferring or asyncing non-critical scripts is akin to prioritizing what's most important for your site's initial load. These scripts, like analytics or ads, aren't crucial for the page's primary rendering. By deferring or asyncing them, you instruct the browser to load them later, allowing your main content to display swiftly. 'Defer' delays script execution until the HTML parsing is complete, while 'async' fetches and executes the script simultaneously without blocking HTML parsing. This improves perceived performance, ensuring users can access vital content faster, enhancing their overall browsing experience on your mobile site.

Chances are if you're here, you're already using a bundler (such as Vite, Webpack, Turbopack, etc.), and these tools handle deferring for you. A more complex example of this would be "lazy modules", which you can utilize to tell your bundler what sections of your app should trigger the loading of additional resources in a more fine-tuned way.

In addition to deferring scripts, an advanced approach involves fully delaying their execution until after the successful loading of all other page components. However, it is important to exercise caution when delaying Java, as it may result in page disruptions or the loss of any inherent automated functionalities. Nevertheless, with the aid of suitable tools such as WP Rocket, for instance, one can effectively delay the majority of non-essential scripts on their webpage and cut load times significantly.

Assess the optional third-party scripts that enhance your website's appearance or provide additional functionality. These scripts may include chat widgets, advertising banners, or A/B testing tools. Consider whether these scripts are truly adding value to your website and whether they are worth the potential impact on performance and security.

Il est important de noter que ces approches ne conviennent pas à tous les scénarios. Certains scripts peuvent avoir des dépendances ou nécessiter une exécution séquentielle. Avant de différer ou d'asynchroniser un script, assurez-vous qu'il n'affecte pas négativement le fonctionnement de la page

One of my favorite tools to use is TailwindCSS. The tool analyzes your project and outputs only the classes you used within the app to a single CSS file that you can import. This makes your overall stylesheets smaller, and avoids duplicate style definitions. For JS (or specifically TS), you can use bundler plugins that both minify and simplify your code. TypeScript can do this out of the box, and you can use other tools such as Vite or Webpack (or Gulp if you're still old-school) to save you some kilobytes over the wire for your app logic. The purpose of minification and deferring is to minimize your FCP and time to first available user activity.

Script minification is a technique that reduces the size of JavaScript files, leading to faster loading times, reduced bandwidth usage, and improved website performance. By removing unnecessary whitespace, comments, and code formatting, minification optimizes script execution and enhances user experience. Automated minification tools and plugins can streamline the process, while thorough testing ensures compatibility and functionality.

En combinant également l'approches des CDN (Content Delivery Network). Les CDN distribuent vos fichiers statiques, y compris les scripts, à partir de serveurs situés géographiquement proches des utilisateurs, réduisant ainsi les temps de latence et améliorant les performances, vous pouvez significativement améliorer les performances de chargement de vos scripts.

While delivering a script from CDN helps from page load time perspective... however at times the version management and cache becomes issue. It is often observed that the latest revised files don't get reflected for some users. If that can be addressed, this is a good option.

A content delivery network (CDN) is a geographically distributed network of proxy servers that cache content, such as web pages, images, and videos, closer to end-users. By distributing content across multiple servers, CDNs reduce the distance that content has to travel, resulting in faster loading times and a more responsive user experience. CDNs also improve website performance by reducing server load and offloading content delivery to geographically distributed servers. Additionally, CDNs can enhance website security by providing protection against DDoS attacks and other malicious threats.

CDNs are great for when you need a library or tool and you aren't using a package manager, such as npm or yarn. In general, your fonts may be loaded from Google Fonts CDN to ensure at least a cached version of the font is available on the visitor's computer for the next time they visit your site, or another site that uses the same font. Many developers don't realize this, but using a CDN for a library, images, or fonts on one site can be used from cache for another site.

Continuously monitor the impact of third-party scripts on your website's performance, user experience, and security. Remove or replace scripts that are causing performance issues, hindering user experience, or posing security risks.

In JS/TS projects you can use a bundle analyzer to figure out the size of third-party modules. If they are disproportionate you should look for other solutions.

Prioriser le rendu critique (Critical Rendering Path) , Implémenter le chargement tardif (lazy loading) pour les images et autres ressources non essentielles. Minimiser le nombre de requêtes HTTP en regroupant les fichiers. Utiliser des outils de surveillance en temps réel pour identifier et résoudre rapidement les problèmes de performance qui peuvent survenir après des mises à jour de votre site

Load scripts upon user interaction. For example you use a 3rd party service for your newsletter signup form (many companies do believe it or not) and you are asked to show a popup after user has scrolled to 50% of the page. Instead of loading the 3rd party script on page load, you can add the script to head, when user scrolled passed 80% of your trigger point.

To optimise and minimise 3rd party scripts one has to; 1. Minify or compress the external files 2. Build your own utility functions as where you can to minimise the dependence on 3rd party utilities (for security reasons) 3. Take a quick glance in your dependencies file and see what are being 3rd party scripts been actively used and which are not. Remove those unused (Tree-shaking method) 4. Load scripts on-demand or dynamically based on which components require certain libraries. (This will reduce the weight of your application and loads much faster by reducing unnecessary downloads) Following these will significantly improve your application performance

One step that might go unnoticed otherwise: Third-party imports aren't all created equally. For example: In JS/TS there are separate package / module standards. ESM modules (as opposed to CommonJS modules) provide a great functionality called tree-shaking, which means that the compiler analyzes which parts of the module you actually require and then it strips those parts away that you aren't using. While this will not remove the dependency alltogether, it will only include in your delivered product what you require so migrating to eco-system / standards that provide tree-shaking can massively reduce the amount of third-party code you ship.