網(wǎng)站的速度是一個(gè)關(guān)于創(chuàng)建Web內(nèi)容和Web應(yīng)用程序的最重要的東西。
事實(shí)上，它已經(jīng)注意到各種谷歌分析師認(rèn)為人們不經(jīng)常坐在視頻的前30秒，那么前15，所以這將是你得到你的網(wǎng)站加載可以使人們能夠作出判斷并同意使用它或不快速的內(nèi)容。
這可能是人們判斷網(wǎng)站快一點(diǎn)膚淺，但這是通常的情況下，我們不應(yīng)想當(dāng)然。
優(yōu)化你的網(wǎng)站應(yīng)該是優(yōu)先考慮的事情，通常使用WordPress和其他引擎有很好的插件，幫助時(shí)。我會(huì)認(rèn)為，雖然，你可能不會(huì)使用WordPress的，因?yàn)橛泻芏嗖欢?，我?huì)給你一些最好的方法來(lái)優(yōu)化任何網(wǎng)站無(wú)論在其主辦的。 
圖像

圖像優(yōu)化可以是一個(gè)艱難的話(huà)題，但是，其實(shí)有很多方面可以選擇。有文件格式，圖像優(yōu)化工具和代碼、CSS最佳實(shí)踐來(lái)確保你的儲(chǔ)蓄和以最好的方式的圖像。
我想舉一個(gè)例子來(lái)解釋為什么這是重要的，所以就拿最近的一個(gè)例子。它最近已成為明顯的各種iOS開(kāi)發(fā)者和應(yīng)用程序開(kāi)發(fā)者，應(yīng)用程序使用的視網(wǎng)膜圖像以準(zhǔn)備好的人的電話(huà)2–4倍的空間比以前的版本，它是造成人們的手機(jī)簡(jiǎn)單地用完了空間，從簡(jiǎn)單的應(yīng)用程序下載。
這不是為我們的Web開(kāi)發(fā)人員和設(shè)計(jì)人員有關(guān)，但它會(huì)讓你知道重要的是妥善處理你的圖像在任何平臺(tái)。以下是一些我認(rèn)為是最重要的話(huà)題，記得當(dāng)圖像的網(wǎng)頁(yè)優(yōu)化。
圖像格式

