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.
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 a website which is deployed on Netlify below:
https://hungry-mclean-362570.netlify.com/
Github:
https://github.com/shindosu/mutsuki-portfolio-client
To give a bit of a background, the app is powered with React JS. In the Home page within the <div id="right-side">, I have two React components being rendered. They each are powered by THREE JS, and it is alternating between two pictures infinitely with image transition animations via GSAP. So in total, I have 4 images being rendered on the right hand side. The size of the images are around 13MB total (more images to come)
I also have a slider, where if the value hits >=50 then the styling and the images will change to let the user know the "category" of the images that they are looking at.
Now, it is no where near being done so don't mind the incompleteness. What's bothering me is the loading time of the images (handled by THREE JS, GSAP) is taking an insanely long time to load, which I think is also affecting the loading time of the other elements as well.
How am I able to speed up the loading process?
I tried decreasing the image sizes (it was 60MB before..currently 13MB!); am trying to shred off more but the most I can get down to is around 600~KB/img without losing any substantial quality.
Are there any other way to get around this? This will be a portfolio website so there's more images that will be in the projects page, so I'm assuming if I continue the way that I'm doing right now the outcome is going to be as or more worse than the page that I am working on.
Thank you for your time!
To load images faster in a React application you can use one of the following techniques:
Use lazy loading method --> The image loads only when the user scrolls to it.
Use blur technique --> This loads the images in low resolution initially before the original load
Use JPEG-XR and WebP instead of PNG, JPG etc.
For more details you can refer to https://teacode.io/blog/how-to-speed-up-your-react-app-using-cloudinary-and-lazy-loading
Note: I am not an expert. I was also searching how to increase load speed of images and came across some articles like that mentioned above.
I want to upload the image in my website. The same image will be shown in another website. So this is the scenario where image is uploaded in one website and displayed in both website. These two websites are hosted in two different servers as well as they both have their own database.
I am using Angular JS, Entity Framework, Web API and SQL Server 2014 as backend for both of the website. Currently I am using ngFileUpload to upload the images. Please answer me on below questions:-
Should I upload the image in database(as nvarchar-max) or filesystem(FTP or local web server file system)? I read many articles and get to know that Database retrieval of image has affect on performance but it is more secured. However File System is easy in performance but complex on maintenance like back ups. So I am just not able to decide which to choose among these two as both have pros and cons. Which option will be more suitable to my requirement where same image will be displayed in both website. Please note that there can big images like upto 5 MB uploaded in the application but the number of images will not be huge as compare to any social networking or online shopping site.
How to create different size of images(thumbnail, medium, large etc) automatically upon uploading of image in website? Is there any tool or directive already available in Angular JS to achieve this?
I know my question is broad but I need suggestion to start with my requirements.
Please help.
I use the file system to host my images. If the image is displayed on someone's computer screen, they can use an image capturing software to copy it anyway. Also, while storing them to a database may be more secure, I don't need the extra overhead in my code where a simple url to retrieve the image will suffice.
As for resizing an image using Angular, check out these links:
https://www.scientiamobile.com/page/angular-image-resize
https://github.com/FBerthelot/angular-images-resizer
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.
Complete edit:
I have at the moment small page. I am not restricted to any blogger platform. Just several server restrictions, but some of them are fixed wit .htaccess. DataURI, CSS and sprites will be used to mitigate the connect time penalties.
Will creating AMP entry page (or few pages) be considered cheating, because mainly static HTML with adaptive/responsive CSS will be served and not AMP pages?
Will standalone pictures benefit from the advertised caching if they are referenced in source, but thumbnails are used to link to standalone pictures? Do I have to make gallery with full size pictures to force caching?
Is it worth to create small AMP subset just to advertise or wait to have large content pool and many visitors?
Just answer your question in title, yes you can have AMP and NON-AMP pages. You can see WordPress plugin here https://wordpress.org/plugins/amp/ , they are currently generating AMP page for each Blog Post in Single view, however any other custom post types like Pages, Archive pages, Category pages,front page are all non-AMP.