A place to gather resources, issues, and solutions to optimize website speed
.png "HubSpot Employee"){kind=icon}
A place to gather resources, issues, and solutions to optimize website speed
A place to gather resources, issues, and solutions to optimize website speed
Nice one @theAndreyK !
Love the idea.
So gonna share how I started to implement fragmented CSS for a theme (based on boilerplate).
- Go to templates/layouts/base.html
- Look for the inject of the main.css file (at the time, line 8):
{{ require_css(get_asset_url('../../css/main.css')) }}and replace it with
{% if load_css %}
{{ require_css(get_asset_url(load_css)) }}
{% else %}
{{ require_css(get_asset_url('../../css/main.css')) }}
{% endif %} -
Go to the templates folder.
-
In all your templates you want to define the load_css variable before the call of the base.html, so for example for the blog template it will be something like this:
{% set load_css = "../../css/blog.css" %}
{% extends "./layouts/base.html" %}Repeat for each template file.
- Create the {template-name}.css files that will call just the needed CSS files based on the template/page. I would also suggest to have a "general" one that will contain the across website element that you will also need such _reset, _normalize.css _typograghy.css etc. So it's easier to keep it right and simpler.
Example of my blog.css file:
{% include './general.css' %}My version is based on an outdated boilerplate version so double check your needs here*. Ideally you will get rid of the theme-overrides.css and integrate where applies.
{% include './_blog.css' %}
Notice the load_css is calling the new blog.css file (not _blog.css) because it not a fragmented one (it contains the calls to those fragmented files that would be used).
Repeat for all you want to split, for example blog.css, lp.css, page.css and system.css.
Explanation:
The variable load_css will load a css file, for example blog.css. It will contains a similar structure to the current main.css file, but instead calling all the fragmented css files will call just based on the template you are visting and it needs.
The only "issue" is that on the website side, you can't really fragment that much because you don't know if it will include a module, a form a table etc. But it definetly worth it for the blog side.
More to come!
@jmclaren
Regarding the new dnd I am very concern about how HS manages background images for the sections (as background-image CSS properties). It would be much more worth it to have them as image elements so you can lazyload them too (that is what we used to do, and I could do a CM for it, but I would like to use as much HS tools this time instead "hacking" ways that will increase dificulty for the marketers). Other option is make them CSS class dependent so will only load after you scroll until that point, but not as good as the previous suggestion -unnecesary JS handle-.
If this answer helps you to solve your questions please mark it as a solution.
Thank you,
|
A place to gather resources, issues, and solutions to optimize website speed
Hey @jmclaren
I didn't explained well as I wanted to provide the "current solution" I am doing, so it was a confusing feedback.
I ment to say that ideally, you will handle the current background-image in the new DND as <img loading="lazy" ... >. This will require some extra tweaks, but as today its pretty easy to do something like:
.dnd-section{
position: relative
}
.dnd-section > .background{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
object-fit: cover; /** or add extra controls here */
}
This can be included as default and will be easily ovewritable if needed.
Thank you 😉
If this answer helps you to solve your questions please mark it as a solution.
Thank you,
|
A place to gather resources, issues, and solutions to optimize website speed
A place to gather resources, issues, and solutions to optimize website speed
export default () => {
let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"))
if (lazyImages.length < 1) return
// If the browser does NOT support IntersectionObserver
if ( !('IntersectionObserver' in window) ) {
lazyImages.forEach(lazyImage => updateSrc(lazyImage) )
return
}
let lazyImageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
let lazyImage = entry.target
updateSrc(lazyImage)
lazyImageObserver.unobserve(lazyImage)
}
})
}, {rootMargin: '0px 0px 200px 0px'})
// load 200px in advance
lazyImages.forEach(lazyImage => {
lazyImageObserver.observe(lazyImage)
})
}
function updateSrc(lazyImage) {
if (lazyImage.dataset.src) {
lazyImage.src=lazyImage.dataset.src
}
if (lazyImage.dataset.srcset) {
lazyImage.srcset = lazyImage.dataset.srcset
}
if (lazyImage.dataset.sizes) {
lazyImage.sizes = lazyImage.dataset.sizes
}
lazyImage.classList.add('loaded')
}Simple snippet for adding lazyload to your images, can be translated for pictures and video really simple
A place to gather resources, issues, and solutions to optimize website speed
A place to gather resources, issues, and solutions to optimize website speed
I have to agree! The script is triggered when you set a lazy class and pass the data-src attribute, so you have full control on what images you want to optimize, but use this wisely.
We always include a no-js fallback to prevent any issues.
A place to gather resources, issues, and solutions to optimize website speed
Thank you for sharing this @theAndreyK! I think is really useful!
 | Did you know that the Community is available in other languages? Join regional conversations by changing your language settings ! |
