Hey Im having problem with slow image loading on my website. It uses custom domain name https://www.hahastudio.se/
Im have checked all the optimisation options in Netlify. Im using gatsby images, I have enabled gatsby-plugin-remove-fingerprints, and there are no images over 300mb.
I have tried to optimise images with Optimizilla, which showed not significant impovents
Some of the images take up to 3 sec to load =(
here are my build logs:
3:59:39 PM: Build ready to start
3:59:41 PM: build-image version: b0258b965567defc4a2d7e2f2dec2e00c8f73ad6
3:59:41 PM: build-image tag: v3.4.1
3:59:41 PM: buildbot version: 0a44c930054be748eff0c581d346282fece89cc0
3:59:41 PM: Fetching cached dependencies
3:59:42 PM: Starting to download cache of 1.2GB
3:59:46 PM: Finished downloading cache in 4.127581667s
3:59:46 PM: Starting to extract cache
4:00:11 PM: Finished extracting cache in 24.995295654s
4:00:11 PM: Finished fetching cache in 29.392070786s
4:00:11 PM: Starting to prepare the repo for build
4:00:11 PM: Preparing Git Reference refs/heads/master
4:00:16 PM: Different functions path detected, going to use the one specified in the Netlify configuration file: 'lambda' versus '' in the Netlify UI
4:00:16 PM: Starting build script
4:00:16 PM: Installing dependencies
4:00:16 PM: Python version set to 2.7
4:00:17 PM: Started restoring cached node version
4:00:21 PM: Finished restoring cached node version
4:00:22 PM: v12.19.0 is already installed.
4:00:22 PM: Now using node v12.19.0 (npm v6.14.8)
4:00:22 PM: Started restoring cached build plugins
4:00:22 PM: Finished restoring cached build plugins
4:00:22 PM: Attempting ruby version 2.6.2, read from environment
4:00:24 PM: Using ruby version 2.6.2
4:00:24 PM: Using PHP version 5.6
4:00:24 PM: 5.2 is already installed.
4:00:24 PM: Using Swift version 5.2
4:00:24 PM: Started restoring cached node modules
4:00:24 PM: Finished restoring cached node modules
4:00:24 PM: Started restoring cached yarn cache
4:00:24 PM: Finished restoring cached yarn cache
4:00:25 PM: Installing NPM modules using Yarn version 1.22.4
4:00:25 PM: yarn install v1.22.4
4:00:25 PM: warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
4:00:25 PM: [1/4] Resolving packages...
4:00:30 PM: [2/4] Fetching packages...
4:00:36 PM: warning url-loader@1.1.2: Invalid bin field for "url-loader".
4:01:07 PM: info fsevents@2.1.3: The platform "linux" is incompatible with this module.
4:01:07 PM: info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
4:01:07 PM: info fsevents@1.2.13: The platform "linux" is incompatible with this module.
4:01:07 PM: info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
4:01:07 PM: [3/4] Linking dependencies...
4:01:07 PM: warning " > emotion-server@10.0.27" has unmet peer dependency "emotion@^10.0.27".
4:01:07 PM: warning "gatsby > @pmmmwh/react-refresh-webpack-plugin@0.3.2" has incorrect peer dependency "react-refresh@^0.8.2".
4:01:07 PM: warning "@typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
4:01:07 PM: warning "gatsby-plugin-netlify > webpack-assets-manifest@3.1.1" has unmet peer dependency "webpack@>=4.4.0".
4:01:07 PM: warning "gatsby-plugin-sass > sass-loader@7.3.1" has unmet peer dependency "webpack@^3.0.0 || ^4.0.0".
4:01:07 PM: warning " > gatsby-plugin-theme-ui@0.3.0" has incorrect peer dependency "theme-ui@^0.2.0".
4:01:07 PM: warning " > lodash-webpack-plugin@0.11.5" has unmet peer dependency "webpack@^2.0.0 || ^3.0.0 || ^4.0.0".
4:01:07 PM: warning "netlify-cms-app > netlify-cms-widget-code@1.1.5" has unmet peer dependency "codemirror@^5.46.0".
4:01:07 PM: warning "netlify-cms-app > netlify-cms-widget-list@2.5.0" has unmet peer dependency "netlify-cms-lib-widgets@^1.0.0".
4:01:07 PM: warning "netlify-cms-app > netlify-cms-widget-relation@2.7.0" has unmet peer dependency "netlify-cms-lib-widgets@^1.0.0".
4:01:07 PM: warning "netlify-cms-app > netlify-cms-widget-code > react-codemirror2@6.0.1" has unmet peer dependency "codemirror@5.x".
4:01:07 PM: warning "netlify-cms-app > netlify-cms-core > redux-notifications > react-redux@4.4.10" has incorrect peer dependency "redux@^2.0.0 || ^3.0.0".
4:01:07 PM: warning " > netlify-cms-media-library-cloudinary@1.3.4" has unmet peer dependency "netlify-cms-lib-util@^2.1.3-beta.0".
4:01:07 PM: warning " > slick-carousel@1.8.1" has unmet peer dependency "jquery@>=1.8.0".
4:01:33 PM: [4/4] Building fresh packages...
4:01:41 PM: success Saved lockfile.
4:01:41 PM: Done in 75.87s.
4:01:41 PM: NPM modules installed using Yarn
4:01:41 PM: Started restoring cached go cache
4:01:42 PM: Finished restoring cached go cache
4:01:42 PM: Installing Go version 1.12
4:01:43 PM: unset GOOS;
4:01:43 PM: unset GOARCH;
4:01:43 PM: export GOROOT='/opt/buildhome/.gimme_cache/versions/go1.12.linux.amd64';
4:01:43 PM: export PATH="/opt/buildhome/.gimme_cache/versions/go1.12.linux.amd64/bin:${PATH}";
4:01:43 PM: go version >&2;
4:01:43 PM: export GIMME_ENV='/opt/buildhome/.gimme_cache/env/go1.12.linux.amd64.env';
4:01:43 PM: go version go1.12 linux/amd64
4:01:43 PM: Installing missing commands
4:01:43 PM: Verify run directory
4:01:44 PM:
4:01:44 PM: ┌─────────────────────────────┐
4:01:44 PM: │ Netlify Build │
4:01:44 PM: └─────────────────────────────┘
4:01:44 PM:
4:01:44 PM: ❯ Version
4:01:44 PM: @netlify/build 5.0.2
4:01:44 PM:
4:01:44 PM: ❯ Flags
4:01:44 PM: deployId: 5f9592db50aed60008f1def0
4:01:44 PM: mode: buildbot
4:01:44 PM:
4:01:44 PM: ❯ Current directory
4:01:44 PM: /opt/build/repo
4:01:44 PM:
4:01:44 PM: ❯ Config file
4:01:44 PM: /opt/build/repo/netlify.toml
4:01:44 PM:
4:01:44 PM: ❯ Context
4:01:44 PM: production
4:01:44 PM:
4:01:44 PM: ❯ Loading plugins
4:01:44 PM: - netlify-plugin-gatsby-cache@0.3.0 from Netlify app
4:01:44 PM:
4:01:44 PM: ┌────────────────────────────────────────────────────────┐
4:01:44 PM: │ 1. onPreBuild command from netlify-plugin-gatsby-cache │
4:01:44 PM: └────────────────────────────────────────────────────────┘
4:01:44 PM:
4:01:47 PM: Found a Gatsby cache. We’re about to go FAST. ⚡️
4:01:47 PM:
4:01:47 PM: (netlify-plugin-gatsby-cache onPreBuild completed in 2.4s)
4:01:47 PM:
4:01:47 PM: ┌────────────────────────────────────┐
4:01:47 PM: │ 2. build.command from netlify.toml │
4:01:47 PM: └────────────────────────────────────┘
4:01:47 PM:
4:01:47 PM: $ npm run build
4:01:47 PM: > gatsby-starter-netlify-cms@1.1.3 build /opt/build/repo
4:01:47 PM: > npm run clean && gatsby build
4:01:47 PM: > gatsby-starter-netlify-cms@1.1.3 clean /opt/build/repo
4:01:47 PM: > gatsby clean
4:01:48 PM: info Deleting .cache, public
4:01:48 PM: info Successfully deleted directories
4:01:51 PM: success open and validate gatsby-configs - 0.041s
4:01:52 PM: error Your plugins must export known APIs from their gatsby-node.js.
4:01:52 PM: See https://www.gatsbyjs.org/docs/node-apis/ for the list of Gatsby node APIs.
4:01:52 PM: - The plugin gatsby-transformer-sharp@2.5.19 is using the API "unstable_shouldOnCreateNode" which was introduced in gatsby@2.24.80.
4:01:52 PM: Some of the following may help fix the error(s):
4:01:52 PM: - npm install gatsby@^2.24.80
4:01:52 PM: - Rename "unstable_shouldOnCreateNode" -> "onCreateNode"
4:01:52 PM: success load plugins - 1.345s
4:01:52 PM: success onPreInit - 0.010s
4:01:52 PM: success delete html and css files from previous builds - 0.010s
4:01:52 PM: success initialize cache - 0.006s
4:01:52 PM: success copy gatsby files - 0.033s
4:01:52 PM: success onPreBootstrap - 0.012s
4:01:52 PM: success createSchemaCustomization - 0.014s
4:01:53 PM: success source and transform nodes - 1.400s
4:01:54 PM: success building schema - 0.558s
4:01:54 PM: success createPages - 0.096s
4:01:54 PM: success createPagesStatefully - 0.131s
4:01:54 PM: success onPreExtractQueries - 0.000s
4:01:54 PM: success update schema - 0.037s
4:01:55 PM: success extract queries from components - 0.590s
4:01:55 PM: success write out requires - 0.005s
4:01:55 PM: success write out redirect data - 0.001s
4:01:55 PM: success onPostBootstrap - 0.000s
4:01:55 PM: ⠀
4:01:55 PM: info bootstrap finished - 6.478s
4:01:55 PM: ⠀
4:03:28 PM:
4:03:28 PM: gatsby-plugin-purgecss: Only processing /opt/build/repo/src/components/all.sass
4:03:38 PM: success Building production JavaScript and CSS bundles - 98.204s
4:03:38 PM: success Rewriting compilation hashes - 0.002s
4:03:44 PM: success run queries - 109.186s - 39/39 0.36/s
4:05:13 PM:
4:05:13 PM: gatsby-plugin-purgecss:
4:05:13 PM: Previous CSS Size: 196.99 KB
4:05:13 PM: New CSS Size: 13.50 KB (-93.15%)
4:05:13 PM: Removed ~183.49 KB of CSS
4:05:13 PM:
4:05:18 PM: FsLightbox: customSources prop is deprecated, use sources prop instead!
4:05:18 PM: FsLightbox: customSources prop is deprecated, use sources prop instead!
4:05:18 PM: FsLightbox: customSources prop is deprecated, use sources prop instead!
4:05:18 PM: FsLightbox: customSources prop is deprecated, use sources prop instead!
4:05:18 PM: FsLightbox: customSources prop is deprecated, use sources prop instead!
4:05:18 PM: FsLightbox: customSources prop is deprecated, use sources prop instead!
4:05:18 PM: FsLightbox: customSources prop is deprecated, use sources prop instead!
4:05:18 PM: FsLightbox: customSources prop is deprecated, use sources prop instead!
4:05:18 PM: FsLightbox: customSources prop is deprecated, use sources prop instead!
4:05:18 PM: FsLightbox: customSources prop is deprecated, use sources prop instead!
4:05:18 PM: FsLightbox: customSources prop is deprecated, use sources prop instead!
4:05:18 PM: FsLightbox: customSources prop is deprecated, use sources prop instead!
4:05:18 PM: FsLightbox: customSources prop is deprecated, use sources prop instead!
4:05:18 PM: FsLightbox: customSources prop is deprecated, use sources prop instead!
4:05:18 PM: FsLightbox: customSources prop is deprecated, use sources prop instead!
4:05:18 PM: FsLightbox: customSources prop is deprecated, use sources prop instead!
4:05:18 PM: FsLightbox: customSources prop is deprecated, use sources prop instead!
4:05:18 PM: FsLightbox: customSources prop is deprecated, use sources prop instead!
4:05:18 PM: FsLightbox: customSources prop is deprecated, use sources prop instead!
4:05:19 PM: success Building static HTML for pages - 5.780s - 33/33 5.71/s
4:05:19 PM: success Generating image thumbnails - 203.670s - 829/829 4.07/s
4:05:19 PM: success onPostBuild - 0.014s
4:05:19 PM: info Done building in 210.280205252 sec
4:05:19 PM:
4:05:19 PM: (build.command completed in 3m 32.3s)
4:05:19 PM:
4:05:19 PM: ┌────────────────────────────────────────────────────────┐
4:05:19 PM: │ 3. onBuild command from @netlify/plugin-functions-core │
4:05:19 PM: └────────────────────────────────────────────────────────┘
4:05:19 PM:
4:05:19 PM: Packaging Functions from lambda directory:
4:05:19 PM: - hello.js
4:05:19 PM:
4:05:19 PM: (@netlify/plugin-functions-core onBuild completed in 51ms)
4:05:19 PM:
4:05:19 PM: ┌─────────────────────────────────────────────────────────┐
4:05:19 PM: │ 4. onPostBuild command from netlify-plugin-gatsby-cache │
4:05:19 PM: └─────────────────────────────────────────────────────────┘
4:05:19 PM:
4:05:21 PM: Stored the Gatsby cache to speed up future builds.
4:05:21 PM:
4:05:21 PM: (netlify-plugin-gatsby-cache onPostBuild completed in 2.4s)
4:05:21 PM:
4:05:21 PM: ┌─────────────────────────────┐
4:05:21 PM: │ Netlify Build Complete │
4:05:21 PM: └─────────────────────────────┘
4:05:21 PM:
4:05:21 PM: (Netlify Build completed in 3m 37.9s)
4:05:22 PM: Caching artifacts
4:05:22 PM: Started saving node modules
4:05:22 PM: Finished saving node modules
4:05:22 PM: Started saving build plugins
4:05:22 PM: Finished saving build plugins
4:05:22 PM: Started saving yarn cache
4:05:22 PM: Finished saving yarn cache
4:05:22 PM: Started saving pip cache
4:05:22 PM: Finished saving pip cache
4:05:22 PM: Started saving emacs cask dependencies
4:05:22 PM: Finished saving emacs cask dependencies
4:05:22 PM: Started saving maven dependencies
4:05:22 PM: Finished saving maven dependencies
4:05:22 PM: Started saving boot dependencies
4:05:22 PM: Finished saving boot dependencies
4:05:22 PM: Started saving go dependencies
4:05:23 PM: Finished saving go dependencies
4:05:23 PM: Build script success
4:05:23 PM: Starting to deploy site from 'public'
4:05:24 PM: Creating deploy tree asynchronously
4:05:24 PM: Creating deploy upload records
4:05:27 PM: 94 new files to upload
4:05:27 PM: 0 new functions to upload
4:05:36 PM: Starting post processing
4:05:36 PM: Post processing - HTML
4:05:36 PM: Minifying js bundle
4:05:39 PM: Minifying js bundle
4:05:41 PM: Minifying js bundle
4:05:44 PM: Minifying js bundle
4:05:46 PM: Minifying js bundle
4:05:49 PM: Minifying js bundle
4:05:51 PM: Minifying js bundle
4:05:54 PM: Minifying js bundle
4:05:57 PM: Minifying js bundle
4:05:59 PM: Minifying js bundle
4:06:01 PM: Minifying js bundle
4:06:07 PM: Minifying js bundle
4:06:11 PM: Minifying js bundle
4:06:14 PM: Minifying js bundle
4:06:17 PM: Minifying js bundle
4:06:20 PM: Minifying js bundle
4:06:24 PM: Minifying js bundle
4:06:26 PM: Post processing - header rules
4:06:27 PM: Post processing - redirect rules
4:06:27 PM: Post processing done
4:06:27 PM: Site is live ✨
4:08:00 PM: Finished processing build request in 8m18.899785897s
thank you so much in advance for all the help