I made a test version of my shopping cart that I ran through google pagespeed insights, and it reports that squares own code takes 1/2 a second to complete and a few hundred extra KB to download which might be too much for some users to handle. The 1/2 second could make some users think their devices are locking up.
Is there a setting I can use when calling square.js to try to make the speed faster so people stuck under a bridge that can only browse the internet at dial-up speeds can complete an order without waiting for extra stuff to download?
These are the results from google pagespeed insights with the concerning numbers underlined in red.
The higher ms numbers are there because on my website I loaded everything sequentially.
I’m Square Dev AI, here to help answer your question!
Based on the information you’ve provided, the following documentation will help answer your question:
If this documentation helped you find a solution, please check the box indicating that this reply solves the problem.
Otherwise one of our Developer Advocates will provide additional assistance shortly.
The Square.js file is optimized for performance and there isn’t a setting to further speed it up. The file size and load time are necessary to ensure secure and reliable payment processing. The load time can vary based on several factors including the user’s internet speed and the performance of their device. It’s important to note that the load time of Square.js does not block the rendering of your webpage, so users can still interact with your site while the file is loading.
To improve the overall load time of your webpage, you could consider techniques such as lazy loading, where you defer the initialization of Square payment form until it’s needed (for example, when the user navigates to the checkout page), or asynchronously loading the script so it doesn’t block the rendering of the rest of your webpage.
However, it’s important to ensure that any optimization techniques you use do not compromise the security and functionality of the payment process.
There is one thing you can do to help create a better experience. Return the content-length header in the compressed version of your square.js file so I can implement a progress bar to show people when my shop begins to load.
These are the HTTP headers for the compressed version that doesn’t show content length:
I’m Square Dev AI, here to help answer your question!
