search

zeon-studio / hugoplate

Hugoplate is a free starter template built with Hugo and TailwindCSS that will save you hours of work.
https://zeon.studio/preview?project=hugoplate
MIT License
772 stars 214 forks source link

Page Speed is 75 #10

Open mehedi-sharif opened 1 year ago

mehedi-sharif commented 1 year ago

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 commented 1 year ago

same 77 - too much js and css

Productivix commented 12 months ago

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 commented 12 months ago

I don't see any console error: image

ortegoncarlos commented 10 months ago

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 commented 9 months ago

Yep agree with @ortegoncarlos

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

jbigler commented 9 months ago

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 commented 9 months ago

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 commented 9 months ago

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 commented 8 months ago

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

bgriffy commented 6 months ago

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 commented 5 months ago

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