Optymalizowanie strony internetowej pod "CWV"

yarn add -D gulp-purgecss

return await bundleCssProduction(templatePath, sourcePath, targetPath, onError);

const purgeCss = require('gulp-purgecss');

const bundleCssProduction = (
  templatePath,
  sourcePath,
  targetPath,
  onError
) => {
  return src(sourcePath)
      .pipe(sassGlob())
      .pipe(
          sass(sassOptions).on('error', (error) =>  {
                  onError(error.messageFormatted)
              }
          )
      )
      .pipe(autoprefixer(autoprefixerOptions))
      .pipe(rename(path.basename(targetPath)))
      .pipe(purgeCss({ content: [`${templatePath}/**/*.tmpl`] }))
      .pipe(dest(path.dirname(targetPath)));
};

yarn bundle-css

17:59:10] Using gulpfile /opt/lampp/htdocs/gulpfile.js

[17:59:10] Starting 'bundleCssProduction'...

[17:59:10] Bundling sixtyfive's css...

[17:59:11] Finished 'bundleCssProduction' after 898 ms

Done in 3.20s.

// import { initTooltiper } from './tooltiper'
// import { initLightbox } from './lightbox'
// import { initSearchSystem } from './search-system'
// import { initResponsiveTable } from './responsive-table'
import { initFormsAgreement } from './forms-agreement';
import { initMenuDropdown } from './menu-dropdown';
// import { initDragAndDrop } from './drag-and-drop';

// initTooltiper()
// initLightbox()
// initSearchSystem()
// initResponsiveTable()
initFormsAgreement()
initMenuDropdown()
// initDragAndDrop()

/*! purgecss start ignore */
....
/*! purgecss end ignore */

<link
rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"
integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
defer
>
<link
rel="stylesheet" href="build/main.bundle.css')]}"
>
<link
rel="stylesheet"
href="https://www.krakweb.plfrontend/stylesheets/style_print.css"
media="print"
>

<script
src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js"   integrity="sha512-q583ppKrCRc7N5O0n2nzUiJ+suUv7Et1JGels4bXOaMFQcamPk9HjdUknZuuFjBNs7tsMuadge5k9RzdmO+1GQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
async
>
</script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"   integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
defer
>
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"
integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
defer
>
</script>
<script 

src="" 

defer

>

</script>
<script 

src="build/main.bundle.js')]}" defer

>

</script>

<link rel="preconnect" href="https://cdnjs.cloudflare.com"  crossorigin>

<div class="col-md-6 col-lg-4">
<div class="p-5 d-flex gap-4 flex-column bg-primary">
  <h3 class="text-white font-weight-semibold fs-16 text-overflow-ellipsis"></h3>
  <img class="lazyload w-100"width="347" height="347" data-sizes="auto" src="" alt="" />
  <a href="" class="btn btn-tertiary"></a>
</div>
</div>

<div class="col-md-6 col-lg-4">
<div class=" randomPhoto">
  <h6 class="randomPhoto__name"></h6>
  <img class="randomPhoto__img" src="" alt="" />
  <a href="" class="btn btn-tertiary"></a>
</div>
</div>

.randomPhoto {
  padding: 2rem;
  display: flex;
  row-gap: 1rem;
  flex-direction: column;
  background-color: $primary;

&__name {
  color: $white;
  font-weight: 600;
  @include font-size(14);
}

&__img {
  width: 100%;
  object-fit: cover;
}
}

<div class="col-md-6 col-lg-4">
<div class="p-5 d-flex gap-4 flex-column bg-primary">
  <h3 class="text-white font-weight-semibold fs-16 text-overflow-ellipsis"></h3>
  <img class="lazyload w-100" width="347" height="347" data-sizes="auto" src="" alt="" />
  <a href="" class="btn btn-tertiary"></a>
</div>
</div>

// Można usunąć