I created a static React website, there is no database, no node.js, no login system. It is a simple company website with many SVG images and a lot of CSS work. I made it with Bootstrap 4. But when I try to run it on localhost it freezes many times. I am unable to figure out why the website is hanging, also it takes time to load all the SVG images.
Can anyone tell why does it freezes?
Related
could anyone please help with my webbsite loading times?
Whilst desktop pagespeed ranks 99 the mobile version ranks 75 only.
https://pagespeed.web.dev/report?url=https%3A%2F%2Fwww.muscle-cars.eu%2F&form_factor=mobile
What could I do? I already use next/image and wepb, do I have to compress it more?
Yesterday I tried to remove Catamaran font from the website and it speeds up to 96, but it is very unlikely that removing 80kb font would help that much, I think there is something blocking up loading the font. I tried Google API and self hosted both similar result.
Thanks for help.
Here is the result of your website test, we can see that the mobile version only ranks 75.
I used chrome devtools to check this web page and found some issues to enhance your web user experience.
Your website gets the raw css and javascript files from the server. It's too big and will waste more time. You can reduce file size by using ugly javascript and css files when the page is first loaded.
Your website is getting too many javascript files on first load. I found more than 10 files to load. In mobile 3G networks, more time is wasted. So use webpack or other bundling tool to combine these files into fewer files.
You can reduce file size by using tree shaking javascript and css.
Your web page home page can use server-render teck, which renders javascript in server and sends whole html file to mobile browser.
I have WordPress shared hosted server with Hostinger and wanted to deploy my react app there. I connected to the server with SFTP and copied and pasted the build folder's contents into public_html/test-gpu-app.
The app works, but I've experienced the strangest issue: when accessing the page, a blank page is displayed for 5 or so seconds, and full render takes nearly 8 seconds.
I've deployed the boilerplate react app to ensure it wasn't something I coded poorly/inefficiently, and it experiences the exact same issue. When deploying to Vercel, the app loads instantly, so it's clearly something to do with the server.
Server usage isn't anywhere close to maxed out, and every other page on the site loads quickly. I'm at a loss, can't figure out where to go from here.
The page:
https://artofpc.com/test-gpu-app/
GTMetrix test:
https://gtmetrix.com/reports/artofpc.com/e9IhhRzi/
Any help would be massively appreciated.
If you run the chrome performance profiler, you will see that the only function calls happening when the content loads are by a script called cmbv2.js, which appears to be a data tracking framework or something like that.
Your app code is downloaded only # 5 seconds or so, likely an arbitrary timeout by the lib. I'm guessing this is something like an analytics framework waiting to display content before JS initializes so that users don't see flashes of content. Do you have settings that automatically defer JS or anything like that by third party libs?
It reminds me of something like a layer that sits between HTML and the end user, auto deferring JS execution or something like that.
Be warned of this smell, future internet folks!
I used create-react-app to build an app.
This app had require some image, and this image was used in Home Page
If I just want to change that image in Home Page or some new text change, how could I do?
I don't think it's that simple just re-run build. (or it's just like that?)
I don't have any real world web experience.
I want to know how real server how to do that. I think real website could not be off line even in
second.
I am working on an electron application used for display management. The app is used in malls/restaurants/airports for digital display ads. The electron app internally loads a react web-app and then displays it. The react web-app comes from our vendor who has a platform for displaying ads from different vendors. The react web-app is crashing in some instances (it is not able to find the correct ad etc). I am unable to debug this crash because the console.log messages from react web-app are not shown anywhere.
Is there a way to redirect the console.logs from the react application to some file?
Architecture:
- Electron App is a full-screen container for playing any content.
- Vendor provides a web-app, which plays different ads. This web-app is a react application.
- Vendor web-app crashes, but not able to see those logs anywhere.
According to the documentation, if you are trying to debug a renderer process you can open dev tools for this by calling the openDevToos() method on instances of webContents.
This is an example:
const { BrowserWindow } = require('electron')
let win = new BrowserWindow()
win.webContents.openDevTools()
If you are trying to debug the main process, you should be able to leverage Google Chrome developer tools. If you open chrome and go to: chrome://inspect, you should be able to see your electron instance and click "inspect".
There are a few more options, which you can find here but I am of the opinion that these are the two simplest approaches.
I would also suggest leveraging debugger statements, as it will halt the execution of the code where you declare a debugger statement, and you could pin point more easily where the crash is happening.
I use ionic 1.3.1 for my data-driven android app with crosswalk (~14 version I guess).
I have about 3k+ of full images and 3k of their thumbnails (I did that so it woudn't resize images as user scrolls. p.s. was that a bad idea and I shouldn't do that?) in www/img/ folder and I'm displaying them with ionic's "collection-repeat".
It all works great, but the app takes around 5 seconds to load itself and takes up to 70-100 mb of ram while running.
Can I async load images from filesystem ?
If so where do I put them, so they would appear in my apps folder after I build the project and how do I reference the path to each of them from code with src attribute? I guess the other way would be to make a webserver from which user downloads all the images on the first start and then store them in the apps folder, but I don't have any experience with this kind of stuff, so I would prefer the first option for now.
Please, give me some tips on how to implement this or suggest other ways to solve the problem.