圖像的格式是一個(gè)熱門(mén)的話(huà)題，它似乎是因?yàn)榇蠹叶颊J(rèn)為一個(gè)不同的格式將增加的速度，但有一個(gè)相當(dāng)普遍的思想在這所學(xué)校，我們可以利用這個(gè)阿德的事實(shí)上的標(biāo)準(zhǔn)。JPEG的照片，GIF是低的彩色圖像/平板彩色圖像，和PNG的一切。大多數(shù)的網(wǎng)站設(shè)計(jì)者和開(kāi)發(fā)者，我知道喜歡使用PNG的只是一切，除非他們有一個(gè)按鈕，也許有一個(gè)或兩個(gè)顏色，由此他們發(fā)現(xiàn)GIF的偉大的工作。
現(xiàn)在，你當(dāng)然可以玩那些規(guī)格，但永遠(yuǎn)記住，這些是什么會(huì)拯救更小、更輕、更大和更重的標(biāo)準(zhǔn)。如果你在做一個(gè)攝影網(wǎng)站，雖然，它將加載很慢無(wú)論相比其他網(wǎng)站，嘗試一些這些未來(lái)的方法來(lái)提高圖像的整體優(yōu)化。
圖像編碼
最糟糕的事情我們可以做服務(wù)器時(shí)加載圖片是讓代碼大小為我們做。嗯，可以說(shuō)任何關(guān)于“讓代碼做為我們的____。俗話(huà)說(shuō)，“如果你能做到這一點(diǎn)，那么做”，這是一個(gè)非常好的人。使用像寬度= '50px高度= '30px”真的可以把服務(wù)器的負(fù)載時(shí)間就圖像而言，因?yàn)榉?wù)器解析頁(yè)面，有一個(gè)已經(jīng)完成–一個(gè)本來(lái)可以完成任務(wù)看到造物主。所以你一定要去做，你的所有圖片。
圖像優(yōu)化工具
工具總是有幫助的。嗯，大部分的時(shí)間。有時(shí)他們是負(fù)擔(dān)和分心，但在這種情況下，他們似乎常常是很有用的。如果你能找到一個(gè)很好的圖像優(yōu)化工具，首先在評(píng)論環(huán)節(jié)，因?yàn)槲覀兌荚趯ふ?，但我最喜歡的是以下幾。我的愛(ài)imageoptim對(duì)于Mac和防暴對(duì)于Windows。這兩個(gè)工具是非常不同的，但執(zhí)行類(lèi)似的任務(wù)。
你可以把圖像并將破譯的途徑和方法進(jìn)行了優(yōu)化，這樣做，然后吐出來(lái)的最終結(jié)果的同時(shí)節(jié)省你派他們的格式。他們真的很不錯(cuò)，有噸有。事實(shí)上，有一堆，將分析圖像的位圖格式，告訴你什么是最好的。你可以很容易地看出這是一些在網(wǎng)頁(yè)設(shè)計(jì)工具斗以外的其他文本編輯器和設(shè)計(jì)程序的最有用的東西，這是理所當(dāng)然的。
基于服務(wù)器的優(yōu)化圖像
我不是一個(gè)專(zhuān)家談到設(shè)立服務(wù)器，但我肯定會(huì)對(duì)小規(guī)模足夠的背景給這種建議。沒(méi)有大量的圖像加載本地存儲(chǔ)。就是說(shuō)，不要把一個(gè)數(shù)據(jù)庫(kù)中的圖像存儲(chǔ)在你的服務(wù)器上，你為其他網(wǎng)站的文件。采取的技術(shù)如Amazon S3或Flickr服務(wù)器記錄，并使用這些服務(wù)您的文件。
我最近實(shí)施的亞馬遜S3存儲(chǔ)桶到服務(wù)器我們的文件，它實(shí)際上是相當(dāng)容易的，隨便試試。這是一個(gè)很好的方法。主要的原因是，你不想要一個(gè)數(shù)據(jù)庫(kù)的瓶頸在一個(gè)實(shí)例，你服務(wù)的多種載荷發(fā)生，因?yàn)樗梢允且粋€(gè)診斷的噩夢(mèng)。單獨(dú)的文件存儲(chǔ)在不同的服務(wù)器上是好的做法（如果在大負(fù)荷）除非它只是一個(gè)簡(jiǎn)單的通用字符串存儲(chǔ)數(shù)據(jù)庫(kù)或類(lèi)似的東西。
 
CSS和JavaScript的優(yōu)化

CSS和JavaScript語(yǔ)言真的很重要，當(dāng)談到網(wǎng)頁(yè)設(shè)計(jì)，特別是當(dāng)它來(lái)創(chuàng)建動(dòng)態(tài)內(nèi)容。我認(rèn)為人們往往忘記了，他們可以?xún)?yōu)化他們的動(dòng)態(tài)內(nèi)容，他們忘了，他們可以?xún)?yōu)化自己的JavaScript和CSS。這些真的不是最重要的事情的小網(wǎng)站，但更大的網(wǎng)站，這是非常重要的-特別是當(dāng)它涉及到網(wǎng)站，依靠很多設(shè)計(jì)。讓我們通過(guò)一些“CSS和JavaScript的規(guī)則”，很規(guī)范，說(shuō)到創(chuàng)建Web應(yīng)用程序。
CSS和JavaScript的第一法則
如果你可以在CSS做的，然后去做
我們經(jīng)常忘記我們?cè)谖覀兠媲坝畜@人的工具，我說(shuō)CSS分類(lèi)作為一個(gè)最驚人的網(wǎng)頁(yè)設(shè)計(jì)師。我也說(shuō)，設(shè)計(jì)師們跳得太快的性質(zhì)為PS圖象處理軟件（但這是他們的工作，所以誰(shuí)能責(zé)怪他們）。你記住，當(dāng)你設(shè)計(jì)你的東西在你的瀏覽器，可以快速原型：CSS3。利用它！有一個(gè)地方做快速原型，真的很有幫助，它會(huì)引領(lǐng)你去做的事情在后來(lái)拼裝HTML。而不是“ ”我相信你可以找到一個(gè)辦法在CSS中添加空間，這樣做！
CSS和JavaScript二規(guī)則
縮小，縮小，縮?。?br />代碼縮小或許是一個(gè)你可以加快你的網(wǎng)站的最好和最容易的事情。記住，我們說(shuō)的是毫秒，但它仍然有一個(gè)看不到效果，特別是如果你使用像jQuery庫(kù)。記住，如果你添加的JavaScript和CSS插件，您可以選擇下載的縮小版（不需要編輯），這樣做。我最喜歡的一些工具來(lái)做這個(gè)，碼壓縮為Mac，縮小對(duì)于Windows，和jscompress/csscompressor對(duì)于那些想通過(guò)一些瀏覽器的跨平臺(tái)解決方案?？鞓?lè)的削減！
CSS和JavaScript第三規(guī)則
線是不
它是利用在線CSS或JavaScript不好的做法，但是，特別是當(dāng)它涉及到CSS。究其原因，不僅是由于歷史遺留問(wèn)題，還因?yàn)槿绻覀儼袰SS在HTML代碼（尤其是在線）它會(huì)讀，如：HTML / CSS / HTML / CSS / HTML / CSS / HTML / CSS而不只是一個(gè)簡(jiǎn)單的HTML CSS = >。你可以看出，這是非常糟糕的服務(wù)器的加載時(shí)間，并且會(huì)導(dǎo)致大多數(shù)Web應(yīng)用程序不應(yīng)該有一個(gè)設(shè)計(jì)師拒絕使用它在一個(gè)單獨(dú)的文件。這當(dāng)然不會(huì)使你的網(wǎng)站崩潰，但會(huì)引起另一個(gè)員工去通過(guò)提取它-它是重要的。所以要記住誰(shuí)是提取它，不是那種讓別人提。
CSS和JavaScript第四規(guī)則
向下移動(dòng)它

