木槿巴巴

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

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

Exit mobile version