点击精灵Logo
您的位置:首页 >seo中级

减少HTTP请求对百度排名有什么影响?

来源:精灵SEO 发布时间:2020-04-28

  减少HTTP请求对百度排名有什么影响?在网站开发过程中,对于页面的加载效率一般都想尽办法求快。那么,怎么让才能更快呢?减少页面请求是一个优化页面加载速度很好的方法。今天来跟大家介绍下如何减少HTTP请求来提高百度排名?

减少HTTP请求对百度排名有什么影响

  一、为何选择将图片转成二进制并生成Base64编码,可以在网页中通过url查看图片的方法减少HTTP请求数?

  为什么我会讲解 “将图片转成二进制并生成Base64编码,可以在网页中通过url查看图片” 这一种方式来减少HTTP请求,进而优化页面呢?这里呢,是涉及到移动端的图标使用。上一篇博文所讲的方法能否使用于手机端的网页呢?

  但是,它会出现一个问题:背景图+css显示图标时,图标本身无法缩放,比如背景图中64px*64px的图标,显示到界面时必须设置icon的大小也是64*64。在PC网页中这通常不会有什么问题,但在移动端设备上就完全行不通。同样是4英寸的手机屏幕,其分辨率有可能是320*400,也可能是640*800,甚至也可能是1920*1080。这样64px*64px的图标在不同的设备上看起来的大小就会差别非常明显。

  幸运的是,手机上的浏览器基本对此做了优化,会把设备模拟成更低的分辨率。比如在1136*640的IPHONE 5中获取$(window).width(),取出来的是320而不是640,这样一个宽度为160px的图片占用的是屏幕宽度的一半,而不是1/4。手机设备这样处理是为了解决兼容性问题。除了网页,包括手机上app的界面,在retina屏幕上和非retina屏幕上的大小是完全一样的,都是因为对分辨率做了处理。

  但是,移动设备这样的处理方式并不能完全解决问题,因为机器的假设性猜测在很多时候是不合适的,尤其是在android设备中。为了更好地控制元素显示的大小,解决的办法就是用pt代替ps,px是对应屏幕的分辨率,而pt是针对人眼睛实际感觉的大小,无论在何种分辨率的设备上,72pt固定是1英寸。

  HTML的img标签元素的src属性不只是可以指定url,也可以指定图片的二进制数据流。然后通过img元素的自动缩放功能,指定img的大小,就可以实现在不同分辨率的设备上显示一致的图标大小。

  二、使用Base64编码减少页面请求数

  当我们的一个页面中要传入很多图片时,特别是一些小图标,十几K、几K,甚至是字节级别大小的小图标,这些小图标都会增加HTTP请求,假如多了,就会给服务器带来很大的压力。比如要下载一些一两K大的小图标,其实请求时带上的额外信息有可能比图标的大小还要大。所以,在请求越多时,在网络传输的数据自然就越多了,传输的数据自然也就变慢了。而这里,我们采用Base64的编码方式将图片直接嵌入到网页中,而不是从外部载入,这样就减少了HTTP请求。当然了,它有一个小缺点,就是使当前页面的大小变大了(对于优化来说,其实这个可以忽略,影响不大)。看一下下图,小图标大小为2.4k,等待响应时间是14ms,而接受数据,也就是下载时间约为0ms;可想而知,在有大量小图标下载的时候,这样的方式去优化能大大提高网站的性能(在jquery mobile和天猫的手机站上面都有用到此技术)。

  三、开发思路

  将小图标放在以icon_开头的文件夹里(以区分不用生成base64的图片的文件夹)—>用程序去遍历文件夹图片 —>将每张图片的base64编码放在一个js对象里—>在HTML页面的img标签里 使用属性 icon-data = ‘图标名(不带后缀)’来显示图片 —> JS文件写一个函数对icon-data属性进行转换,转换成src属性,然后值就通过icon-data的属性值获得图标名,然后进行相应的替换得到相应图标的base64编码 —> 显示图片

  四、代码实现

  isDot())continue;$filename=$file->getFilename();//识别出是否以icon_开头的文件夹,如果是,则对此文件夹的图标进行base64编码处理if($file->isDir()&&0===strncasecmp('icon_',$filename,5)){generateIconMobileCallback("$imgRoot/$filename",ROOT."/js/mobile");}}}functiongenerateIconMobileCallback($iconDir,$styleSaveDir){//保存成js的文件名$saveName=array_pop(explode('/',$iconDir));//JS文件保存路径$styleSavePath=$styleSaveDir.'/'.$saveName.'.js';//将当前目录下的所有文件及MD5组成一个识别字符串$fileMap=array();$iterator=newDirectoryIterator($iconDir);foreach($iteratoras$file){if($file->isDot())continue;$fileName=$file->getFilename();if($file->isDir()){generateIconMobileCallback($iconDir.'/'.$fileName,$styleSaveDir.'/'.$fileName);}else{$fileMap[$fileName]=md5_file($file->getRealPath());}}ksort($fileMap);$fileMapStr=json_encode($fileMap);//确保目录可写ensure_writable_dir($styleSaveDir);//js文件句柄$wirteHandle=fopen($styleSavePath,'w');//当前小图标文件夹的相对路径$iconSaveRelative=substr($iconDir,strlen(ROOT));//写入,初始化保存数据的对象fwrite($wirteHandle,"/** icon in dir: $iconSaveRelative/ */ if(typeof($iconData) == 'undefined') $iconData={};");foreach($fileMapas$fileName=>$md5){//当前图片的绝对路径$fullPathName="$iconDir/$fileName";//取得路径信息$pathInfo=pathinfo($fullPathName);//取得文件名(没有后缀)$fileNameNoExt=$pathInfo['filename'];//取得图片信息$imageSize=getimagesize($fullPathName);//取得文件的后缀switch($imageSize[2]){caseIMAGETYPE_GIF:$imageType='gif';break;caseIMAGETYPE_JPEG:$imageType='jpg';break;caseIMAGETYPE_PNG:$imageType='png';break;default:$imageType='jpg';break;}//取得图片资源$readHandle=fopen($fullPathName,'r');//将图片转成二进制并生成Base64编码$base64=base64_encode(fread($readHandle,filesize($fullPathName)));//关闭资源fclose($readHandle);//将Base64编码写入js文件中fwrite($wirteHandle," $iconData.$fileNameNoExt="data:image/$imageType;base64,$base64";");}//后换个行fwrite($wirteHandle," ");//关闭资源fclose($wirteHandle);//处理成功的图标文件夹给予提示echo'

  '.$iconSaveRelative.' saved