如果你要把你的JavaScript在網(wǎng)頁(yè)中的HTML本身，并沒(méi)有辦法在它的周?chē)?，然后把它?strong>在下面的HTML文檔。這有助于加快網(wǎng)站的加載時(shí)間，因?yàn)槲覀兛梢詧?zhí)行所有這些功能和其他JavaScript網(wǎng)頁(yè)本身加載了糖果后。另一件事是，這降低了擠壓整個(gè)網(wǎng)站性能的可能性，因?yàn)楫?dāng)有一個(gè)錯(cuò)誤的JavaScript，它的視線往往會(huì)吃的記憶像沒(méi)有明天。所以這是很好的做法，確保您的網(wǎng)站沒(méi)有這樣做，并警告未來(lái)的事件，它可能沒(méi)有我們想要的人訪問(wèn)我們的網(wǎng)站，然后他們的瀏覽器崩潰。
CSS和JavaScript第五規(guī)則
DOM的優(yōu)化
如果你能減少DOM。舉例來(lái)說(shuō)，一個(gè)例子，你使用很多jQuery指各種DOM元素或讀取所有的DOM來(lái)找到一些可以減緩你的網(wǎng)站很失望。有一點(diǎn)說(shuō)我總是喜歡和適合這里，如果你正在做的事情，因?yàn)檫@是唯一的方法，你知道，那有可能是更好的方法。”你也可以說(shuō)，”如果你正在做的事情，因?yàn)檫@是唯一的方法，你知道，那你就錯(cuò)了，“但這版本是有點(diǎn)苛刻。
研究發(fā)現(xiàn)，與那些事情在這樣的情況下。如果你是在HTML div的工作僅僅是因?yàn)槟阈枰稽c(diǎn)東西，這是唯一的方法，你知道如何去做，那么它可能不是最好的方式?，F(xiàn)在，我當(dāng)然明白，使用div標(biāo)簽是因?yàn)槟阈枰麄優(yōu)槟愕腃SS是完全可以理解的，但也許你可以刪除一些，找到一個(gè)更廣泛的處理問(wèn)題的方式，風(fēng)格。
我最近做了這樣的我自己，因?yàn)槲覍⑼ㄟ^(guò)對(duì)Rails項(xiàng)目紅寶石目前。本周早些時(shí)候，我大約5個(gè)div的嵌套在彼此在萬(wàn)物HAML，只是做我想要的東西（在這種情況下的東西，里面一盒一盒）。我只是看著它，知道這是廢話(huà)，但不知道一個(gè)更好的方式去做，所以我放棄了這一切重新做。重新做了更難，但它強(qiáng)迫我學(xué)習(xí)一種新的方式來(lái)處理問(wèn)題。最后我從中學(xué)到了很多東西，我會(huì)推薦方案在未來(lái)的人。去吧，抓住這些知識(shí)掘金吧！他們肯定是低懸的果實(shí)。
 
