Page Speed is 75

[mehedi-sharif]

Now google page speed showing 75 in mobile . https://pagespeed.web.dev/analysis/https-hugoplate-netlify-app/q0kqd1b8rh?form_factor=mobile . Need to optimize .

[Productivix]

same 77 - too much js and css

[Productivix]

hi, in addition, in console , you get the following error messages :
11:42:10,651 downloadable font: STAT: Invalid nameID: 17 (font-family: "Signika" style:normal weight:700 stretch:100 src index:0) source: https://fonts.gstatic.com/s/signika/v25/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bBjM4.woff2 11:42:10,651 downloadable font: Table discarded (font-family: "Signika" style:normal weight:700 stretch:100 src index:0) source: https://fonts.gstatic.com/s/signika/v25/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bBjM4.woff2 11:42:10,915 downloadable font: STAT: Invalid nameID: 17 (font-family: "Signika" style:normal weight:700 stretch:100 src index:0) source: https://fonts.gstatic.com/s/signika/v25/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bBjM4.woff2 11:42:10,915 downloadable font: Table discarded (font-family: "Signika" style:normal weight:700 stretch:100 src index:0) source: https://fonts.gstatic.com/s/signika/v25/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bBjM4.woff2

[tfsomrat]

I don't see any console error:

[ortegoncarlos]

It's an easy fix, it's just about to send must of the js to lazy load. i made this on my toml and lazy load all the css and js that are under the fold.

[[params.plugins.css]]
link = "plugins/swiper/swiper.css"
[[params.plugins.css]]
link = "plugins/swiper/modules/effect-creative.min.css"


#CSS below the fold
[[params.plugins.cssBelowTheFold]]
link = "plugins/font-awesome/v6/brands.css"
[[params.plugins.cssBelowTheFold]]
link = "plugins/swiper/modules/pagination.min.css"
[[params.plugins.cssBelowTheFold]]
link = "plugins/glightbox/glightbox.css"
[[params.plugins.cssBelowTheFold]]
link = "plugins/font-awesome/v6/solid.css"
[[params.plugins.cssBelowTheFold]]
link = "plugins/font-awesome/v6/icons.css"


# JS Plugins
[[params.plugins.js]]
link = "plugins/swiper/swiper-bundle.js"
[[params.plugins.jsBelowTheFold]]
link = "js/search.js"

# JS below the fold
[[params.plugins.jsBelowTheFold]]
link = "plugins/glightbox/glightbox.js"
[[params.plugins.jsBelowTheFold]]
link = "js/gallery-slider.js"
[[params.plugins.jsBelowTheFold]]
link = "js/accordion.js"
[[params.plugins.jsBelowTheFold]]
link = "js/tab.js"
[[params.plugins.jsBelowTheFold]]
link = "js/modal.js"
[[params.plugins.jsBelowTheFold]]
link = "plugins/cookie.js"
[[params.plugins.jsBelowTheFold]]
link = "plugins/youtube-lite.js"

style.html

{{ $styles := slice }}
{{ range site.Params.plugins.css }}
  {{ if findRE "^http" .link }}
    <link
      crossorigin="anonymous"
      media="all"
      rel="stylesheet"
      href="{{ .link | relURL }}"
      {{ .attributes | safeHTMLAttr }} />
  {{ else }}
    {{ $styles = $styles | append (resources.Get .link) }}
  {{ end }}
{{ end }}
{{ $styles := $styles | append (resources.Get "scss/main.scss" | toCSS) }}
{{ $styles := $styles | resources.Concat "css/style.css" }}
{{ $styles = $styles | resources.PostCSS }}
{{ if hugo.IsProduction }}
  {{ $styles = $styles | resources.ExecuteAsTemplate "css/style.css" . | minify | fingerprint | resources.PostProcess }}
{{ else }}
  {{ $styles = $styles | resources.ExecuteAsTemplate "css/style.css" . }}
{{ end }}


<link
  href="{{ $styles.RelPermalink }}"
  integrity="{{ $styles.Data.Integrity }}"
  rel="stylesheet" />

