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.
Related
i'm hosting a page built on react on github pages, my problem is that im displaying a video and it affects performance. Should i buy a cdn to serve videos or images, or i should change server and still serving static content? The cdn would help or github pages it's slow anyway ?
How are you embedding the video? If you embed the video via Youtube it should select a quality low enough to suit faster loading times, otherwise you can try lazy-loading=true in the video tag, and maybe async if you're pulling it from another source. Otherwise you'll find the most impact in performance is to limit the amount of data the client has to download by compressing the video.
I have a website which have loading time of 10 sec, and which we want to reduce to 3 second or so. I have two questions on it:
1. When I do an analysis of bundle loading in the network tab of dev tools, I can see some JS/CSS files which have very less usage in home page load. But since bundle.js contains everything, I can't see what JS part of it (which is unused), is present in which source code file. Is there a tool or way to do so, so that I can reverse map (not covered JS and css), to an actual source code file and modify it?
2. While the bundle is downloading, is there a way to show a spinner or progress bar to the user to wait for some more time, which is obviously better than showing blank page?
Tried lighthouse and analysis of loading using network tools
React supports code splitting : https://reactjs.org/docs/code-splitting.html
If you implement code splitting in your app, then you can use a fallback component.
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.
Im looking for some guidance on a responsive site design written using Bootstrap 3.
Basically I want the mobile version to be as lightweight as possible and only load JS and HTML that is necessary for the mobile view, and not load assets required for the desktop view. I would like to ignore loading specific JS files when the page is loaded via a mobile device.
Is there a simple method to do this with Bootstrap?
My guess is that I need a Javscript function to detect the device and use that as a trigger, however I was wondering if Bootstrap had this capability that I could use?
Appreciate any thoughts.
It seems there is already answer to detect mobile browser with javascript. Detecting a mobile browser
Otherwise you can detect the mobile device by using http_user_agent to decide not to load assets when the page is loading.
Here is already answer to detect mobile device with php.
Check if PHP-page is accessed from an iOS device
You can perhaps do it by user agent. There is an answer here that might help
Load a javascript file and css file depending on user agent
This is probably a newbie question but....
I am developing my first mobile website using Sencha Touch 2. I now deployed the app to my Hosting server but.....it takes about 11 seconds before it even starts up ??
This is when I am running it in Chrome on my development machine.
It does 247 request with a total of 1.8 MB.
247 requests ❘ 1.8 MB transferred ❘ 10.65 s (onload: 10.66 s, DOMContentLoaded: 352 ms)
Is this normal ? I mean, this is only the framework stuff.
Thanks
You need to concatenated and minimize all of the files that you use into one big file
Use Sencha Command for Sencha Touch 2.1
sencha app build
If you've deployed development version directly on server then overall loading time will increase. To deploy app, you should build your app with compressed css and js. Follow this guide to start with. After successful build you'll get minified version of js files. Consider compressing css files too. To compress CSS files, you can use compass. Although, you've developed app already, consider going to theming guide that covers how to compress css files for production version.
As you've mentioned app is making 247 request. I assume that includes images too. You can base64 encode images directly into CSS files to avoid frequent communication with server. Another way to reduce image requests is to use css sprites.
SO also uses css sprites for different images seen here.