Sean的博客

如何让你的移动端网站更快

Cindy Krum 最近发表了一篇非常值得一读的文章:《9 Things You Need to Know About Google's Mobile-Friendly Update》,强烈建议在阅读本文前理解一下该文的思想。已经准备好了?那我们开始吧。为了在 4 月 21 号前迅速优化为移动端网站,最简单的方法就是牺牲一些性能。但是谷歌曾经多次提醒我们,站点的响应性能是非常重要的搜索权重点,比如 2010关于桌面端2013 关于移动端 的这两篇文章。在本文中,我将会讲述一下最佳实践方案,希望你在创建或重构设计时牢记这些经验。此外,建议你精读谷歌关于移动友好型站点的指导文档

高性能 HTML

在阅读本文之前,你是怎样优化网页的呢?大多数开发者的焦点集中于 JavaScript、图片、服务器配置、文件压缩合并,甚至是 CSS。虽然 HTML 是前端技术的核心之一,但却一直没有得到应有的重视。HTML 的体积日渐臃肿。目前,全球访问量前 100 的网站每个页面大概有 40kB 的大小,类似亚马逊和雅虎这样的网站,甚至每个页面包含了数千行的 HTML 代码。最近,youtube 主页的 HTML 代码量甚至达到了惊人的 3.5K 行(翻译本文时已达到了 4.8K 行)。

使用 Sass 美化表单控件

表单控件在网页设计中无疑是占有重要地位的。由于表单控件是用户频繁使用到的页面元素,所以有必要使用 Sass 来快速美化项目中的表单控件。

Sass 混合宏灵活传参的秘技——Null

在 Sass 混合宏中,我们可以向其传递参数列表,便于快速地配置相关属性。如果定义的混合宏定义了参数,在实际调用就需要为每个参灵敏传递一个合理的值,否则就会出现错误提示。这往往强迫开发者为非必须的变量传值,甚至重置非必要的初始值。那么,怎么样才能避免必须为每一个变量传值 呢?这就是这篇文章要介绍的相关知识。

Sass 的自意识混合宏

几天前的一个晚上,我在 Up Front Berlin 上就过去几年 Sass 的某些特性谈了谈自己的使用方法。点击这里可以查看当时的幻灯片。但就我个人而言,更乐意发表几篇笔记,深入地探讨相关的问题——本文就取材自这些笔记中的一些片段。我所探讨的焦点在 map 这种数据类型上,特别是使用 @content@at-rootunique-id() 等指令合并 maps 所实现的奇妙方法。其中之一就是混合宏的设计模式,这一设计模式通过使用 @extend 指令和占位符选择器来解决 Sass 的一些实际问题。

Susy 2.2 中文文档

Susy 是一款进行栅格布局的辅助工具,它让开发者摆脱了冗杂的数学计算,同时降低了样式与结构的耦合程度。它的能力正如官网的简介一样强大。感兴趣的,可以阅读此文档,做进一步的了解与学习。

HTML 5 Boilerplate 5.0 中文文档

本文是根据HTML5 Boilerplate 官方文档所译,主要介绍了HTML5 Boilerplate的架构以及涉及到的相关知识。并且详细介绍了如何在基于HTML5 Boilerplate创建自己的项目。

基于 Varnish ESI 的缓存控制方案

对于优化移动端的加载速度,我非常坚信适用于所有用户的优化方案,才是最佳方案。做出这一判断的出发点是因为,我们无法预知用户准确的联网方式,可能他使用的并不是手机,但却在使用手机热点的信号,或者使用的是不稳定的无线信号...

使用 Varnish 优化移动端站点

想象一下,你刚刚发布了一篇博文,并分享到了社交网络。然后,这篇文章恰巧被大V看中再次分享了出去,立即吸引了数百粉丝的目光,引导他们涌入了你的网站。看到这么多的访客量,以及它们的评论,你内心激动不已。突然之间,你的网站就挂掉了,满屏的数据连接错误……或者假想另一种情境,你一直很努力地创业。突然有一天,一个大V在社交网络表达了对贵公司的喜爱之情,字里行间满满的赞叹。关注这个大V的粉丝心动了,又涌入了你的网站。不幸的是,点击连接后却无法进入你的网站,或者进入后无法注册用户,甚至页面相应超时,无法获取产品的序列号。尽管你在社交网络上对此非常诚恳的表达了歉意,但众多的浏览者都不会再有兴趣。

LibSass + Susy + Grunt 整合实践

我所熟悉的每一个开发者,都急切地盼望着在开发中使用上 LibSass。当 Eric 宣布 Susy 已经可以完美融入 LibSass 的时候,我激动的跳了起来,并开始思考使用 Grunt 来创建一个构建流程。本文中我将会向你演示,我是如何配置 Grunt 来整合 LibSass 和 Susy 的。

页面

返回顶部