优化网站设计(三十二):使favicon.ico文件尽可能小并且可以缓存

news/2024/5/20 14:21:20/文章来源:https://blog.csdn.net/weixin_30790841/article/details/99533230

前言

网站设计的优化是一个很大的话题,有一些通用的原则,也有针对不同开发平台的一些建议。这方面的研究一直没有停止过,我在不同的场合也分享过这样的话题。

作为通用的原则,雅虎的工程师团队曾经给出过35个最佳实践。这个列表请参考 Best Practices for Speeding Up Your Web Site  (http://developer.yahoo.com/performance/rules.html),同时,他们还发布了一个相应的测试工具Yslow http://developer.yahoo.com/yslow/

我强烈推荐所有的网站开发人员都应该学习这些最佳实践,并结合自己的实际项目情况进行应用。 接下来的一段时间,我将结合ASP.NET这个开发平台,针对这些原则,通过一个系列文章的形式,做些讲解和演绎,以帮助大家更好地理解这些原则,并且更好地使用他们。

准备工作

为了跟随我进行后续的学习,你需要准备如下的开发环境和工具

  1. Google Chrome 或者firefox ,并且安装 Yslow 这个扩展组件.请注意,这个组件是雅虎提供的,但目前没有针对IE的版本。
    1. https://chrome.google.com/webstore/detail/yslow/ninejjcohidippngpapiilnmkgllmakh
    2. https://addons.mozilla.org/en-US/firefox/addon/yslow/
    3. 你应该对这些浏览器的开发人员工具有所了解,你可以通过按下F12键调出这个工具。
  2. Visaul Studio 2010 SP1 或更高版本,推荐使用Visual Studio 2012
    1. http://www.microsoft.com/visualstudio/eng/downloads
  3. 你需要对ASP.NET的开发基本流程和核心技术有相当的了解,本系列文章很难对基础知识做普及。

本文要讨论的话题

这一篇我和大家讨论的是第三十二条原则:Make favicon.ico Small and Cacheable (使favicon.ico文件尽可能小并且可以缓存)。

在“优化网站设计(二十二):避免404错误”文中,我提到了favicon.ico文件,但并没有更详细地展开。通常每个网站都应该有这个文件,这个文件主要用来显示在浏览器地址栏中,或者收藏之后的图标. 如下图所示

image

关于这个文件的详细信息,有兴趣的朋友可以参考http://zh.wikipedia.org/zh-cn/Favicon,我整理总结如下:

  1. 每个网站都应该有该文件,浏览器在访问任何页面的时候,总是会尝试去请求这个文件(如果本地没有的话)。
  2. 该文件通常应该命名为favicon.ico ,如果希望使用别的名称或者格式(例如PNG),则需要在页面的头部(Head)中定义引用(下面两句中的第一句是必须的)
  • <link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon">
  • <link rel="icon" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon">
该文件可以直接放在网站根目录,但也可以放在其他的主机,或者你想要的任何位置。如果不在默认的根目录下面,也是需要通过上面所提到的引用方式定义。

 

由于该文件的这些特性,所以我们有三条优化的建议

  1. 使它尽量在1KB左右。想比较其他的格式(PNG,GIF等),该文件默认的格式为ico,这种文件通常较小,强烈建议使用。要创建favicon.ico文件,我推荐大家使用 http://www.favicon.cc/ 提供的在线免费服务.
  2. 使它能够缓存. 由于该文件使用很频繁, 所以缓存显得很重要. 关于这一点,可以参考 优化网站设计(三):对资源添加缓存控制 的详细介绍. 对于这个文件而言,可以设置永不过期(或者过期时间长一些).
  3. 将该文件放在单独的主机中,例如 images.mydomain.com . 这样可以避免在请求该文件时发送cookie. 关于这一点,请参考 优化网站设计(二十四):通过使用不同的主机减少对cookie的使用

我们可以来看一个综合的例子,仍然以博客园为例.

image

  1. 他们采用的是favicon.ico这种文件格式, 目前的体积为:5430字节,相当于5KB左右。这一点是有优化空间的。
  2. 他们为该文件设置了缓存策略:Cache-Control: max-age=2592000 ,这个相当于是30天(近似一个月)。这个文件其实更改的机会很小的,缓存时间应该可以更长。
  3. 他们将该文件放在了static.cnblogs.com ,这样可以避免发送cookie。

转载于:https://www.cnblogs.com/chenxizhang/archive/2013/05/20/3087965.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_795955.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

x教学html,css网站布局实录学习笔记第二部分XHTML与CSS基础

第二章 XHTML与CSS基础2.1 XHTML基础XHTML是网页代码的核心内容&#xff0c;标准XHTML代码如下&#xff1a;复制代码代码如下:ttp://www.w3">http://www.w3 .org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">新建文档对于这…

Jsoup开发网站客户端第二篇,图片轮播,ScrollView兼容ListView

最近一段日子忙的焦头烂额&#xff0c;代码重构&#xff0c;新项目编码&#xff0c;导致jsoup开发网站客户端也没时间继续下去&#xff0c;只能利用晚上时间去研究了。今天实现美食网首页图片轮播效果&#xff0c;网站效果图跟Android客户端实现如图&#xff1a; 从浏览器开发者…

.net网站报错:对象的当前状态使该操作无效

今天在页面上提交数据的时候出现这个异常&#xff1a; 原来是微软对asp.net表单域的默认长度限制为1000&#xff0c;而我要上传的数据已经超过一千条。 问题&#xff1a;现在asp.net request 表单域的默认长度是1000&#xff0c;如果是超过一千 就会出错&#xff0c;或者reques…

如何实现分享网站文章到微信朋友圈时显示指定缩略图或LOGO

当下朋友圈很火&#xff0c;很多企业都将微信朋友圈作为品牌传播的途径&#xff0c;经常会发一些精彩的文章到微信朋友圈供大家自发传播&#xff0c;这样的想法很好&#xff0c;对于优质的内容&#xff0c;网友们也乐于转发与朋友们分享&#xff0c;对品牌宣传与推广确实是有好…

公安网站备案流程

具体的公安网站备案流程如下&#xff1a; 1、注册账号。打开全国公安机关互联网站安全管理服务平台&#xff0c;如果已经有账号可以直接登录&#xff0c;没有的话就点击登录框下方的“没有账号&#xff1f;注册”进行注册&#xff08;需要手机配合&#xff09;。 2、添加开办主…

网站部署发布到互联网等整套流程

阅读对象&#xff1a;不会发布网站到互联网的人&#xff0c;不懂得域名和空间或者不会用的人&#xff0c;一直想装逼让别人看却没能得逞的人 如果你是上面几种人&#xff0c;那么这篇博客绝对适合你&#xff0c;废话少说进入正题。 1.网站发布 参考链接:http://www.cnblogs.com…

更改 Odoo 网站图标

更改 Odoo 网站图标 更改 Odoo 网站图标与更改网页中其它图片的方式不一样&#xff0c;原因是默认情况下&#xff0c;这个图标是从公司资料中的图标复制过来的&#xff0c;而不是从图库中选择的&#xff0c;所以要先把公司图标设置好&#xff0c;再让系统重新复制过来。 之前…

asp.net网站发布到服务器GET的技能

刚刚知道映射网络驱动器的作用&#xff08;虽然才知道&#xff0c;但是我高兴&#xff09; 把服务器上的硬盘或者其他电脑共享给你的盘映射到本地&#xff0c;就和操作本地硬盘一样。 双击计算机-》映射网络驱动器-》上面选择驱动器号 下面文件夹框里-》写上服务器的地址\\....…

网络营销相关缩写名称CPM CPT CPC CPA CPS SEM SEO解析

网络营销相关缩写名称CPM CPT CPC CPA CPS SEM SEO解析 CPM CPT CPC CPA CPS SEM SEO在网络营销中是什么意思&#xff1f;SEO和SEM的区别是&#xff1f; CPM(Cost Per Mille&#xff0c;或者Cost Per Thousand;Cost Per Impressions) 每千人成本。千人成本是一种媒体或媒体排期…

PS设计漂亮网站主页图片的实例教程

制作一个好的网页&#xff0c;需要花费大量的时间&#xff0c;包含的内容也是非常多的&#xff0c;其中有按钮、横幅、图标及其它素材等。制作的时候先规划好大致的框架&#xff0c;然后由上至下慢慢细化各部分的内容&#xff0c;注意好整体搭配。最终效果 一、在我们打开PSD网…

java与seo_seo和java哪个更好

一个seo行业站点&#xff0c;科学的内容制作应该与seo相关&#xff0c;且内容本身是有人搜索的。seo和java哪个更好是有人搜索的语句&#xff0c;且与seo是强相关的&#xff0c;对于seo教程自学网来讲&#xff0c;这样的内容再适合不过了。 任何一门技术&#xff0c;如果精通&a…

为什么网站服务器不存在了,解决无服务器问题:你如何管理那些不存在的东西?...

功能即服务(FaaS)技术&#xff0c;即使在私有云中也经历了大规模应用&#xff0c;并且很容易理解为什么。无服务器的承诺很简单&#xff1a;开发人员和IT团队可以完全不用担心他们的基础架构&#xff0c;系统软件和网络配置。无需负载平衡&#xff0c;调整资源以进行扩展&#…

织梦后台友情链接网站Logo图片路径变成flixnk和后台内容编辑器里行内样式变成stxyle...

后台图片友情链接flink变成fli<x>nk 后台内容编辑器里行内样式变成st<x>yle 解决方法 1、打开 /include/datalistcp.class.php 文件&#xff0c;找到 $replacement substr($ra[$i], 0, 2).<x>.substr($ra[$i], 2); 改成 $replacement substr($ra[$i], 0, 2…

windows服务器怎么建设网站,windows服务器网站数据备份的方法

针对目前服务器情况可适用的网站数据备份类型包括&#xff1a; 服务器IIS备份、web网站数据备份、网站数据库备份。服务器IIS备份&#xff1a;服务器的IIS配置可只用等软件备份&#xff0c;避免了IIS配置出错后&#xff0c;需要恢复的麻烦。web网站数据备份&#xff1a;网站数据…

IIS上的项目网站关闭Http请求中的Trace和OPTIONS

目的&#xff1a;阻止一些注入漏洞。 方法一&#xff1a; 1、打开服务器IIS&#xff0c;在网站节点下选中相应网站&#xff0c;在右侧IIS下双击“请求筛选”&#xff0c;如图&#xff1a; 2、进入如图所示页面&#xff0c;选中tab标签的HTTP谓词&#xff0c;点击右侧“拒绝谓词…

怎样在云服务器上登录网站,怎样在云服务器上登录网站

怎样在云服务器上登录网站 内容精选换一换为弹性云服务器配置的安全组规则未生效。以下排查思路根据原因的出现概率进行排序&#xff0c;建议您从高频率原因往低频率原因排查&#xff0c;从而帮助您快速找到问题的原因。如果解决完某个可能原因仍未解决问题&#xff0c;请继续排…

html动态页面制作_网站开发的三个时代:网页制作、前端开发、后端开发

网站开发共经历了三个时代分别是“网页制作”、“前端开发”、“后端开发”。下边谈一谈这三个时代分别是怎样的&#xff0c;和千锋广州小编一起来看看吧。网页制作网页制作是Web 1.0时代的产物&#xff0c;产生在2005年左右。那个时候的网页主要是静态页面。静态页面就是能使用…

python局域网访问主机网站_用python打造一个基于socket的文件(夹)传输系统

这段时间在学习python&#xff0c;接触到了网络编程中的socket这块&#xff0c;加上自己在用的Linux服务器都是原生支持python的&#xff0c;于是乎有了个做文件传输功能程序的想法。毕竟python语言中&#xff0c;有下载功能的框架一抓一大把&#xff0c;但是主机与主机间快速搭…

php网站开发文本格式设置,html文件是纯文本文件吗

html文件是纯文本文件。HTML文本是由HTML命令组成的描述性文本&#xff0c;是一种静态的网页文件。HTML文件在编辑时只能写入纯文本&#xff0c;无法像“.doc”文档那样直接为文字内容做样式。本教程操作环境&#xff1a;windows7系统、CSS3&&HTML5版、Dell G3电脑。Fi…

浅谈跨网站脚本攻击(XSS)的手段与防范(简析新浪微博XSS攻击事件)

本文主要涉及内容&#xff1a; 什么是XSSXSS攻击手段和目的XSS的防范新浪微博攻击事件什么是XSS 跨网站脚本&#xff08;Cross-sitescripting&#xff0c;通常简称为XSS或跨站脚本或跨站脚本攻击&#xff09;是一种网站应用程序的安全漏洞攻击&#xff0c;是代码注入的一种。它…