专栏首页吉吉在这里来再对你的网站做一些优化吧

来再对你的网站做一些优化吧

我不是做前端的,所以对于Web设计和优化我只是通过搜索学习一点点,根据一些经验片面的记录一下我自己网站的一些优化工作,这里也分享一下。鄙视一下那些用脚趾头写代码的XX公司网页,永远使用IE6+XP老古董的古董… 我的网站使用了Wordpress+terrifico主题,之所以选用这款主题,是因为他使用了自适应的设计方式..其实不全是,需要修改一定的代码.下面将我做的工作大体描述一下,主要包括.htaccess文件优化方面,自适应网页方面。

通过Google的网页分析工具pagespeed insights,发现一些我的wordpress 网站问题: 1.图片等文件没有设置过期时间; 2.部分图片没有使用进一步的压缩; 3.首页一些非必须的css加载(移动版+PC版,进行自适应网页设计)

开工,处理! 首先,通过.htaccess设置图片的过期时间,利用浏览器缓存,节约了网站加载耗时。

......
ExpiresActive On
# RSS feed
ExpiresByType application/rss+xml "access plus 1 hour"
# Favicon (cannot be renamed)
ExpiresByType image/x-icon "access plus 1 week"
# Media: images, video, audio
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"

接下来,压缩图片吧,使用Wordpress的插件 Bulk WP Smush.it,安装后启用可以自动压缩图片。却为一款优化图片的利器。 还有,该有自适应网页设计方式,更改原有的使用插件加载移动网页的方式,之前选用了WPtouch pro插件,这款插件确实在移动设备上表现不错,可在性能上只能做出取舍了,选用自适应网页设计。

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">

这是少不了的第一步; 其次不要使用绝对的宽度,在布局上使用float,相对的定义,百分比代之。 使用相对大小的字体,图片; 还有大量的优化要做,请继续搜索……

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Bugzilla和Mantis安装部署

    Bugzilla 部署步骤有的小麻烦,但Mantis部署很简单,下载包,数据库设置按部就班就可以了。

    gigiwangs
  • 微软远程桌面[Remote Desktop Client]连接问题解决..

    最近工作电脑升级了Windows 1o,免费帮微软测试.. 但是发现远程桌面无法连接这台电脑了.. 通常我把工作的PC作为服务器,使用Mac 的RDC连接w...

    gigiwangs
  • 小米路由3(G)刷入X-WRT访问互联网

    越来越多的智能路由器都是基于OpenWRT定制系统,理论上都可以通过刷机方式刷入OpenWRT或者

    gigiwangs
  • 2017等保大会上,看关键信息安全基础设施安全防护的创新与实践

    9月22日,第六届全国信息安全等级保护技术大会在南京顺利召开。本次大会由公安部网络安全保卫局、中央网信办网络安全协调局、工信部网络安全管理局、国家密码管理局、...

    安恒信息
  • Android手机 全面屏(18:9屏幕)适配指南

    从小米MIX 1发布以来,越来越多所谓“全面屏”手机发布,如三星S8,小米MIX2,VIVO X20,Google Pixel2等等...2017年下半年开始,...

    用户2802329
  • 一个emoji引发的思考

    之前在做一个留言功能时,发现在其中一台安卓5.0的手机上,输入emoji糊掉了,成了如下这样的情况 

    grain先森
  • tesseract-ocr识别英文和中文图片文字以及扫描图片实例讲解

    本文参考http://blog.sina.com.cn/s/blog_4aa166780101cji7.html实现,在这里感谢该文章的作者。 OCR(Opti...

    朱晓霞
  • tesseract-ocr识别英文和中文图片文字以及扫描图片实例讲解

    朱晓霞
  • 在linux服务器上部署自己的个人网站

    然后查看 /etc/yum.repos.d/ 目录下是否出现 mysql-community.repo

    宸寰客
  • 全球隐私及数据保护法律政策动态报告(中)

    全球隐私及数据保护法律政策动态报告(下) 腾讯互联网法律研究中心  2014年第3季度 三、美国 (一)移动应用成为数据隐私治理重点 鉴于...

    腾讯研究院

扫码关注云+社区

领取腾讯云代金券