I am using Babylon CDN for my 360 images on my Shopify site. When I get the GTMatrix site speed report, Babylon CDN has HIGH flag that is showing slows the website load speed. How can I reduce Babylon CDN load size to increase site speed?
Alternatively, how can I prevent it load and I want to render it when I click the button?
Thanks
The technique you're describing is called lazy loading. Here's a shopify blog describing it.
You may be able to achieve this by using the async script tag.
<script src="https://cdn.babylonjs.com/babylon.js" async></script>
There are couple of improvements that can be done to increase images load speed
Compress images (https://tinypng.com/)
Use correct size resolution
Convert images to modern webp format to reduce file size
Use images lazy load (https://github.com/aFarkas/lazysizes)
Related
I have a wordpress website, I use smush plugin to load some images, but the image served by smush always pending, is there anyway to imporve the loading speed of images?
for smush plugin, it is supposed to reduce the image size to make the images load faster.
The site for reference
https://www.ahotech.com/
screen shot of problem:
There are many ways to make the images load faster,for example:
Serve your images over CDN
Use webp version of image
Resize Images Before Using Them
Compress Images To Save Even More Size
Enable Browser Caching For Your Site
if the smush plugin does not work well, you can try another ones like EWWW Image Optimizer
I have developed wordpress website but after hitting it is taking so much time for loading , this is my website link http://www.dahotreanddahotre.com/.
Tell me any plugin or manual setting such that i can decreases the loading time of my website?
There are a few things you can do:
Cache
Use a cache system: https://wordpress.org/plugins/wp-super-cache/
This will let you serve your fixed pages a lot faster to the user.
Minify
Use some minifier: https://wordpress.org/plugins/fast-velocity-minify/
This will make included javascript, css files smaller and thus they will take less time to load
Identify image needs
Looking at the network dev-tools a lot of the loading time (4 seconds +) comes from huge images:
1st image (1.47MB): http://www.dahotreanddahotre.com/wp-content/uploads/2019/03/We-intend-to-be-your-financial-lifeline.jpg
2nd image (1.64MB): http://www.dahotreanddahotre.com/wp-content/uploads/2019/03/We-are-startup-friendly.jpg
Use a Image compressor before uploading them and don't upload images that are bigger than you need.
For example image2 is: 4,300px × 2,862px this could be reduced and compressed.
By decreasing it's size to: 2,150px x 1,431px and compressing it, it becomes only: 350kb
Checking unreachable resources
Still looking at the dev tool I could see some fonts which where giving a 404 error (almost 2 seconds loading).
This means the font is unreachable but the browser still spends time to try to load it.
Make sure all resources are reachable and unused one are deleted.
Use good hosting
Avoid bunch of plugins
Get a custom wordpress theme starting from scratch
Avoid page builders
Optimize images used in website
I have website and i have lots of images on home page.
Almost 60 images in row and i have almost 5 rows of carousel.
But all this image comes from remote website feed so i cant optimize them and the occupy lots of size
when i test my website in gt matrix it shows me 26mb of page so it is obvious it will take
much loading time.I have applied lazy loading images,how ever the speed is very slow
What steps should i take to speed up this kind of page?I dont want to use any plugin because they brake website some times
Upon showing images from another server makes the site slow, because that server may be slow.
So better you try to get those images from your server if possible, else you can try using
plugins like wp-supercache
Minify all your JS and CSS files
For better page speed and avoid these error you should try following things.
Enable Compression from Cpanel
You are using Wordpress so use any of the cache plugin.
Use header expiry using httaccess or page header.
minimize you scripts (css,js).
Use compressed images (jpegtran,pngout).
If your image is casing issue try to use CDN for images.
This will help you to improve page speed.
Crop the images using timthumb. There is wordpress plugins for timthumb probably. Check in wordpress directory as well as it's use. Once images size is reduced, Page would be loaded fast. Additionally, follow the #Jobin Jose's comment, will help you to optimize the speed. Moreover, use WP Super Cache plugins.
How can I detect image that is never used in the website, to improve loading speed of the whole content?.. Thanks in advance...
If an image is never used or referenced in the html then it won't be downloaded by the browser.
Even if they are out on your hosting, they will just be sitting there like storage, and not have an effect on speed of page times.
Here is a good reference for loading time optimization.
http://sixrevisions.com/web-development/site-speed-performance/
Defer Loading Content When Possible
Use External JS and CSS Files
Use Caching Systems
Avoid Resizing Images in HTML
Stop Using Images to Display Text
Optimize Image Sizes by Using the Correct File Format
Optimize the Way You Write Code
Load JavaScript at the End of Your Document
Use a Content Delivery Network (CDN)
Optimize Web Caching
I have a problem of image loading. My site contains around 20 images on home page. It will take to much time to load.
So is there any code in asp.net framework 3.5 that will reduce the load time without jquery or javascript.
Images are loaded by the client browser and cached for subsequent requests. So you could prefetch them using javascript. There's not much you could do on the server side other than of course reduce the number of those images, but I don't think that this is an option :-)
You could also take a look at a technique called CSS Sprites.
"is there any code in asp.net framework 3.5 that will reduce the load time"
No.
However
1) what kind of images are we talking about? Content image or Layout images? If they are layout images then you can combine the images together and use CSS to position them appropriately. This will reduce the number of requests made for images.
2) what sort of file size are we talking about with these images? 10k? 20k? 100k? You can run the images through smushit to reduce the file size.
http://developer.yahoo.com/yslow/smushit/