前端SEO需知

不会?看同行怎么做。

  1. 通用
    1. 使用CDN等,提高网站访问速度
  2.  <head>
    1. 合理的title,content,description,其中
      • title在不同页面可以不同
      • description切忌堆砌关键词
  3. <body>
    1. 使用语义化的标签
    2. 代码符合W3C规范,用linter以validator来验证之
    3. 重要的内容放前面,因为搜索引擎抓取的数据长度有限制
    4. 重要内容不用JavaScript输出,Landing Page不做PWA等,做静态网页
    5. 图片必须加alt属性
    6. 有空把ARIA也做上

网页测试的那些事

网页设计师以及前端工程师跟大众有着很不一样的知识背景。比如,汉堡图标(一般放在屏幕左上或右上方的由三条横岗组成的菜单按钮)的含义不为大众所知,但是很多网站都用它。因此,网页测试的时候,如果成本允许,建议请真人去测试。根据Ida Aalen的建议,5真人就可以了。Ida Aalen在Front-Trends上也提供了一些降低真人测试成本的思路。

在不同的浏览器的兼容性上,请务必实测,尤其是那些要求兼容IE 8的网页。建议使用BrowserStacks等付费在线测试服务,或免费的WebPageTest

关于网页的布局,建议通过眼动跟踪(eye tracking)技术来分析布局的合理性。开源的方案有WebGazer.js

常见浏览器兼容性问题解决方案

  1. JS类
    1. 统一使用
      1. document.fromName.elements[“elName”]
      2. [ ]来获取集合类对象
      3. el.getAttribute()获取自定义属性
      4. document.getElementById(“id”),不用document.idName
      5. var声明变量(在生产的时候),不用const或let
      6. ” var myX = event.x ? event.x: event.pageX; var myY = event.y? event.y : event.pageY; ” 不直接使用MouseEvent.x或MouseEvent.pageX
      7. ” var targetNode = event.srcElement ? event.srcElement : event.target.target “,不直接使用event.srcElement或event.target
      8. window.location,不使用window.location.href
      9. window.open(URL, name, param)来打开新窗口,不使用window.showModalDialog或window.showModelessDialog
      10. document.body.onload = function(){ … }
      11. el.parentNode,不使用el.parentElement
      12. cursor:hand,不使用cursor:pointer
      13. ” el.style.height = imgEl.height + “px”; “,不使用el.style.height = imgEl.height
    2. 统一不使用
      1. input.type来修改属性
      2. window.event
      3. window.frameId跟window.frameName
  2. HTML类
    1. 通用:使用HTML5 Shiv
  3. CSS类
    1. 通用:使用Normalize.css
    2. opacity
      .demo {
        filter: PRogid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60);
        opacity: 0.6;
      }
  4. 其他类

via 刘涛@知乎 et al.

PWA(Progressive Web App)学习随笔

  1. PWA示例:pwa.rocks
  2. (理想)PWA(渐进式网页应用)的特征
    1. 网页的框架渲染很快(App Shell)
    2. 安全(HTTPS)
    3. 离线情况下也可以运行(Network independent)
    4. 响应式的(Responsive)
    5. 像App一样,但却是一个网页
    6. 性能渐进(如果API没有,用fallback,向下兼容)
    7. 可安装
    8. 可链接(Linkable,一般通过路由/router来实现)
  3. PWA的前身们
    1. Nokia WRT
    2. iOS Home Screen Web Apps
    3. Firefox Open Web Apps
    4. Chrome Home Screen Web Apps
  4. PWA的优势
    1. 可链接
    2. 可被发现
    3. 容易部署
    4. 容易升级
    5. 离线可用
    6. 可以安装
    7. 可以推送信息
    8. 全屏体验
    9. 网页响应速度更较快
  5. PWA常用Polyfills
    1. es6-promise
    2. whatwg-fetch
  6. 本地存储技术
    1. Cookies
    2. Local Storage & Session Storage
      • 基于String
      • 同步
    3. WebSQL
    4. IndexedDB
      • 基于Json
      • 异步
        window.indexedDB = window.indexedDB 
                         || window.mozIndexedDB
                         || window.webkitIndexedDB 
                         || window.msIndexedDB
        ;
        window.IDBTransaction = window.IDBTransaction
                              || window.webkitIDBTransaction
                              || window.msIDBTransaction
                              || {READ_WRITE: "readwrite"}
        ;
        window.IDBKeyRange = window.IDBKeyRange
                           || window.webkitIDBKeyRange
                           || widow.msIDBKeyRange;
        ;
        
  7. 网页缓存
    1. Application Cache
    2. cache API & serviceWorker
      • 由于信息安全的考虑,serviceWorker只能在HTTPS下使用网络
      • serviceWorker不与任何页面挂钩,也无法操作DOM
      • Apple与MS的浏览器不支持serviceWorker
        if("serviceWorker" in navigator){
            navigator.serviceWorker
            .register("sw.js")
            .then(function(){
                console.log(`serviceWorker Active`);
            })
            .catch(function(err){
                console.log(err)
            });
        }
  8. 其他工具
    1. Favicon Generator

WPO & PWA 技巧与工具

PWA (Progressive Web App) 是WPO (Web Performance Optimization) 的一个模式。PWA是最近(2017)前端的热点,它能比较明显地促进销售额或转化率。


技巧

