Comments (11)
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.
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.
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.
same 77 - too much js and css
from hugoplate.
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.
I don't see any console error:
from hugoplate.
Yep agree with @ortegoncarlos
make the main page load js async and will get close to 100%
from hugoplate.
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.
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.
https://pagespeed.web.dev/analysis/https-hugoplate-netlify-app/wn16dz1f8u?form_factor=mobile
from hugoplate.
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)
- url vs pageRef HOT 1
- change images directory to blog/english HOT 1
- Remove hasChildren from menu entry definition in example site HOT 1
- Remove dark mode script does not remove theme switcher HOT 2
- Remove unused dns-prefetch links HOT 1
- 404 Defaults to English in Multilingual Site HOT 5
- Please change the default baseURL HOT 5
- npm run build breaks the website HOT 2
- Please change the default baseURL HOT 2
- Site deployed on GitHub pages loses some formatting HOT 1
- Permission to zeon-studio/hugoplate.git denied
- Reload the searchindex.json file twice. HOT 3
- Hero image source HOT 2
- Your file couldn't be accessed HOT 2
- Page widths on mobile displays HOT 6
- CSS is broken when running in Gitpod HOT 3
- when running in provided devcontainer npm run dev errors out HOT 8
- Add basic js testing [enhancement] HOT 1
- CSS broken in .devcontainer example site even after changing baseurl HOT 1
- Error postCSS HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from hugoplate.