博客地址:https://ainyi.com/62 这些日子刚到京东工作,刚在北京安定下来,事情比较多 但在上周看了看我的博客,发现首页的加载速度真的够慢的 虽然之前就发觉,但一直不知道怎么继续优化,好像该优化的都已经优化好...重大 bug 从刚做好这个博客不就第一次就发现了,发起 ajax 请求时,可以看到 content-download 的时间居然比 waiting 的时间还长,而且首页等待时间可以达到好几秒,真心慢,...,一直不知道怎么优化 上周查了查 ajax 请求的数据,首页加载每个博客的数据居然携带上博文的 markdown 字段和 html 字段,这两个字段的数据量的庞大不是一般的。...马上回去更改了过来,首页请求的 ajax 是分页博客数据,不应该返回博文这个字段。...,免得页面加载速度过长,体验不好 本博客的其他页面的针对每个 ajax 请求都作了优化,该传递、不该传递,心里清楚~ 相关链接 之前写过这方面的博客:—— 页面性能优化 博客地址:https://ainyi.com
今天初步的完成了首页加载速度的优化和博客列表缓存。前者是为了让游客访问首页更舒服而不用等加载半天,后者是为了减少服务器和浏览器的请求响应次数来减轻彼此的负担。...也蛮好看不是(/▽\) axios请求加载 这次给axios也加上了nprogress的组件来弥补请求加载到响应的空白时间(虽然,貌似,没起到作用?...博客列表请求缓存 没错,之前博客页每次到一个分页都会发一次请求,获取当前页的博客列表,当然这样的及时性很高,但是,一个不可忽视的点就是博客的更新频率没有那么高,所以实时性需求也没有那么大。...这里就将每次获取页面的列表数据存于vue store中,以后每次再次访问该分页,该页面都会直接返回存于store中的列表数据,这样就避免了无意义的重复请求与响应,此外通过这个,顺带解决了游客看玩一个博文返回后从第一页重头加载的尴尬局面...('changeBlogTotalSize', res.data.data) }).catch(err => err) } } } }) 通过这些捣鼓,首页不带
Vue 网站首页加载优化 本篇主要讲解 Vue项目打包后 vendor.js 文件很大 如何对它进行优化 以及开启Vue的压缩 和 nginx gzip 压缩的使用, 其他就是对接口优化等 1. vendor.js...vue axios 等等 如下图 1.4 最终重新打包 npm run build 可以发现 Vue 的vendor.js文件确实变小了很多,这样在加载首页的时候 浏览器请求它的时候不会过大 可见vendor.js...x-httpd-php image/jpeg image/gif image/png; 3.5 查看是否生效 可以看到相应头中存在 Content-Encoding:gzip 表示已经配置成功 4.首页接口优化...对首页接口page 进行优化,主要是针对不需要的字段不返回,减少报文,一开始包括了markdown的报文和markdown生成的html报文 导致报文很大,请求接口耗时很长 可以看到优化后的接口只有...以及开启Vue的压缩 和 nginx gzip 压缩的使用, 其他就是对接口优化等。
一、路由懒加载 { path: '/index', component: () => import('@/views/index'), //懒加载-访问该页面才加载 } 这一步之后,打包后会发现很大的...、FireFox、IE9+ async属性主要是为了不让页面停下来等待脚本的下载,也就是说async可以在页面渲染的同时在后台下载脚本。...多个异步脚本的话就是谁先下载完谁先执行,不一定会按照顺序执行了,在异步加载的时候建议不要修改DOM //比如echarts的CDN <script async src="https://cdn.bootcdn.net...,该方法可以确保所有设置了defer属性<em>的</em>脚本按顺序执行 如果脚本不改变文档<em>的</em>内容,可将defer属性加入到script标签中,以便加快处理文档<em>的</em>速度 简单点就是:延迟到页面解析完毕之后再执行 3、...动态创建script标签(基本不用啦) 在还没定义defer和async前,异步<em>加载</em><em>的</em>方式是动态创建script,通过window.onload方法确保页面<em>加载</em>完毕再将script标签插入到DOM中
原因 优化博客图片加载的主要原因是自己博客里面使用的图片比较大,并且在首页显示了,这就导致首页加载速度跟不上,于是就有了优化图片加载的想法。...适用范围: 使用了bolo或者solo博客,当然其他博客可以提供参考。 使用自定义的图床,社区图床不支持压缩。...优化步骤 nginx 安装图片压缩模块 使用apt安装模块: apt insyall libnginx-mod-http-image-filter 如果是redhat系列的则可以使用下面命令查找对应的模块...,社区的图片处理了会有问题,具体可以根据实际情况修改。...后续 由于本人租的服务器是1C1G的,上面跑着好几个服务,使用图片压缩占用CPU太多,所以后面去掉了。
最近忙着给服务器做做数据迁移,忙里偷闲看了昝辉老师的博客感觉这篇文章很好就转发了,在很久之前我没怎么考虑做SEO优化,但是网站的权重是2,最近一年不知道是什么原因造成的,网站权重一直徘徊在权1,这个权2...就是上不去啊,没招才重新关注SEO优化这个事。...昝辉老师的回答: 这是一个大部分网站都会碰到而且没有优化好的问题,所以在博客里再详细回答一下。 确实像这位朋友所说,使用“主页”,“Home”之类做锚文字链接回首页,没能充分利用锚文字对SEO的作用。...3)如果第二种方法实现起来比较困难,也可以优化左上角网站logo使用的ALT文字,使其包括主要的首页关键词。 通常网站logo应该处于最左上角,在代码中比主导航还更靠前。...而图片ALT文字大致相当于文字链接的锚文字效果。 这几种简单方法都可以适当优化主页链接的相关性。
自己折腾的方法,一共总结了五层优化加载速度的方法,用最低的价格(免费)来加速最快的网站!...,将链接改为本地路径即可,前提是你的服务器是国内的或者亚太地区的,这样速度也比jsdelivr快!...baiyinet.cn/archives/18.html 方法三:开启宝塔面板站点加速 https://baiyinet.cn/archives/25.html 方法四:缓存规则配置 这个缓存规则主要是用于非首次打开的速度优化...方法五:门槛较高,优化代码 1.将js、css等文件合并减少请求次数 2.压缩js、css以提升速度 3.优化代码结构,简化代码,删除没必要的代码 4.将百度统计代码放到最下方而不是头部,也可以直接删除没啥吊用...,宝塔面板企业插件有网站统计的!
本篇开始就正式博客网站的开发了,本篇文章实现博客首页的开发。...博客网站的架构如下: 1.左上方头像区域,鼠标移入会有下拉菜单进行注册登录退出等操作 2.左下方博客导航栏区域 3.中间博客正文区域 3.右侧精选文章展示以及友情链接展示 我们可以先看下具体的首页效果...这边有一个小细节需要优化的就是登陆/注册按钮和退出按钮不能同时显示,我们首先需要在data中设置变量flag,然后在mounted的时候监听localStorage中是否有保存用户信息,如果处于登录状态则隐藏登陆...左右两侧导航栏实现完毕,接下来需要设置中间的博客主界面,实际上中间界面不是固定界面,而是由index.js中routes的components决定具体渲染哪一个vue文件作为博客主界面,在首页我们渲染的是...css就是样式的调整,没什么好解释的,大概贴下css代码自己理解下: ? 到这里我们博客首页就实现完毕了,我们可以先看看首页效果: ?
比如你访问了我的博客主页 http://zmrenwu.com/,服务器接收到这个请求后就知道用户访问的是首页,首页显示的是全部文章列表,于是它从数据库里把文章数据取出来,生成一个写着这些数据的 HTML...HttpResponse def index(request): return HttpResponse("欢迎访问我的博客首页!")...浏览器接收到这个响应后就会在页面上显示出我们传递的内容 :欢迎访问我的博客首页!...欢迎访问我的博客首页! 使用 Django 模板系统 这基本上就上 Django 的开发流程了,写好处理 HTTP 请求和返回 HTTP 响应的视图函数,然后把视图函数绑定到相应的 URL 上。...', 'welcome': '欢迎访问我的博客首页' }) 这里我们不再是直接把字符串传给 HttpResponse 了
不过我们仅仅在首页返回了一句话:欢迎访问我的博客。...这是个 Hello World 级别的视图函数,我们需要编写真正的首页视图函数,当用户访问我们的博客首页时,他将看到我们发表的博客文章列表,就像 演示项目 里展示的这样。...如果你好奇,现在就可以运行开发服务器,看看首页是什么样子。 image.png 如图所示,你会看到首页显示的样式非常混乱,原因是浏览器无法正确加载 CSS 等样式文件。...需要以 Django 的方式来正确地处理 CSS 和 JavaScript 等静态文件的加载路径。...带你从零开始一步步开发属于自己的博客网站,帮助你以最快的速度掌握 Django 开发的技巧...
图片 我们需要修改主题的时候,尤其时需要修改首页时,我们需要知道首页文件的加载顺序: WordPress首页文件的加载顺序: 1、front-page.php 2、后台–设置–阅读所设置的页面。...3、home.php 4、index.php 如上排序,如果你主题里面有 front-page.php 文件,那么你后台设置首页是无效的 注意:如果在 wp-content 下面有 db.php 的话也会重复加载在首页
框架篇-Django博客应用-创建项目 ?...⑦配置 MySQL 数据库,settings.py 中数据库的配置,可以看到默认的数据库为 sqlite3 ? ⑧修改数据库 MySQL ?...博客首页元素 基本上博客(博客首页)上有以下几种元素(从上至下,从左至右): 1.菜单导航栏 2.博客主视区,常见的会分为两栏或三栏 3.博客底部,常见的是站点地图链接、备案号......公共元素 上面讲博客元素分成了三类,但很明显导航栏和底部栏可认为是不变的。 对于公共元素,在设计代码时,可以将其提取出来,在其它模板包含它即可。...仅仅是作为 HttpResponse 的参数,并未使用模板。 模板的语法 1.变量 模板中使用变量时,需要将其用两个大括号括起来( {{ VariableName }} ) ?
图片越来越多,服务器容量不够用不说,前端加载速度慢,影响读者阅读,导致读者流失。 毕竟那时候刚开始接触博客,随着后来知识面拓展,阅读量增加,发现这种做法效率太低。...下面详细讲解下: 1.图片本地压缩 有时候博客或者网页里面需要插入图片,毕竟图文并茂对于读者来说更加有吸引力,更容易理解。...图片上传空间加速 用得最多的恐怕就是七牛吧。大概的工作原理我通俗的解释下: 首先是图片存储在你自己服务器上:读者访问你的文章,直接从本地服务器加载图片。...(用的是自己的流量,自己的服务器处理,没有额外加速buff) 点击测试:我存在自己服务器上的图片 如果存储在七牛等上:读者访问你的文章,直接从七牛服务器加载图片。...,图片还没有我放在本地加载快,而且想要使用CDN加速好像得充值10元验证你的账户。
说明:Typecho 博客默认没有自动摘要的功能,博客首页和分类归档页面显示的文章都是全文输出的,对于内容文字很多的文章,会把页面拉伸得很长,显示得也不怎么美观。但博主可以在发表文章的时候手动摘要。...方法 在发表文章的时候,在文章内容中添加标签即可。 比如内容一共有五段,要显示前三段,就在第三段结束处添加标签代码
我们知道 WordPress 的主循环,查询到 posts 之后,会去检查这个文章列表的所有 postmeta 和 term 数据是否有缓存,如果没有,他会分别使用一条 SQL 加载出来,这样即使没有缓存...,也不会有大量的 SQL 查询。...主循环并不是一次将所有作者数据加载 如果多用户博客,并且文章列表的作者不同,WordPress 查询到 posts 之后,并不是一次将所有用户加载的,而是在文章列表渲染的时候,每个作者单独去加载的,如果列表数据多并且作者不同...在主循环一次加载所有作者数据 那么为了提高效率,我们可以WordPress 的主循环查询到 posts 之后,一次所有作者数据都加载了。...:cache_users 函数首先去缓存里面查询是否有每个作者的用户信息,然后将没有的用户信息使用一条 in SQL 查询出来,并写到内存中,所以如果系统已有内存缓存,其实对效率是有显著的提升的。
在我的博客首页添加了告示板模块,有两种模式,一种是自定义语句,一种是一言API 说明 本文是以我现在使用的Ayer主题为例 步骤 第一步 找到对应的首页文章页的代码文章 例如,ayer主题的位于hexo...="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"> 当然,为了优化...,也可以自己把css整合到css文件中,或者把cdn文件放到after-footer里,这里不再详述 第三步 打开主题的配置文件 注意是主题的配置文件!
先来完成上一篇的首页导航栏: 1.模板基类 base_front.html 2.导入 bootstrap 核心文件,使用的是 CDN 加速服务。 3.... 标签中的 {% block %}{% endblock %} 是 django 模板中的语法。简要的来说,就是定了 block 模块后,在子模板中可以重写它。...4.更新博客首页,{% extends 'base/base_front.html' %} 中 extends 为 django 模板中的语法。简要的说就是扩展/继承父模板。 5....浏览器访问博客首页,查看效果 Models 模型与数据库息息相关,一个模型对应一个数据库表。...,文章的标签 views,文章的阅读次数 add_time,文章的发表的日期时间 4.生成数据库表 模型编辑好之后,需要生成数据库表 (每次修改了 models.py 内容时,都需要重新生成数据库表)
下面以京东的顶部导航为例子: 京东商城 SEO 优化 我们可以清楚的看到双 11 快来了,京东在首页顶端推送了广告,而右侧红框在客户服务部分弹出了相关的一些信息介绍,这里需要说明的是我不知道有多少 PC...重要提示:您的首页上的内容必须是唯一的,即便你的产品与服务可能和很多公司类似。...图像优化 图片对于一个电商网站是最重要不过的了,很多电商网站包含大量的图片,用以更好的展现给访客,通过视觉营销来提高转化率,这会导致一个小问题,就是图片加载时间过于长。...以上内容就是优化商城类网站首页的方法,希望能帮助大家更好的优化自己的商城网站。 沈唁志|一个PHPer的成长之路!...原创文章采用CC BY-NC-SA 4.0协议进行许可,转载请注明:转载自:优化商城类网站首页的方法
WordPress首页底部“加载更多”按钮美化 ---- 1.演示效果 2.实现教程 主题文件style.css底部(子主题)添加以下代码即可,更多美化阅读文末标签 /* 加载更多https://xiaohuli.vip...如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
个人博客地址 自己搭建了个个人博客,但是每次打开都会加载好长时间,最后通过开发者工具发现是一些字体和css文件导致的,发现问题那就好办了。...解决方案: 1、修改_config.icarus.yml,主要是修改最后的providers,如下: # CDN provider settings # https://ppoffice.github.io
领取专属 10元无门槛券
手把手带您无忧上云