一、下载速度慢

  1. 渐进式下载 / (不影响用户体验的)预加载
    • 使用加载页面(loader)。归根到底,我们要提升的是体验,不是速度
    • 下载第一页的资源先,其他资源按需下载(On Demand Download)
    • 注意,不要在用户没同意的情况下烧别人的流量
    • 使用<link rel=”dns-prefetch” href=”https://www.foo.bar”>(预查DNS)
    • 使用<link rel=”prefetch” href=”https://www.foo.bar”>(只下html)
    • 使用<link rel=”prerender” href=”https://www.foo.bar”>(下html并无头地渲染网页)
    • 懒惰式的预加载(Lazy Load)资源
      • Multistage Download(根据网页的状态触发lazy loads)
      • First Scroll Download(页面首次被滚动式开始lazy load)
  2. 压缩数据
    • 尽量将单文件大小保持在14 Kb以下(超过14 Kb),以减少HTTP包的数量
    • 丑化(uglify)以及minify:JavaScript跟CSS还有HTML
    • 用zopfli算法压缩所有用于生产的图片(推荐使用advpng),很多网站都没有这样做,比如多数政府网站
    • gzip所有能gzip的数据。brotli可能是未来
  3. 减少请求
    • CSS/JS文件打包(bundle)
    • CSS:document.onload之前,只下载critical的CSS,并将它放到<head>里面
    • CSS:限定总文件大小;排查没用的class跟id;内联(inline)化;用速记(short hand)写法;用雪碧图(sprites);不要使用@import,不得以请用<link>
    • 尽可能缓存已下载的数据
    • (适量的固定)图像(img & svg etc.)内联化(data:[<mediatype>][;base64],<data>
    • 后端配置Etag(验证缓存)
  4. 优化网络
    • 使用HTTP2
    • 用CDN,尤其是三方JavaScript库,用户本地可能就有缓存
    • 三方智能图库,如WURFL
  5. 减少不必要的流量
    • 避免301等的跳转,零容忍404
    • 用没有cookies的子域名来存放不需要cookies的数据,比如图片,以减少不必要的cookies流量
    • 避免不必要的DNS查询
    • 避免跳转,比如aa.com >> mobile.aa.com/homepage/
    • 零容忍“<img src=””>”以及“var img = new Image(); img.src = “”;”,他们会触发无用的请求
    • 后端:Enable Keep Alive
  6. 优化代码
    1. 精简DOM元素的数量

二、渲染效果差

  1. 通过淡入与延迟,防止网页样式跳变
    <head>
    ...
    <style>
        body{
            opacity:0; 
            transition: opacity 600ms ease-in-out 80ms;
            /* 上面给了80毫秒的延迟,请斟酌! */
            animation: js-download-timeout 0s 8s 1 normal forwards;
        }
        @keyframes js-download-timeout {
            from{opacity:0;}
            to  {opacity:1;}
        }
    </style>
    <noscript>
        <style>
            body{opacity: 1;}
        </style>
    </noscript>
    ...
    </head>
    <body>
        ...
        <div id="place-holder-for-ad">
        </div>
        ...
    </body>
  2. 60 fps动画(16毫秒左右一帧)
  3. 精简操作元素的次数,建议用Shadow DOM,或者用Vue.js等利用Shadow DOM的库
  4. (如果下载速度够快),将CSS在<head>里尽可能靠前
  5. 将JavaScript放到</body>后,先跑CSS,再跑JS
  6. 用<link>不要用@import,这样有利于渐进式渲染
  7. 广告放iframe里面,以:1)防止广告的CSS与页面CSS冲突;2)防止样式的重新计算,降低CPU的负荷。iframe的src通过JavaScript来分派,减少window.onload类事件触发前的耗时。
  8. 不在CSS内使用JS / CSS表达式(比如,”background-color: expression( (new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00” );”,这种东西也很少见了)
  9. 如果资源不够,避免使用CSS滤镜(filter)
  10. 跟网页设计师们商量一下Shadow等耗计算资源的效果可不可以取消掉
  11. 用<img>或base64编码,不用CSS background,因为background-image在结构加载完成后才开始加载

三、网页响应慢

  1. CSS动画尽量用Transform与Opacity,尽量避免width与height的动画
    因为GPU可以用很少的资源来计算Transform与Opacity,而width跟height的动画是需要CPU做的,总体效果不好。
  2. iOS的部分触屏情景系统响应延迟300毫秒(iOS 9.2已无此问题)
  3. 有比较复杂的运算时,用Worker
    1. 大app,不妨用gpu.js,或关注WebAssembly
  4. 不要使用window.onload,用:
    document.addEventListener("DOMContentLoaded", function() { // code... });
  5. 判定、计算并优化“Time to First Meaningful Interaction”
  6. 加载时间保持在1s之内
  7. 添加<meta>规则,去掉一般作用不大但是浏览器默认开启的功能
    <!-- disable iPhone number detection on iOS-->
    <meta content="telephone=no" name="format-detection"/>
    <!-- disable email detection on Android -->
    <meta content="email=no" name="format-detection" />

 

via Chen Shay: You don’t need AMP for that | JSConf EU 2017 et al.


工具

一、资源消费情况监测

  1. WebPagetest
  2. Pingdom Web Speed Test || Mobile Friendly Test
  3. Chrome Dev Tools > Network ( > Capture Screenshot)
  4. Charles || Fiddler

    二、优化建议

  5. Google PageSpeed Insights