我不是做前端的,所以对于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,相对的定义,百分比代之。
使用相对大小的字体,图片;
还有大量的优化要做,请继续搜索……