Trying to defer images without lazy load or jquery, using shopify
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I'm using Shopify and I have some mobile speed issues, on my home page all my images load at once, so I have been going by Patrick Sexton's tutorial on varvy.com article: Defer images without lazy load or jquery (https://varvy.com/pagespeed/defer-images.html) I'm stuck on where to put the actual HTML code and the javascript code. And do I have to put the code in once per image or does that code provided on the tutorial cover all images?
Can anyone help, please?
The code provided is at the bottom of Patrick's article.
https://varvy.com/pagespeed/defer-images.html
Any help would be appreciated :)
I have yet to try to put any code anywhere because I don't want to break something.
jquery html image shopify deferred
asked Jan 3 at 21:04
Endless Hair ExtensionsEndless Hair Extensions
1
add a comment |
I'm using Shopify and I have some mobile speed issues, on my home page all my images load at once, so I have been going by Patrick Sexton's tutorial on varvy.com article: Defer images without lazy load or jquery (https://varvy.com/pagespeed/defer-images.html) I'm stuck on where to put the actual HTML code and the javascript code. And do I have to put the code in once per image or does that code provided on the tutorial cover all images?
Can anyone help, please?
The code provided is at the bottom of Patrick's article.
https://varvy.com/pagespeed/defer-images.html
Any help would be appreciated :)
I have yet to try to put any code anywhere because I don't want to break something.
jquery html image shopify deferred
asked Jan 3 at 21:04
Endless Hair ExtensionsEndless Hair Extensions
1
The code on that page will find all of the images by itself.
– Diodeus - James MacFarlane
Jan 3 at 21:10
add a comment |
I'm using Shopify and I have some mobile speed issues, on my home page all my images load at once, so I have been going by Patrick Sexton's tutorial on varvy.com article: Defer images without lazy load or jquery (https://varvy.com/pagespeed/defer-images.html) I'm stuck on where to put the actual HTML code and the javascript code. And do I have to put the code in once per image or does that code provided on the tutorial cover all images?
Can anyone help, please?
The code provided is at the bottom of Patrick's article.
https://varvy.com/pagespeed/defer-images.html
Any help would be appreciated :)
I have yet to try to put any code anywhere because I don't want to break something.
jquery html image shopify deferred
asked Jan 3 at 21:04
Endless Hair ExtensionsEndless Hair Extensions
1
I'm using Shopify and I have some mobile speed issues, on my home page all my images load at once, so I have been going by Patrick Sexton's tutorial on varvy.com article: Defer images without lazy load or jquery (https://varvy.com/pagespeed/defer-images.html) I'm stuck on where to put the actual HTML code and the javascript code. And do I have to put the code in once per image or does that code provided on the tutorial cover all images?
Can anyone help, please?
The code provided is at the bottom of Patrick's article.
https://varvy.com/pagespeed/defer-images.html
Any help would be appreciated :)
I have yet to try to put any code anywhere because I don't want to break something.
jquery html image shopify deferred
jquery html image shopify deferred
asked Jan 3 at 21:04
Endless Hair ExtensionsEndless Hair Extensions
1
asked Jan 3 at 21:04
Endless Hair ExtensionsEndless Hair Extensions
1
asked Jan 3 at 21:04
Endless Hair ExtensionsEndless Hair Extensions
1
asked Jan 3 at 21:04
Endless Hair ExtensionsEndless Hair Extensions
1
asked Jan 3 at 21:04
Endless Hair ExtensionsEndless Hair Extensions
1
1
The code on that page will find all of the images by itself.
– Diodeus - James MacFarlane
Jan 3 at 21:10
add a comment |
The code on that page will find all of the images by itself.
– Diodeus - James MacFarlane
Jan 3 at 21:10
The code on that page will find all of the images by itself.
– Diodeus - James MacFarlane
Jan 3 at 21:10
The code on that page will find all of the images by itself.
– Diodeus - James MacFarlane
Jan 3 at 21:10
add a comment |
1 Answer
1
active
oldest
votes
You can use srcset to load resolution-specific images. This won't defer them, but it will lighten the bandwidth use.
<img srcset="elva-fairy-320w.jpg 320w,
elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
This is supported by Shopify: https://www.shopify.ca/partners/blog/using-responsive-images
See: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
answered Jan 3 at 21:07
Diodeus - James MacFarlaneDiodeus - James MacFarlane
95.5k28139167
Thank you for getting back to me, so where should I place the code given on Patrick's article ? should it go into the theme. liquid file? both HTML and java code? or are they going in separate files?
– Endless Hair Extensions
Jan 3 at 23:17
Also, I should say, as I forget to mention this, this is an issue I am having on the mobile speed, desktop speed is just fine.
– Endless Hair Extensions
Jan 3 at 23:18
It's safe to put the script in your page header template. You're better off following the Shopify method as it sizes the images for the device, instead of lazy-loading the desktop-size image.
– Diodeus - James MacFarlane
Jan 4 at 13:49
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54029780%2ftrying-to-defer-images-without-lazy-load-or-jquery-using-shopify%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can use srcset to load resolution-specific images. This won't defer them, but it will lighten the bandwidth use.
<img srcset="elva-fairy-320w.jpg 320w,
elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
This is supported by Shopify: https://www.shopify.ca/partners/blog/using-responsive-images
See: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
answered Jan 3 at 21:07
Diodeus - James MacFarlaneDiodeus - James MacFarlane
95.5k28139167
Thank you for getting back to me, so where should I place the code given on Patrick's article ? should it go into the theme. liquid file? both HTML and java code? or are they going in separate files?
– Endless Hair Extensions
Jan 3 at 23:17
Also, I should say, as I forget to mention this, this is an issue I am having on the mobile speed, desktop speed is just fine.
– Endless Hair Extensions
Jan 3 at 23:18
It's safe to put the script in your page header template. You're better off following the Shopify method as it sizes the images for the device, instead of lazy-loading the desktop-size image.
– Diodeus - James MacFarlane
Jan 4 at 13:49
add a comment |
You can use srcset to load resolution-specific images. This won't defer them, but it will lighten the bandwidth use.
<img srcset="elva-fairy-320w.jpg 320w,
elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
This is supported by Shopify: https://www.shopify.ca/partners/blog/using-responsive-images
See: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
answered Jan 3 at 21:07
Diodeus - James MacFarlaneDiodeus - James MacFarlane
95.5k28139167
Thank you for getting back to me, so where should I place the code given on Patrick's article ? should it go into the theme. liquid file? both HTML and java code? or are they going in separate files?
– Endless Hair Extensions
Jan 3 at 23:17
Also, I should say, as I forget to mention this, this is an issue I am having on the mobile speed, desktop speed is just fine.
– Endless Hair Extensions
Jan 3 at 23:18
It's safe to put the script in your page header template. You're better off following the Shopify method as it sizes the images for the device, instead of lazy-loading the desktop-size image.
– Diodeus - James MacFarlane
Jan 4 at 13:49
add a comment |
You can use srcset to load resolution-specific images. This won't defer them, but it will lighten the bandwidth use.
<img srcset="elva-fairy-320w.jpg 320w,
elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
This is supported by Shopify: https://www.shopify.ca/partners/blog/using-responsive-images
See: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
answered Jan 3 at 21:07
Diodeus - James MacFarlaneDiodeus - James MacFarlane
95.5k28139167
You can use srcset to load resolution-specific images. This won't defer them, but it will lighten the bandwidth use.
<img srcset="elva-fairy-320w.jpg 320w,
elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
This is supported by Shopify: https://www.shopify.ca/partners/blog/using-responsive-images
See: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
answered Jan 3 at 21:07
Diodeus - James MacFarlaneDiodeus - James MacFarlane
95.5k28139167
edited Jan 3 at 21:18
answered Jan 3 at 21:07
Diodeus - James MacFarlaneDiodeus - James MacFarlane
95.5k28139167
answered Jan 3 at 21:07
Diodeus - James MacFarlaneDiodeus - James MacFarlane
95.5k28139167
answered Jan 3 at 21:07
Diodeus - James MacFarlaneDiodeus - James MacFarlane
95.5k28139167
95.5k28139167
Thank you for getting back to me, so where should I place the code given on Patrick's article ? should it go into the theme. liquid file? both HTML and java code? or are they going in separate files?
– Endless Hair Extensions
Jan 3 at 23:17
Also, I should say, as I forget to mention this, this is an issue I am having on the mobile speed, desktop speed is just fine.
– Endless Hair Extensions
Jan 3 at 23:18
It's safe to put the script in your page header template. You're better off following the Shopify method as it sizes the images for the device, instead of lazy-loading the desktop-size image.
– Diodeus - James MacFarlane
Jan 4 at 13:49
add a comment |
Thank you for getting back to me, so where should I place the code given on Patrick's article ? should it go into the theme. liquid file? both HTML and java code? or are they going in separate files?
– Endless Hair Extensions
Jan 3 at 23:17
Also, I should say, as I forget to mention this, this is an issue I am having on the mobile speed, desktop speed is just fine.
– Endless Hair Extensions
Jan 3 at 23:18
It's safe to put the script in your page header template. You're better off following the Shopify method as it sizes the images for the device, instead of lazy-loading the desktop-size image.
– Diodeus - James MacFarlane
Jan 4 at 13:49
Thank you for getting back to me, so where should I place the code given on Patrick's article ? should it go into the theme. liquid file? both HTML and java code? or are they going in separate files?
– Endless Hair Extensions
Jan 3 at 23:17
Thank you for getting back to me, so where should I place the code given on Patrick's article ? should it go into the theme. liquid file? both HTML and java code? or are they going in separate files?
– Endless Hair Extensions
Jan 3 at 23:17
Also, I should say, as I forget to mention this, this is an issue I am having on the mobile speed, desktop speed is just fine.
– Endless Hair Extensions
Jan 3 at 23:18
Also, I should say, as I forget to mention this, this is an issue I am having on the mobile speed, desktop speed is just fine.
– Endless Hair Extensions
Jan 3 at 23:18
It's safe to put the script in your page header template. You're better off following the Shopify method as it sizes the images for the device, instead of lazy-loading the desktop-size image.
– Diodeus - James MacFarlane
Jan 4 at 13:49
It's safe to put the script in your page header template. You're better off following the Shopify method as it sizes the images for the device, instead of lazy-loading the desktop-size image.
– Diodeus - James MacFarlane
Jan 4 at 13:49
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54029780%2ftrying-to-defer-images-without-lazy-load-or-jquery-using-shopify%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
The code on that page will find all of the images by itself.
– Diodeus - James MacFarlane
Jan 3 at 21:10