<!-- plugins + stylesheet Bellow the fold-->
{{ $stylesBtf := slice }}
{{ range site.Params.plugins.cssBelowTheFold }}
  {{ if findRE "^http" .link }}
    <link
      crossorigin="anonymous"
      media="all"
      rel="stylesheet"
      href="{{ .link | relURL }}"
      {{ .attributes | safeHTMLAttr }} />
  {{ else }}
    {{ $stylesBtf = $stylesBtf | append (resources.Get .link) }}
  {{ end }}
{{ end }}
{{ $stylesBtf := $stylesBtf | append (resources.Get "scss/mainBtf.scss" | toCSS) }}
{{ $stylesBtf := $stylesBtf | resources.Concat "css/stylebtf.css" }}
{{ $stylesBtf = $stylesBtf | resources.PostCSS }}
{{ if hugo.IsProduction }}
  {{ $stylesBtf = $stylesBtf | resources.ExecuteAsTemplate "css/stylebtf.css" . | minify | fingerprint | resources.PostProcess }}
{{ else }}
  {{ $stylesBtf = $stylesBtf | resources.ExecuteAsTemplate "css/stylebtf.css" . }}
{{ end }}
<link rel="stylesheet" href="{{ $stylesBtf.RelPermalink }}" media="print" onload="this.media='all'; this.onload=null;">

script.html

  {{ if findRE "^http" .link }}
    <script
      src="{{ .link | relURL }}"
      type="application/javascript"
      {{ .attributes | safeHTMLAttr }}></script>
  {{ else }}
    {{ $scripts = $scripts | append (resources.Get .link) }}
  {{ end }}
{{ end }}


<!-- main script -->
{{ $scripts = $scripts | append (resources.Get "js/main.js") }}
{{ $scripts = $scripts | resources.Concat "js/script.js" }}
{{ if hugo.IsProduction }}
  {{ $scripts = $scripts | minify | fingerprint }}
{{ end }}


<script
  crossorigin="anonymous"
  integrity="{{ $scripts.Data.Integrity }}"
  src="{{ $scripts.RelPermalink }}"></script>

<!-- main script below the fold -->
{{ $scriptsBtf := slice }}
{{ range site.Params.plugins.jsBelowTheFold }}
  {{ if findRE "^http" .link }}
    <script
      src="{{ .link | relURL }}"
      type="application/javascript"
      {{ .attributes | safeHTMLAttr }}></script>
  {{ else }}
    {{ $scriptsBtf = $scriptsBtf | append (resources.Get .link) }}
  {{ end }}
{{ end }}
{{ $scriptsBtf = $scriptsBtf | resources.Concat "js/scriptBtf.js" }}
{{ if hugo.IsProduction }}
  {{ $scriptsBtf = $scriptsBtf | minify | fingerprint }}
{{ end }}


<script
  crossorigin="anonymous"
  integrity="{{ $scriptsBtf.Data.Integrity }}"
  src="{{ $scriptsBtf.RelPermalink }}" defer></script>```

[gedw99]

Yep agree with @ortegoncarlos

make the main page load js async and will get close to 100%

[jbigler]

I see that lazy parameters have been added to the various CSS and JS plugins in hugo.toml, I assume that is to deal with this issue? However, it appears the Mobile Performance is still under 80.

[gedw99]

I see that lazy parameters have been added to the various CSS and JS plugins in hugo.toml, I assume that is to deal with this issue? However, it appears the Mobile Performance is still under 80.

if there a link somewhere to show this, or so I have to run it myself ?

[jbigler]

I see that lazy parameters have been added to the various CSS and JS plugins in hugo.toml, I assume that is to deal with this issue? However, it appears the Mobile Performance is still under 80.

if there a link somewhere to show this, or so I have to run it myself ?

To show the speed? When I ran https://hugoplate.netlify.app/ through pagespeed.web.dev it came out to 85 for mobile but 96 for desktop. My personal site at www.saturnstudio.com was 77 and 92 respectively. If you mean a link to the hugo.toml file that is in the exampleSite folder of the repo.

[ytrepidorosonomous]

https://pagespeed.web.dev/analysis/https-hugoplate-netlify-app/wn16dz1f8u?form_factor=mobile

[bgriffy]

It looks this issue is still persisting, even with the lazy parameters added to hugo.html to make the js and css lazy loaded.

Great theme btw! I love Hugoplate.

[Frank3K]

I don't see any console error:

The error is not present in Chrome, but it is present in Firefox (tested on Firefox 124.0.1 (64-bit) on macOS).

[DaniloDjokic]

Can confirm that the issue persists even with the new lazy loaded JS and CSS.
Tested on 13/09/2024, Chrome v128.0.6613.121 on Windows 10

[gedw99]

I am using k6 to do browse regression testing, to spot when things change.

https://grafana.com/blog/2023/06/01/web-performance-testing-compare-grafana-k6-browser-vs.-google-lighthouse/

I plan to make a k6x extension designed for Hugo, so there is no configuration of scripts using https://github.com/grafana/k6x

If anyone is interested just shout !!

[craveica]

Thank you for your wonderful theme!