今天我们想谈谈你的favicon,以及如何让favicon 小巧,可缓存,快速。这绝对是可以被归类为较低优先级的优化之一,但是在Web性能方面,一切都会随着时间的推移而增加。如果你加上20个小的优化,突然间你可以看到减少加载时间的秒数。

什么是Favicon?

favicon或favicon.ico是与您的网站相关联的小图像图标文件。当浏览器访问您的网站时,它会在后台为您的favicon.ico进行静默查找。然后,它会显示在各种位置,例如浏览器中的选项卡以及书签栏。通常,favicon.ico存储在您网站的根目录中。每个网站都应该有一个与之相关的图标。由于浏览器请求此文件,如果不存在,您将看到404错误。由于favicon.ico驻留在服务器的根目录中,因此每次浏览器请求此文件时,都会发送服务器根目录的cookie。使favicon变小并减少服务器根cookie的cookie大小可以提高检索favicon的性能。

如何制作Favicon

第一步

favicon实际上可以是PNG,GIF或ICO文件。但是,ICO文件通常比其他文件使用得更多,因为文件大小较小,并且在所有主流浏览器中都受支持。PNG更常用于IOS,Android和Windows 10设备。今天我们将主要关注为您的网站生成favicon.ico。
您还可以使用真实的favicon生成器等在线工具,您可以在其中上传PNG,JPG或SVG(基于矢量的文件类型),它将为您生成ICO文件。

第2步

接下来,您需要将其上传到您的网站。只需通过FTP将其上传到您网站的根目录,支持favicons的Web浏览器就可以找到它。如果您需要或想要将您的favicon放在不同的目录中,那么您只需将以下内容添加到您网站的部分中,并指向其路径即可。例如,如果您在名为images的文件夹中包含了favicon,则下面的代码段就是如此。

<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" />

优化您的Favicon

通过使其可缓存来优化您的图标可以避免频繁请求它。因此,通过添加过期标头和利用缓存控制来利用浏览器缓存非常重要。另一个建议是从您的CDN加载您的favicon。YSlow还建议尝试将您的favicon保持在1 KB以下。如果有的话,尽量让你尽可能小。

利用浏览器缓存

通过将Apache添加到您的.htaccess文件中,在Apache中添加Expires Headers 。请注意带有image / x-icon的行。

## EXPIRES CACHING ##
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg "access 1 year"
    ExpiresByType image/jpeg "access 1 year"
    ExpiresByType image/gif "access 1 year"
    ExpiresByType image/png "access 1 year"
    ExpiresByType text/css "access 1 month"
    ExpiresByType text/html "access 1 month"
    ExpiresByType application/pdf "access 1 month"
    ExpiresByType text/x-javascript "access 1 month"
    ExpiresByType application/x-shockwave-flash "access 1 month"
    ExpiresByType image/x-icon "access 1 year"
    ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##

通过添加到您的服务器配置,将Expires标头添加到Nginx。请注意,包含ico文件类型。

server {
    listen       80;
    server_name  example.com;

    location / {
        root   /var/www/example;
        index  index.html index.htm;
    }

    location ~*  \.(jpg|jpeg|gif|ico|png)$ {
        expires 365d;
    }

    location ~*  \.(pdf|css|html|js|swf)$ {
        expires 30d;
    }
}
Last modification:August 27th, 2019 at 02:35 pm
如果觉得我的文章对你有用,请随意赞赏