- VisualStudio2022插件的安装及使用-编程手把手系列文章
- pprof-在现网场景怎么用
- C#实现的下拉多选框,下拉多选树,多级节点
- 【学习笔记】基础数据结构:猫树
关于 Shopify Theme 的性能优化,通常有以下几点:
有些 app 会在 theme 里面插入一些代码,即使 app 未被使用,也可能会加载一些脚本文件,影响页面渲染速度,所以建议不使用的 app 都卸载掉.
添加过多的埋点,也会影响网页加载速度,所以要适当添加必要的埋点.
在下文中细说.
主题的更新经常会涉及到性能的优化,所以如果使用的是 Shopify 主题商店中的主题,最好保持主题的版本最新;如果是基于 dawn 主题自主开发的,也应该随时关注官方代码更新.
官方博客:Shopify 上的响应式图片与 Liquid 。
image_url
和 image_tag
过滤器shopify 提供了image_url 和 image_tag 过滤器来帮助生成响应式图像.
用来生成图片在 Shopify CDN 的地址。它可以调整大小、裁剪、添加填充以及生成多种文件格式.
<!-- Input --> {{ section.settings.image | image_url: width: 300 }} <!-- Output --> //cdn.shopify.../files/dog.jpg?width=300
用来生成 HTML 的 img 标签,默认图片懒加载.
<!-- Input --> {{ section.settings.image | image_url: width: 300 | image_tag }} <!-- Output --> <img src="//cdn.shopify.../files/dog.jpg?width=300" width="300" height="393" />
推荐 JPEG 或 JPG,如果浏览器兼容性允许,可以考虑 WEBP、AVIF、JPEG XL 等新的文件格式 。
不使用GIF,如果需要动图,也选择MP4 。
小 icon 之类的选择 svg 格式 。
⭐️ 使用 image_url 过滤器,Shopify image API 会自动选择最合适的图片格式,可能是 WEBP、AVIF,在不支持新文件格式的浏览器,也会选择合适的格式 。
这里需要用到 img 标签的 srcset 和 sizes 属性.
<!-- Input -->
{{ section.settings.image | image_url: width: 600 | image_tag: widths: '300, 600', sizes: '(min-width: 400px) 298px, 78.75vw', style: 'width: 300px' }}
<!-- Output -->
<img src="//cdn.shopify.../files/dog.jpg?width=600" srcset=" //cdn.shopify.../files/dog.jpg?width=300 300w, //cdn.shopify.../files/dog.jpg?width=600 600w" width="600" height="785" sizes="(min-width: 400px) 298px, 78.75vw" style="width: 300px">
在上面的代码中,给浏览器提供了 2 个候选文件 - 一个为 300 像素宽,另一个为 600 像素宽,浏览器将根据用户的屏幕尺寸和设备像素比 (DPR) 来最终决定下载哪个.
⚠️ 注意不要过度使用 srcset,尤其是网站流量不高的情况下,用户访问的图片可能还没有在 CDN 中缓存,这样加载时间会更长.
如果没有多尺寸图片,那么建议选择 2x 图.
<picture>
标签<picture> 标签是一个比较新的 HTML 标签,可以根据浏览器支持的类型、屏幕尺寸等提供合适的图片.
① 根据浏览器选择合适的图片类型(<source>的type属性) 。
<picture> <source type="image/avif" srcset="pug_life.avif" /> <source type="image/webp" srcset="pug_life.webp" /> <img src="pug_life.jpg" alt="pug wearing a striped t-shirt like a boss" /> </picture>
浏览器会按顺序读取<picture>里面<source>的类型,提供第一个匹配到的图片源,都不支持,则选择<img>保底。(在 liquid 中使用 image_url 过滤器可以达到一样的效果) 。
②根据屏幕尺寸提供不同的图片(<source>的media属性) 。
<picture> <source media="(min-width: 800px)" srcset="wide_800.jpg 800w, wide_1600.jpg 1600w" /> <source media="(min-width: 400px)" srcset="narrow_400.jpg 400w, narrow_800.jpg 800w" /> <img src="wide_800.jpg" alt="Woman with dog looking at Grand Canyon" /> </picture>
③避免手机端图片过大 。
<picture> <source media="(max-width: 800px)" srcset=" {{ section.settings.image | image_url: width: 300 }} 1x, {{ section.settings.image | image_url: width: 600 }} 2x, "> {{ section.settings.image | image_url: width: 2000 | image_tag: widths: '1000, 2000', sizes: '(min-width: 1000px) 760px, (min-width: 800px) calc(100vw - 380px), (min-width: 400px) 298px, 78.75vw', class: 'mobile-size-fix' }} </picture>
这个例子中800px以下的屏幕,只提供1x和2x的图,不会因为手机分辨率过高提供的图片太大。(1x的屏现在也很少了,这个1x可以按需保留) 。
为了更好的加载图片,在写的时候,至少要用上 image_url 和 image_tag 过滤器,这样 Shopify image API 会帮你选择最合适的图片格式,还能懒加载.
{{ section.settings.image | image_url: width: 300 | image_tag }}
其次,如果同一张图,想在不同尺寸的设备上,加载不同尺寸的图,可以用 image_tag 的 sizes 和 widths.
{{ section.settings.image | image_url: width: 600 | image_tag: widths: '300, 600', sizes: '(min-width: 400px) 298px, 78.75vw', style: 'width: 300px' }}
如果还希望不同尺寸使用不同的图片,那就可以试试使用 <picture> 标签。(具体看5,感觉 image_url 和 image_tag 基本上够用了).
END-------------------------------- 。
风是透明的河流,雨是冰凉的流星.
。
最后此篇关于ShopifyTheme开发——性能优化的文章就讲到这里了,如果你想了解更多关于ShopifyTheme开发——性能优化的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
我需要一些说明。我可以直接写入 /dev/port 以直接访问并行端口并且它工作正常(我可以打开插入端口连接器的 LED)。但是,我想我可以用 /dev/mem 做同样的事情? (http://tld
按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我使用 Visual C++ 和 Win32 API 学习了 Windows 编程。如今,似乎大多数应用程序都是使用 C# 在 .NET 中开发的。我知道大多数时候 native 代码和托管代码之间没
请耐心等待。我正在制作一个 java 控制台,类似于此处找到的 DragonConsole https://code.google.com/p/dragonconsole/ 。一切都按计划进行,但我想
关闭。这个问题需要更多 focused .它目前不接受答案。 想要改进这个问题吗? 更新问题,使其只关注一个问题 editing this post . 关闭5年前。 Improve this que
Django 的开发服务器表现得很奇怪。访问它的浏览器在加载时卡住,任何退出它的尝试都不起作用。当我点击 control c看似相当,但实际上仍在运行。让它退出的唯一方法是重新启动我的电脑,这很令人沮
我正在使用 Flash Develop,并且创建了一个 ActionScript 3.0 项目。它启动并读取一个 xml 文件,其中包含图像的 url。我已将 url 保留在与 swf 相同的文件夹中
是否可以根据其 website 上提供的规范开发 AUTOSAR BSW 堆栈(例如用于 CAN 通信)?不购买任何昂贵的供应商工具?可以遵循哪些步骤?我被要求探索这种可能性。 最佳答案 是和否。工具
有人知道如何用音频文件的内容覆盖 iPhone 麦克风吗? 想象一个场景,您正在通话,并且想要播放一些简短的音频让其他人听到。 因此,有必要将麦克风(硬件)置于保持状态,并使用委托(delegate)
我遇到了这个问题,我的应用程序出现 EXC_BAD_ACCESS 错误并卡住/停止。我使用模拟器的“向左旋转”和“向右旋转”选项来模拟方向变化行为。导致此错误的可能原因有哪些?由于我没有获得有关错误的
我有超过 1 台 Mac,我想在所有这些 Mac 上进行开发。我知道我需要在每台机器上同步我的手机,但这是我遇到的最小的问题。看起来我无法在手机上运行应用程序,除了在其中之一上开发的应用程序。 是否有
在手机上测试时,我的应用程序在特定点崩溃。控制台显示此消息 Tue Jan 27 15:47:14 unknown SpringBoard[22] : Application com.myprof.
我有一个案例,我从服务器获取信息。我的应用程序有一个选项卡栏和导航按钮。我希望应用程序显示进度指示器并禁用所有其他控件,以便用户在从服务器提取数据时无法跳转。我怎样才能实现这个目标? 我想到的一种方法
有时,当我尝试“构建”/编译下载的源代码时,我会收到以下警告: ld: warning: directory '/Volumes/Skiiing2/CD/ViewBased/Unknown Path/
我无法在 Apple 文档中找到关于开发和分发配置之间差异的明确解释。我目前正在使用开发配置在我的 iPhone 上进行开发和测试。我打算将该应用程序分发到我的 Beta 测试中,我想知道: 我需要使
我在使用 SharePoint 时遇到的最大挑战之一是它不能很好地适应典型的项目环境,其中至少包含开发和生产环境。我遇到的最多的问题是内容和列表是如此紧密地耦合在一起,以至于如果不在生产环境中执行内容
我失败了fist step让 Eclipse(对我来说是全新的)为 ARM 开发做好准备。 我在 Windows 10 中安装了 Eclipse。我想我应该安装 xpm,但我不知道在哪里输入此命令:
首先,我告诉你-我是编码新手 我正在使用vs代码来学习c++,它不会产生像dev c++或codeblocks这样的调试器。我看了一些视频,其中我们必须编辑json文件,这对于初学者来说非常复杂。有人
我失败了fist step让 Eclipse(对我来说是全新的)为 ARM 开发做好准备。 我在 Windows 10 中安装了 Eclipse。我想我应该安装 xpm,但我不知道在哪里输入此命令:
我开发了一个 Ionic 应用程序(iOS 和 Android 的混合)。我有 Xcode 8.3.3 并购买了一年的 Apple Developer Program 订阅。 我不想测试我的应用并将其
我是一名优秀的程序员,十分优秀!