What causes this warning on Safari? "This webpage is using significant energy. Closing it may improve the responsiveness of your Mac"
We have a React website running with lots of high-quality images that has been experiencing this warning. How do you begin debugging this warning message on Safari? Is there specific things that cause this?
This message is caused by Safari watchdog process that monitors the Javascript scripts running on a page. It is there to notify the user when a script is utilizing too many resources. Your page when loaded on my computer raises the CPU utilization to 68 percent. Be weary of loops and custom render code.
Notes for improvement:
Make the rendering code as efficient as possible.
Combine the your internal Javascript files into a single file, instead of 7 files. Major improvement.
When possible(due to licensing and update considerations) include the 9 external scripts into the single file stated above. Minor improvement.
Split the main page into different sections either as separate pages or dynamically loaded using AJAX. Major improvement.
Avoid svg files. SVG files require a lot of computing power to rasterize and display. This is the main cause of the 7 second load times. Convert the files to png at the largest expected display resolution and offer an expanded SVG file if more detail is wanted(by click or delayed mouse over). Major improvement.
The number of images is not the issue. It is the number of SVG images(on load) and the scripts causing the issue.
- DeepCopy Object in JavaScript using immer
- POST https://localhost:5000/stored net::ERR_SSL_PROTOCOL_ERROR
- How to get data from React native FormData Object
- Wrapping app component with contextProvider component makes the webpage empty
- Cannot build frontend using Vite, TailwindCSS with PostCSS
- Is there a way to make Google wait until all data is loaded for my React website hosted on Firebase with a DB from Firebase before indexing?
- Cypress - Drag and drop not working on a react-based website
- ReactJS: React.render is not a function and React.createElement is not a function
- ERESOLVE unable to resolve dependency tree while installing a pacakge
- ReactJS <input type="date" > format date
- How to disable the Material UI Link API component
- Layout issues with <video> element
- Table data inside forms is not saving
- Where to put constants and types in a React Typescript project
- How to organize types definitions in a React project using Typescript
- STRUGGLING WITH NOTIFICATION COMPONENT
- How to update default value of MUI TextField?
- Tailwind margin and padding not applying
- Error: NativeViewGestureHandler must be used as a descendant of GestureHandlerRootView
- How to change active tab color in Material UI?
- Attempted import error: 'Wallet' is not exported from '@project-serum/anchor'
- React Input Validation Not Working in Form
- React router v6 doesn't support <Prompt /> or usePrompt
- Keycloak authentication with `react-oidc-context`: "No matching state found in storage" after page refresh
- How do you set the document title in React?
- Hiding my API key from being accessed directly
- TailwindCSS not working with Vite + React
- I18nManager.forceRTL doesn't applies changes in first app load
- How can I reduce excess space on the left in react-native-picker/picker?
- Real Time Speech-To-Text Application using socket-io