相关文章内容简介

1 如何构思一个用户体验度好的网站

  如何构思一个用户体验度好的网站?网站体验度,是检查一个网站做的好不好的另一个考察点,如何做好一个网站并不是让人知道这样简单,针对如何提升网站用户体验度方面的知识还是比较值得我们深思的,今天就跟随精灵seo小编一起来看看吧!   网站定位很重要   我们都知道,在互联网由于没事地域限制,市场大,如果做的好的话来钱快深受广大群众喜欢。好的站长在发现一个行业比较“赚钱”时,就全部一股脑的投进行。但小编要说的是在进行建设一个网站的前时一定要先考虑你是否了解这个行业,你是否有这个行业的先管资源。在我们精灵seo科技看来如果要想做好这个网站,首先要准备近5千篇同行业高质量的内容,以及一些相关的同行业网站友情链接资源。如果对行业不熟悉你是做不出用户喜欢你的网站,因为你根本就不了解用户喜欢什么,为用户解决问题。所以选择行业很关键。   挖掘客户的需求是关键   想要用户喜欢一个网站的前提是可以为用户解决他们的疑问,让客户找到他们想要的内容。。解决问题也可以说是我们seo核心。有一些seoer单纯 [阅读全文]

2 网站排名一直波动的原因

  网站排名一直波动的原因!网站排名不稳定的因素有很多,许多站长只是针对网站做出了一些修改,但是没有做的全面。这也是导致网站排名一直波动的原因,今天精灵seo小编就来为大家介绍一篇比较详细的攻略,一起来看看吧!   一、优质的外链   为了稳定网站的排名,外链的作用是很大的,优质的外链可以引导蜘蛛来抓取网站,将权重转移到此网站上,提高网站的排名,吸引客户点击。前提是高质量的外链   二、检测死链   定期的查看网站的死链接,若网站存在大量的死链接,搜索引擎蜘蛛索引网站的效果就会受到影响,从而影响搜索引擎对网站的评价,所以建议添加404页面,或者使用301页重定向到新的URL、   三、内容的更新   想要排名保持住,就需要我们的网站保持活跃。我们需要每天更新新的内容和添加相关的新闻文章。同时还要保持网站的新鲜性。其次就是网站的更新频率,让搜索引擎蜘蛛一固定的时间段来抓取内容。   四、搜索引擎动态   在进行搜索引擎优化时,必须注意搜索引擎的算法调整和添加新的规则。根据搜索引擎的算法 [阅读全文]

系统提示

登录密码错误!!!