jekyll静态博客提升访问速度：内嵌CSS，异步加载js，压缩HTML

最新推荐文章于 2023-06-29 14:24:03 发布
VIP文章 最新推荐文章于 2023-06-29 14:24:03 发布
阅读量1.9k 收藏 2
点赞数 2
分类专栏： 博客
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangpeterx/article/details/104093336
版权

在谷歌搜索的功能速度(实验性)中推荐使用工具PageSpeed Insights查看我的网页访问速度情况：PageSpeed Insights

分数很低，只有33分。

优化建议的第一条是移除阻塞渲染的资源，里面列出了非异步加载的css和js文件。提示：

资源阻止了系统对您网页的首次渲染。建议以内嵌方式提供关键的 JS/CSS，并推迟提供所有非关键的 JS/样式。

异步加载javascript

对于非关键的js文件，想要实现异步加载很简单：

<script async src="siteScript.js">
最低0.47元/天 解锁文章
zhangpeterx
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ivan-jekyll:基于Jekyll的新静态网站博客
05-12
个人主页 这个站点是我在网络上的个人主页，上面有传记和博客文章。 它专注于技术职位。 对于“照片”，请参见和划桨 。 内置 静态网站生成器 -主题
超级详细的手把手教你使用Lighthouse更好推动项目性能优化，性能指标详解，优化方法，需要关注指标分析
tangdou369098655的博客
01-17 1万+
Lighthouse是什么—一种工具 Lighthouse 是一个开源的自动化工具，用来测试页面性能。 为什么要用Lighthouse----提升用户体验 分析收集各种应用页面性能指标，并进行评估，以此我们可以根据评估结果进行针对性优化，不断提升用户体验 Lighthouse怎么用----用法多样，根据需求进行选择 目前官方提供了4种使用方式： Chrome 开发者工具（DevTools） Node CLI Node Module Chrome 扩展 方式一：Chrome 开发者工具（DevT.
使用性能分析工具介绍性能优化的一些手段
qq_40409143的博客
04-08 1198
passive:不会对浏览器的默认行为说No 这个修订是为了扩展新的选项，从而自定义更多的行为，目前规范中 options 对象可用的属性有三个： addEventListener(type, listener, { capture: false, passive: false, once: false }) 三个属性都是布尔类型的开关，默认值都为 false。其中 capture 属性等价于以前的 useCapture 参数；once 属性就是表明该监听器是一次性的，执行一次后就
什么会阻塞浏览器的渲染呢？css?js?
qq_43569680的博客
03-28 1825
渲染引擎 一个渲染引擎主要包括：HTML解析器，CSS解析器，javascript引擎，布局layout模块，绘图模块 HTML解析器：解释HTML文档的解析器，主要作用是将HTML文本解释成DOM树。 CSS解析器：它的作用是为DOM中的各个元素对象计算出样式信息，为布局提供基础设施 Javascript引擎：使用Javascript代码可以修改网页的内容，也能修改css的信息，javascript引擎能够解释javascript代码，并通过DOM接口和CSS树接口来修改网页内容和样式信息，从而改变渲染
内嵌css_如何以及为什么应该内嵌关键CSS
culi4814的博客
08-30 394
内嵌css In the early days of the internet, websites were primarily used to show text based information. Slowly, our connection speeds have improved and users have been able to download high-resolution i...
静态博客提升访问速度：内嵌CSS，异步加载js，压缩HTML
最新发布
shuanghusun的专栏
06-29 125
根据html - How to load CSS Asynchronously - Stack Overflow，想要css async load asyncload，最多只能在一个css文件上实现，而且css是阻塞渲染的资源，更多内容见：阻塞渲染的 CSS Web Google Developers。想要最快的方法加载css，推荐内联关键css，其实对于小网站来说，可以把所有的css全部内联，一次加载完成。但是对于css文件来说，异步加载就比较困难了，没有js那样的直接异步加载的工具。
javascript内嵌式css样式参考
m0_62788719的博客
10-30 182
javascript内嵌式css样式参考
javascript：html嵌入javascript代码的三种方式
qq_51476492的博客
03-16 9379
一、概念 javascript是运行在浏览器中的脚本语言，运行在浏览器的内存当中，不需要程序员手动编译，编写玩源代码之后，浏览器直接打开解释执行，简称JS。 二、html嵌入javascript代码的三种方式 JS是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应的程序。 例如：在JS中有很多事件，其中有一个事件叫做：鼠标单击，click，并且任何事件都会对应一个事件句柄onclick。 1.事件句柄是以html标签的属性存在的。 在按钮标签中设置onclick属性值，则点击按钮发生click事件后，
Lighthouse 报告中的规则汇总
h1986y的专栏
01-12 298
lighthouse项目地址​​https://github.com/GoogleChrome/lighthouse​​最近在做chromium相关开发，整理下开发者工具中lighthouse的规则信息，mark一下。PS: 编译devtool的bundle文件，要注意chromium中的lighthouse版本，che...
HTML中嵌入CSS的四种方式及优先级、如何选择内嵌式和链接式
热门推荐
dingzepeng97的博客
09-07 1万+
在HTML中嵌入CSS样式有四种方式: 1、行内样式 这个方式是直接在HTML的标签中插入 style="属性:属性值;..." 这个属性 这是最简单的一种插入方式，所以这个插入方式看上去很low 行内样式的缺点主要有两个: 一、w3c标准是:内容、样式、行为三者分开,这个嵌入方式不符合W3C规范,并且代码乱,不好维护 二、代码冗余,相同的style得写多次,不可复用    2、内嵌
jekyll-tailwindcss:Jekyll 中 Tailwindcss 的一个简单演示
07-24
Jekyll 的 Tailwindcss 这是一个在 Jekyll 中使用 sass 的 Tailwindcss 的简单演示如何使用它克隆存储库cd jekyll-tailwindcss bundle安装 jekyll 依赖项yarn安装节点模块bundle exec jekyll serve运行本地服务器...
web-development:使用HTML，CSS和JavaScript学习现代Web开发
05-06
它还探讨了命令行基础知识，Git和GitHub页面的基础知识，网站的可访问性，Web Performance和Jekyll（静态站点生成器）。 您将学习如何将技能从初学者提升为专业的Web开发人员。 课程项目是围绕现实世界中发生的...
jekyll-theme-hackcss：现在与Jekyll一起使用了简单的死CSS框架
02-04
jekyll-theme-hackcss Jekyll现在已经。 可移动的，现代的，时尚的，简单的。主题模式该主题有三种模式，可以在_config.yml进行配置。安装克隆此仓库。 创建您自己的网站。 简单。组态参见 。执照GNU PGL 3.有关更多...
jekyll-starter:使用Tailwind CSS和Alpine.js的Jekyll网站的起点
04-30
使用和Jekyll网站的。 入门 您将需要安装 ， 和 然后使用以下命令安装构建依赖项 npm install 提示：请确保提交生成的package-lock.json和Gemfile.lock文件。 然后构建并服务开发站点，运行 npm start 包含什么 这...
Jekyll博客统计访问量，阅读量工具总结--LeanCloud，不蒜子，Valine，Google Analytics
个人博客
01-19 3189
此文首发于我的个人博客：Jekyll博客统计访问量，阅读量工具总结–LeanCloud，不蒜子，Valine，Google Analytics — zhang0peter的个人博客 我用 GitHub Pages搭建了jekyll的博客后，想要在页面上实现访问量的统计。 因为实在GitHub上搭建的静态博客，不能像WordPress一样可以操作php和数据库，自然只能借助第三方工具。 网上有个问...
jekyll 博客对搜索引擎的SEO提升方法--head中的meta标签和Jekyll SEO Tag
个人博客
01-19 1113
此文首发于我的个人博客：jekyll 博客对搜索引擎的SEO提升方法–head中的meta标签和Jekyll SEO Tag — zhang0peter的个人博客 我用GitHub Pages搭建了jekyll的博客后，想要提升自己博客的SEO，尤其是对搜索引擎：百度、谷歌。 head中的meta标签 说道提升SEO，必然要提到HTML中的head标签中的meta标签。 元素可提供有关页面的...
GitHub-jekyll静态博客快速构建与优化--jekyll serve --incremental --profile
个人博客
01-27 912
此文首发于我的个人博客：GitHub-jekyll静态博客快速构建与优化–jekyll serve --incremental --profile — zhang0peter的个人博客 我的jekyll静态博客部署在GitHub上，平时自己本地测试的时候运行命令jekyll serve即可启动： C:\Users\peter\Documents\GitHub\zhang0peter.github...
在GitHub上搭建GitHub Pages博客-- Jekyll
个人博客
01-09 576
大约2年前，在GitHub上用Jekyll搭建了自己的博客：http://zhang0peter.github.io/。然后写了几篇博客后就没动过了。 然后2019年我开始在CSDN上写博客，GitHub上的博客更没动过了。 现在寒假期间想起了自己的GitHub博客，于是打算重新搭建。 先安装ruby，windows的下载链接：RubyInstaller for Windows 然后用ruby安装...
 htmlcss静态个人博客
06-10
制作 HTML/CSS 静态个人博客的步骤如下： 1. 设计博客结构和布局，确定所需元素和样式 2. 创建 HTML 文件，编写基本的页面结构，如头部、导航、页脚等 3. 在 HTML 文件中引入 CSS 样式表 4. 编写 CSS 样式，包括字体、颜色、布局、背景等 5. 在 HTML 文件中添加内容，如博客文章、分类、标签、评论等 6. 优化页面代码和样式，确保页面加载速度和兼容性 7. 测试页面在不同浏览器和设备上的显示效果 8. 发布博客，可以使用 GitHub Pages、Netlify 等免费的静态网站托管服务 具体的 HTML/CSS 语法和样式使用可以参考相关的教程和资料。同时，还可以借助一些框架和模板来快速搭建个人博客，如 Jekyll、Hexo 等。此外，还需要了解一些基本的后端知识，如数据库、服务器等，才能实现博客的完整功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值