web前端除了关注代码功能实现,还应具备web性能优化以及SEO优化的常识
web前端除了关注代码功能实现,还应具备web性能优化以及SEO优化的常识
——不会WPO、SEO的前端工程师不是好码农
作为一名web前端工程师,除了要实现上级的要求,满足其所需要的功能,还要在平时代码编辑的习惯上考虑web性能优化以及SEO。
首先是为人处事的问题,凡事不要等别人说你了才知道做。我很喜欢那一句话:我们是人,不是奴隶,要有自主性。
这些基本的东西上级肯定会要求,与其留到领导跟你说的时候再改,不如一次到位。你耳根清净,他得闲考虑其他更有价值的问题。
旁言不做赘述,直奔主题。
web性能优化(WPO:Web Performance Optimization)
减少HTTP请求
使用雪碧图(精灵图),多张图片合并到一张进行请求;
使用静态资源缓存:服务器上静态资源未更新时再次访问不请求服务器;关于静态资源缓存可参考掘金-美团点评点餐的这篇文章
压缩img,css,js等文件
使用公共的css、js文件(base、common)
图片懒加载
服务器端渲染
服务端渲染不仅仅解决了seo和首屏加载过慢的问题,还能减少接口的暴露,前后端分离的弊端就是接口的对外暴露,导致别人可以抓取我们的接口为所欲为……而服务端渲染可以做到,至少一小部分不该暴露出去的接口是可以留在服务端的.
CDN加速
CDN通过将资源存储在更接近用户的位置,缩短到服务器的往返行程,加快页面加载时间来解决性能问题。
优先加载css,js在末端加载
无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成。JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长。浏览器在下载和执行脚本时出现阻塞的原因在于,脚本可能会改变页面或 JavaScript 的命名空间,它们对后面页面内容造成影响。
合理的ajax请求
对于返回内容相同的请求,没必要每次都直接从服务端拉取,合理使用 AJAX 缓存能加快 AJAX 响应速度并减轻服务器压力。
缩小 favicon.ico 并缓存
有利于 favicon.ico 的重复加载,因为一般一个 Web 应用的 favicon.ico 是很少改变的。
减少DOM数量和层级数量
HTML 中标签元素越多,标签的层级越深,浏览器解析 DOM 并绘制到浏览器中所花的时间就越长,所以应尽可能保持 DOM 元素简洁和扁平化的层级。
SEO
网站布局优化
网站层级越少越容易被搜索引擎的爬虫抓取,一般中小型网站不超过三级。超过这一层级容易造成爬虫不愿意爬取和受众获取必要信息困难而平白损失资源。
导航优化
减少使用iframe
搜索引擎的蜘蛛不会辨认在ifram中被挪用的图片、文本、url等内容的,由于该内容不属于该页面,只是访谒的时辰被姑且的挪用,而且在SEO倡议中也有提到:“frame/frameset/iframe标签,会导致百度spider的抓取坚苦,倡议不要操作”这样更能证实其弊!
当然这也是iframe的一个优点,首先我们希望我们的部分内容被搜索引擎抓取,引流目标受众。但是往往我们需要考虑产权保护,希望把目标受众转化为忠实用户,我们自然不希望所有页面内容都被搜索引擎的爬虫抓取。iframe成为了一种解决方案。另外对用户而言iframe的本页面持续访问的页面体验也是相对较好的。
div+css布局
如果你的网页整体架构是通过table实现的,强烈建议你废除。table只适用于做数据列表。
要优化table,首先要避免下面这些:
- 用table来架构网页 布局死板
- table里面又套table 逻辑混乱,搜索引擎无法正确处理上下文关系。
- 滥用rowspan和colspan 理由同上。
title标题
强调重点,关键词前置
<meta keywords>
关键词、关键词、关键词!切记重复和过分堆砌
<meta description>
高度囊括网页内容,切记不能太长,避免重复堆砌
<h1>
正确使用h1标签,一个页面只出现一次
a标签
站内链接要加title加以说明,供用户和爬虫分析。而外部链接则需要加上el="nofollow",告诉爬虫不要爬,因为一旦爬取它就无法再回来了。
控制超链数量,超链太少爬虫就没有了桥梁,无法在站内自由行走。超链太多就会造成滥用,降低用户体验,搜索引擎也会对应降低权重。
img标签使用alt属性加以说明
防止图片加载失败,用户无法明白此处究竟要表达什么。
来自友情链接的助攻
- 百度、谷歌快照时间,越新说明这个网站搜索引擎权重高、更新频繁。
- 百度、谷歌收录数量,收录的越多越好。
- 网站相关性,就是指交换的网站与自己的网站主题是否相关,越相关越好。
- 网站PR值和导出链接数量,PR值越高、导出链接越少越好。
- 网站核心关键词的百度、谷歌排名越高越好。
谨慎使用display:none
爬虫会默认过滤爬取display:none里面的内容,可以考虑opacity或z-index
杜绝404
低级错误,浪费目标受众
流量核心
归根结底,一个网站的流量还是取决于网站的核心价值。你的内容是不是受众所需要的,才是最应该考虑的问题,其他的一切都只是工具辅助而已。
用心做产品,分析好客户需求
web前端除了关注代码功能实现,还应具备web性能优化以及SEO优化的常识的更多相关文章
- NET Core2基于RabbitMQ对Web前端实现推送功能
NET Core2基于RabbitMQ对Web前端实现推送功能 https://www.cnblogs.com/Andre/p/10012329.html 在我们很多的Web应用中会遇到需要从后端将指 ...
- web前端学习路线(含20个真实web开发项目集合)
目前web前端工程师日均岗位缺口已经超过50000,随着互联网+的深入发展,html5作为前端展示技术,市场人才需求量将呈直线上涨. Web前端工程师的岗位职责是利用HTML.CSS.Java.DOM ...
- ASP.NET Core2基于RabbitMQ对Web前端实现推送功能
在我们很多的Web应用中会遇到需要从后端将指定的数据或消息实时推送到前端,通常的做法是前端写个脚本定时到后端获取,或者借助WebSocket技术实现前后端实时通讯.因定时刷新的方法弊端很多(已不再采用 ...
- [总结]web前端常用JavaScript代码段及知识点集锦
DOM相关 判断浏览器是否支持placeholder属性 function placeholderSupport() { return 'placeholder' in document.create ...
- WEB前端常用JavaScript代码整理
文章目录 html代码用JS动态加载进页面 JS判断用户访问的是PC还是mobile或者微信浏览器 判断浏览器的简单有效方法 点击某个div区域之外,隐藏该div 如何在手机上禁止浏览器的网页滚动 改 ...
- web前端利用HTML代码显示符号
HTML常用符号代码: ´ ´ © © > > µ µ ® ® & & ° ° ¡ ¡ » » ¦ ¦ ÷ ÷ ¿ ¿ ...
- [转载]Web前端开发工程师编程能力飞升之路
[背景] 如果你是刚进入web前端研发领域,想试试这潭水有多深,看这篇文章吧:如果你是做了两三年web产品前端研发,迷茫找不着提高之路,看这篇文章吧:如果你是四五年的前端开发高手,没有难题能难得住你的 ...
- 【转】Web前端研发工程师编程能力飞升之路
分类: Javascript | 出自 海玉的博客 今天看到这篇文章.写的非常有意思.发现自己还有很长的一段路要走. [背景] 如果你是刚进入WEB前端研发领域,想试试这潭水有多深,看这篇文章吧: 如 ...
- Web前端开发十日谈
=========================================================================== 原文章: http://kb.cnblogs.c ...
随机推荐
- Ubuntu下开启Mysql远程访问的方法
首先想说,JetProfiler对分析项目中MySQL问题以及优化,是个非常好的工具.但是看网上文章,中文介绍真的不多.是因为国内现在都不用MySQL了吗? 因为公司JetProfiler是共用的,安 ...
- python生成组织架构图(网络拓扑图、graph.editor拓扑图编辑器)
Graph.Editor是一款基于HTML5技术的拓补图编辑器,采用jquery插件的形式,是Qunee图形组件的扩展项目,旨在提供可供扩展的拓扑图编辑工具, 拓扑图展示.编辑.导出.保存等功能,此外 ...
- threding模块的其他用法
import threading import time def func(n): time.sleep(0.5) n += 1 print(n, threading.current_thread() ...
- elk-准备(一)
一.在搭建elk之前需要做准备工作 1.创建elk用户 groupadd elk -g 1001 useradd elk -m -d /home/elk -s /bin/bash -g 1001 -u ...
- Oracle课程档案,第十天
用户管理 Authentication: 身份验证 AAA:Authentication: 身份验证 Authorization: 权限管理 Audition: 审计 grant:授权 unset:撤 ...
- css学习_div+css布局
1.布局(盒子布局.盒子模型.标准流.脱离文档流) 标准文档流:块级独占一行 ,行内块和行内元素都是和其他共占一行,在盒子中的元素遵循标准流从左到右从上到下排列,超过父元素时会溢出. 一行行看 浮动 ...
- HDU 1241 - Oil Deposits - [BFS]
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1241 题意: 求某块平面上,连通块的数量.一个油田格子若周围八个方向也有一个油田格子,则认为两者相连通 ...
- Codeforces 706C - Hard problem - [DP]
题目链接:https://codeforces.com/problemset/problem/706/C 题意: 给出 $n$ 个字符串,对于第 $i$ 个字符串,你可以选择花费 $c_i$ 来将它整 ...
- transition:all .2s
all属性实际上是所有CSS属性的缩写,表示,所有的CSS属性都怎样怎样.
- windows7,python3使用time.strftime()函数报ValueError: embedded null byte
windows7环境下,执行代码报ValueError: embedded null byte时,在原代码前面加一行代码:locale.setlocale(locale.LC_ALL,'en')即可解 ...