性能优化与运营

前面我们所学习的云服务器、Linux、数据库等几乎是所有编程语言的必学基础,掌握了这些相当于打开了编程的大门。

网站性能与优化

下载安装完Chrome浏览器之后,打开一个网页,鼠标右键可以看到”审查元素”(MacBook 为”检查”),我们就可以打开Chrome的DevTools。

Chrome开发者工具是极为重要的工具,当大家在网页编程中遇到问题时,一定要记得常用Chrome开发者工具查看,使用Chrome开发者工具要成为一种习惯。

使用Chrome浏览器打开你的网站,然后右键打开开发者工具,选择开发者工具的Network便签页,然后再刷新一下你网站的网页,就可以看到网站到底加载了哪些资源,这些资源的加载速度以及加载时间,这样我们就能找到拖慢我们网站速度的一些原因啦。

看看你的网站的首页加载了多少个文件,这些文件的总大小以及总的加载时间是多少。

Device Mode 你可以用来检查网页是否是响应式的,是否兼容其他不同分辨率的手机
Element 标签页 用于查看和编辑当前页面中的 HTML 和 CSS 元素
Network 标签页 用于查看 HTTP 请求的详细信息,如请求头、响应头及返回内容等
Source 标签页 用于查看和调试当前页面所加载的脚本的源文件
TimeLine 标签页 用于查看脚本的执行时间、页面元素渲染时间等信息
Profiles 标签页 用于查看 CPU 执行时间与内存占用等信息
Resource 标签页 用于查看当前页面所请求的资源文件,如 HTML,CSS 样式文件等
Audits 标签页 用于优化前端页面,加速网页加载速度等。
Console 标签页 用于显示脚本中所输出的调试信息,或运行测试脚本等。

网站的SEO优化

所谓SEO优化就是要达到以下几个目的:1.让访问者通过某个关键词使用百度或google等搜索引擎搜索时,你的网站能够排得更前;2.有更多的关键词或链接能够指向你的网站。

Yoast SEO

网站数据统计分析

通过在网站上加入统计代码来了解网站的运营情况,比如每天有多少访问,访问是通过什么渠道进入你的网站,访问者的属性等,在这里以百度统计为例。大家在百度统计的网站上注册一个账号,在百度统计的后台把你的网站添加上去,会得到一段js代码,然后将这段js代码复制粘贴到你的wordpress的模板文件的header.php里面。

确认你网站正在使用的模板

我们可以在wordpress网站后台的外观-主题里查看我们使用的是什么模板,每个模板都会在wordpress目录结构的wp-content/themes下有对应的文件夹。比如我们选择的是Kratos模板,那么我们要想修改网站的内容就要找到wp-content/themes/Kratos。

在header.php添加百度统计代码

在FTP工具里找到wp-content/themes/Kratos目录下的header.php,鼠标右键然后选择查看/编辑,在header.php找到:

在</head>的前面添加你复制的代码,然后保存,在FTP工具里确认上传到服务器即可。

本节任务

  1. 粗略了解如何查看网站加载的速度;
  2. 给网站添加SEO插件;
  3. 给网站添加百度统计代码;