Giter Club home page Giter Club logo

Comments (11)

ortegoncarlos avatar ortegoncarlos commented on May 28, 2024 1

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>```

from hugoplate.

jbigler avatar jbigler commented on May 28, 2024 1

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.

from hugoplate.

bgriffy avatar bgriffy commented on May 28, 2024 1

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.

from hugoplate.

Productivix avatar Productivix commented on May 28, 2024

same 77 - too much js and css

from hugoplate.

Productivix avatar Productivix commented on May 28, 2024

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

from hugoplate.

tfsomrat avatar tfsomrat commented on May 28, 2024

I don't see any console error:
image

from hugoplate.

gedw99 avatar gedw99 commented on May 28, 2024

Yep agree with @ortegoncarlos

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

from hugoplate.

jbigler avatar jbigler commented on May 28, 2024

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.

from hugoplate.

gedw99 avatar gedw99 commented on May 28, 2024

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 ?

from hugoplate.

ytrepidorosonomous avatar ytrepidorosonomous commented on May 28, 2024

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

from hugoplate.

Frank3K avatar Frank3K commented on May 28, 2024

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).

from hugoplate.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.