一般的優(yōu)化
這些更廣闊的話(huà)題，真的不適合在任何地方，但我還是覺(jué)得值得關(guān)注。事實(shí)上，有些可能是你可以加快Web應(yīng)用程序或網(wǎng)站中最重要的東西。
斜線的鏈接
這是非常重要的。當(dāng)用戶(hù)打開(kāi)一個(gè)鏈接沒(méi)有盡頭一斜線從網(wǎng)站服務(wù)器上有什么樣的文件或網(wǎng)頁(yè)，地址是。服務(wù)器將包括削減，但如果你把它自己就減少加載時(shí)間毫秒。這些時(shí)間都加起來(lái)，我保證。我經(jīng)常發(fā)現(xiàn)設(shè)計(jì)師特別是誰(shuí)不想認(rèn)為他們未優(yōu)化的代碼將不負(fù)擔(dān)任何東西，但它到底。如果你把宿舍10年你一定會(huì)有很多錢(qián)，和相同的概念適用于這里只是一個(gè)更小或更大的規(guī)模取決于你的網(wǎng)站的流量。
圖標(biāo)
瀏覽器總是做拉一個(gè)favicon.ico文件基層你的服務(wù)器上，所以你不妨去把它。即使是暫時(shí)的，有總是好的。如果你不這樣做，瀏覽器本身會(huì)給一個(gè)內(nèi)部404”，只是緩存，404在瀏覽器的favicon.ico的部分，我們都知道減少404的加速加載時(shí)間。
減少大小
這可能并不適用于所有人，但如果你是開(kāi)發(fā)Web應(yīng)用程序并減少cookie的大小是很重要的。例如，在我所熟悉的Ruby on Rails應(yīng)用程序可以使用cookie（或其他方法）從會(huì)話(huà)認(rèn)證通常人們會(huì)喜歡使用其他的方法，因?yàn)樗麄兛梢耘c他們的用戶(hù)負(fù)載次數(shù)的減少。
現(xiàn)在，一個(gè)cookie并不意味著它是緩存的東西在您的計(jì)算機(jī)上，你可能認(rèn)為這會(huì)增加加載時(shí)間，但通常都是為他們好是認(rèn)證用戶(hù)會(huì)話(huà)或跟蹤你的網(wǎng)站（如谷歌和臉譜網(wǎng)被指控）。如果你有餅干，不過(guò)，你要確保你使用的規(guī)模低，他們與你的判斷力。如果你有設(shè)置到期時(shí)間短，減少加載時(shí)間。
高速緩存

這是一個(gè)巨大的話(huà)題，一個(gè)我不是專(zhuān)家。緩存雖然是一個(gè)非常簡(jiǎn)單的概念。它是存儲(chǔ)文件（通常是HTML / CSS代碼）從你的網(wǎng)站經(jīng)常訪問(wèn)你的計(jì)算機(jī)，你不需要加載你的每一次訪問(wèn)。
這真是一個(gè)非常有用的技術(shù)之一，許多Web應(yīng)用程序開(kāi)始使用作為過(guò)去幾年。已經(jīng)有一些緩存和最值得注意的是數(shù)據(jù)庫(kù)的解決方案memcached。這是存儲(chǔ)復(fù)制數(shù)據(jù)庫(kù)文件到您的瀏覽器為您使用的是Web應(yīng)用程序。所以，例如，如果你有各種型材你經(jīng)常訪問(wèn)它可以?xún)?chǔ)存的資料圖片到您的計(jì)算機(jī)，和美麗的memcached是在下一個(gè)階段。在你的代碼，你可以調(diào)用（在你從DB拉）從memcached服務(wù)器，看看你能不能把緩存版本的文件（S）。如果沒(méi)有它，當(dāng)然，從數(shù)據(jù)庫(kù)中取出的文件，如果它不在緩存已經(jīng)將它添加到下一時(shí)間節(jié)省時(shí)間。這是一個(gè)大型的緩存一個(gè)美麗的例子，它幫助噸，公司加快服務(wù)器和數(shù)據(jù)庫(kù)在過(guò)去的2年噸。
這將只是概括。那些不是所有加快你的網(wǎng)站的方式，當(dāng)然，但它應(yīng)該開(kāi)始峰你的好奇心，讓你看起來(lái)所有偉大的事情

牧羊人設(shè)計(jì)文章推薦：

2016年電子商務(wù)網(wǎng)站設(shè)計(jì)趨勢(shì)的終極指南
快速建設(shè)網(wǎng)站的指南