I'm working on my first GatsbyJS project (and hosted on Netlify) and over the past few weeks have noticed that everything is very speedy during development, but when built and hosted the pages are very slow to load (particularly the images).
This is a very simple marketing site (just 6 or so pages with a few images per page), so I figured I must be doing something wrong since Gatsby is said to be "blazing-fast", and that is definitely not my experience in prod. The landing page currently takes ~40sec to load, and is only a few images and a nav bar.
I'm loading images fairly simply per the docs, but is there some optimization step that I should also be doing? Or storing assets in a particular location for Gatsby to optimize?
Most recent build: https://musing-goldstine-2f7024.netlify.com/
Thanks for any info!
With Netlify you can now go to the site you wish to optimize, then: Site settings > Build & deploy > Post processing.
I turned them all on and they seem to work perfectly with my GatsbyJS site, including image optimization.
The issue is that you are serving scaled images. A scaled image is an image that has been scaled to match the size that it is displayed.
For example, on this page:
This cityscape is resized in HTML or CSS from 3840x1200 to 1366x600. Serving a scaled image could save 5.0MiB (82% reduction).
To track this: open Chrome Developer tools (CMD + OPT + I) on Mac
Navigate to network tab, CMD + R to refresh
You can sort by size, load time, etc.
Chrome Developer Tools Network Tab on this site
Another good site to analyze your page speed:
https://gtmetrix.com/
To improve page load time:
Use a photo editor (Photoshop, GIMP, etc) and resize the photo dimensions down to the maximum display size.
After resize, compress images to improve page load time further.
Resources for compressing images:
NPM package such as sharp
Command line tool: ImageMagick
In Browser: Optimizilla
Image Optimization Guidelines
Google Page Speed Recommendations for Optimizing Images
Final step: Replace your unoptimized images with your newly optimized images. You should see a drastic improvement in page load time.
Related
I have a simple website created with HTML, CSS and JavaScript and it's hosted on Github pages. But on my site I have like 20 images and when I open my site on the browser it takes a while for the images to load.
How can I make my images load immediately or just faster? Is it because of Github pages host or is it because there are a lot of images on one site?
I have seen websites with more images than that and they are like preloaded or something.
Here is an image
Ways to make images load faster on page
0. Check what's slowing down your page
You can try finding what's slowing it down here: https://web.dev/measure/
1. Compress your image
You might need to compress your image if you don't need it to have so much quality. If you need quality, go to option 2. One website that does this is Kraken. This should allow the page to load faster.
2. Use a CDN
If it still does not work, use a CDN, or content delivery network, to host your images. CDN's store data in many data centers, making it to load data quicker. Try hosting your images in Cloudflare.
3. Make your images smaller
Large images can make your site load slower. So, resize them so they are a bit smaller.
I hope this helps you!
I purchased the Celia template from Envato Element and edited most of the codes.
I hosted my website on Github here: https://github.com/rosyhnguyen/rosyhnguyen.github.io.
I used the domain from Namecheap: https://rosyhnguyen.me
My site doesn't contain any video or media files, but it takes a lot of time to load (almost 5-10 seconds to load case study page).
Can you please help me with what's wrong with my setting? All of my settings are in the GitHub link above. The site takes a lot of time to load
If you want to have a good overview of what is happening on your site you should inspect the Network tab waterfall on Chrome developer tools.
From what I can see there's a resource called: 'sketchslider-2.png' and another png too that is 16mb.
Images are killing your performance.
Image sizes on websites should be reduced as much as possible as well as using minified versions of CSS and Javascript.
You're using super heavy png files all over the places.
Also try to look in your code for some missing resources cause I saw also some 404 around.
You can reduce the size of your images using an image reducer tool (like https://tinypng.com/) or Photoshop for example.
I've made a screenshot to make you see the problem on your case study page.
Hope it was helpful.
Network waterfall screenshot
Check your network tab in chrome.
sketchslider2.png is almost 15 mb and the image size is 7001 x 3842
fitcheck.png is 4.5 mb and size is 8168 x 4000
unless you are planning on projecting your website to a wide screen TV, there is no need for these sizes.
Large scale images need should be optimized in the 1920 x 1080 range.
If you resize your sketchslider to 1920 width and save as a jpg then you can reduce its footprint to around 175 kb
for fitcheck, under the same conversion you can get it to around 100kb
up-decor.jpg also can't be found either and it is burning some time trying to resolve it.
I am currently using the Flickity library to display corousels on my wordpress site.
The problem: When the site produkte is loaded the first time a lot of images get not loaded fully but only the first centimeter.
I am happy for any hints regarding this problem.
Kind regards
Lukas
1) Optimize images using Photoshop or below url and then upload in word press
or add image optimizer api in your word press website
https://kraken.io/web-interface
2) Minify CSS
3) Leverage browser caching for the cacheables
4) Minify HTML
cross check with https://gtmetrix.com/ too
hope this will help and boost website performance
Best luck
The most improvement you can get is to optimise the image size to make them as small as possible. Use this online service to reduce image sizes.
https://tinypng.com/
You can also install a plugin like Smush to optimise images automatically when they are uploaded.
https://wordpress.org/plugins/wp-smushit/
Also to reduce image sizes in the future you can install this plugin to ensure files of excessive size are resized.
https://wordpress.org/plugins/imsanity/
Once you have done this then you can use a caching plugin to speed up you site's overall performance.
We’re using Chrome for an interactive installation and appear to have hit some sort of image loading ceiling.
The app is built for a multitouch device and runs at 1920x1080. It's built on backbone and involves the rendering and removing of a large number of views which contain sprite animations (facilitated by the stepping of transparent png background images).
We’re preloading all of the images and listening for completion using David Desandro’s imagesloaded plugin. This worked perfectly at first (with less assets) and appears to work now, until you navigate further into the application. Despite the absence of 404s in the console and the confirmed presence of the files some of the images aren’t loaded and simply don’t appear. The problem persists even if we don’t preload the images.
The typical size of an animation sequence is 92250px x 450px and they come in any where between 1mb and 10mb each (that's after they've been optimised using the compressors behind grunt-contrib-imagemin). The image assets total is around 300mb.
What we’ve tried:
Applying any cache related flags in the chrome command line arguments when launching chrome (http://peter.sh/experiments/chromium-command-line-switches/) such as --disk-cache-size.
Caching all of the media assets using the HTML5 cache manifest.
Testing on different machines, both mac and PC. This produces the same results.
What we’re currently trying:
Reducing the size of all of the images by removing every other frame in the animations. This isn't ideal.
Changing the animation method to switch out (preloaded) individual images rather than sprites.
Preloading images in batches just before they're about to be added (not ideal).
Ideally we'd like to remove the ceiling on whatever this limit we've hit is. Any help/insights would be appreciated!
Whilst we haven't really got to the bottom of what is causing this issue, we have implemented a work around. Switching out the large sprite sheet animations for individual PNG frames does the job. I'd still be interested to learn exactly what the issue/limitation was for future reference...
I’ve been getting more and more into star photography and have recently been trying to develop a new style of stacking the photos and creating time-lapse videos from the stacked photos.
Example: http://www.youtube.com/watch?v=eBE3vUb-dtE
This process took absolutely forever to accomplish and I’ve been trying my hardest to write a script to help me automate the process. Each frame is a stack of up to 25 images, then the next frame is an overlapping stack of images, only offset by 1 or 2 photos.
Can anyone please assist me is writing a Photoshop script to accomplish the following?
After taking my time-lapse photos, I am left with a single folder with an image sequence of anywhere between 50 & 1800 photos.
Ideal Setup:
1) Open Photoshop and run a script “Stacked Timelapse”
2) A Dialog box prompts me for the Source ImageSequence folder. It also prompts me for the maximum length of the stacked star trails (Max number of images to stack per frame).
Ideally it would have some text with recommended settings.
For example:
“0-299 images = Recommended Length of 25”
“300-599 images = Recommended length of 40”
“600+ images = Recommended length of 60”
3) Once you click GO, the script will begin importing the photos into a Stack, applying the ‘.blendMode = BlendMode.LIGHTEN;” to all the layers, then save to a new subfolder (we can call it “Stack”) with the filenames “0001.jpg, 0002.jpg, 0003.jpg, etc” (using max jpg quality settings)
To accomplish the effect in the video, you have to follow this image quantity and offset.
https://dl.dropboxusercontent.com/u/50801/StarFileStructure.jpg
Can anyone give me some pointers on how to script and accomplish this?
Thanks in advance!
As a starting point, you should look at the source code for the Load Files into Stack, Merge to HDR Pro or Photomerge features. These are partially implemented in ExtendScript, and the script's source code is provided as part of the Photoshop release. I think their basic operation is similar to what you're trying to accomplish. Load Files into Stack is probably the simplest one to start with.
The source code to these files is found in:
Photoshop_App_Folder/Presets/Scripts/
Load Files into Stack.jsx
Photomerge.jsx
Merge to HDR.jsx
Stack Scripts Only/
CreateImageStack.jsx
StackSupport.jsx
where Photoshop_App_Folder is C:\Program Files\Adobe\Adobe Photoshop CSn on Windows and /Applications/Adobe Photoshop CSn on the Mac.
These features use a library of code in the sub-folder Stack Scripts Only/ to do the basic tasks of managing the UI and loading the photo files into a layered document.
This stuff is not uncomplicated, but looking at these scripts gives you working examples to use as a starting point. Also, if you're not familiar with the Extendscript Toolkit, I would start learning about it first. It's the IDE used to develop scripts for Photoshop and other Creative Suite apps.