在很多企業(yè)網(wǎng)站開發(fā)項目中，有一部分是該公司已經(jīng)有了項目，但由于原網(wǎng)站因為種種原因無法滿足現(xiàn)有業(yè)務(wù)需要而需要改造或重做。最近有一個類似的項目，考慮到很多項目具有部分共性，我們后續(xù)會公開部分我們提供的項目方案中的適宜公開的內(nèi)容供大家參考。

本次公開的內(nèi)容為某知名電商公司現(xiàn)有官網(wǎng)重要問題分析及改造方案，也就是針對這些問題提供我們的解決方案。該部分內(nèi)容如下（節(jié)選）：

由于貴公司已經(jīng)存在官網(wǎng)，只是由于已有官網(wǎng)存在多個方面的不足之處才需要重新設(shè)計開發(fā)一個新的官網(wǎng)；因此，幾項重要的方案，我們將針對目前官網(wǎng)存在的問題提出我們的解決方案（對一下內(nèi)容有疑問的辛苦與我們溝通，傾聽我們的講解）。

以下列出的內(nèi)容，僅僅是一些比較典型的問題以及對應(yīng)的解決方案，實際項目中還會有更多細(xì)節(jié)需要注意，但只是很多東西已經(jīng)成為我們一種比較好的習(xí)慣。

①、靜態(tài)單頁，維護內(nèi)容困難。

現(xiàn)狀：目前的網(wǎng)站是一個靜態(tài)的單頁面，維護修改任何內(nèi)容必須通過了解開發(fā)的人員介入去完成，而且只有一個頁面，無法展示詳盡的內(nèi)容。

解決方案：我們將提供一個易用的管理后臺，實現(xiàn)只要會用電腦、會上網(wǎng)的人就能完成網(wǎng)站內(nèi)容的日常維護及更新。會把需要日常頻繁更新的內(nèi)容全部由后臺管理完成，包括但不限于新聞、關(guān)于、業(yè)務(wù)、招聘、聯(lián)系方式等。

②、打開速度過慢，有損品牌形象流失來之不易的流量。

現(xiàn)狀：使用長沙電信200MB光纖網(wǎng)絡(luò)訪問首頁首次加載需要大概24秒；雖然本項目主要目的是用于展示，但這樣的體驗會影響用戶對品牌的印象。而如果是用于推廣，這將浪費大量的精準(zhǔn)流量；而且對于網(wǎng)站自然SEO積累帶來負(fù)面影響。主要原因包括：

a、使用阿里云香港服務(wù)器，造成高延遲；

b、所有圖片、css、js等靜態(tài)資源完全放在一臺帶寬并不高的服務(wù)器上；

c、所有圖片均是顯示原圖，而沒有進行合理的縮略處理（如公司風(fēng)采部分的圖片本來只有400px以內(nèi)的縮略即可，但都是顯示大小幾百KB的原圖）。

d、大量冗余代碼和資源造成網(wǎng)頁體積加大。

首頁首次打開需要24s

解決方案：將通過多個方面的措施實現(xiàn)網(wǎng)頁首開時間在500ms-2s之間（不同客戶端環(huán)境以及個別大量大體積圖片頁面可能有所偏差）。具體措施有：

a、使用阿里云或者其他云廠商的國內(nèi)BGP骨干網(wǎng)絡(luò)服務(wù)器，保障全國各地用戶順暢訪問；

b、采用靜態(tài)分離解決方案，使得網(wǎng)站絕大部分css、js、圖片等靜態(tài)資源分布式部署到云服務(wù)上，與網(wǎng)站web服務(wù)分離，實現(xiàn)理論上沒有帶寬峰值瓶頸，無論是1個用戶還是10個用戶訪問帶寬峰值不影響。

c、所有圖片在不影響清晰度前提下，盡可能減小減小圖片體積。

d、僅使用必要的代碼，極大程度上減少代碼冗余，同時杜絕無關(guān)資源加載。

③、代碼過于冗余，并加載大量非必要資源。

現(xiàn)狀：由于目前網(wǎng)站使用的是響應(yīng)式布局，在代碼上有容易不可避免，但是這里的冗余并不是響應(yīng)式造成的，而是可能制作者也不知道那些庫到底是干嘛的，所以全部一股腦加了進來。比如就為了兩個向左向右的箭頭icon卻加載了整個FontAwesome字體圖標(biāo)庫；更為嚴(yán)重的是，頁面中包含了這個頁面可能原始制作方某網(wǎng)絡(luò)公司頁面的原始資源，只是通過css的display:none屬性值隱藏了，但在頁面中依然被加載進來。

超過大半的資源是非必須的，多余的！

解決方案：a、結(jié)合實際，為PC和移動端編寫?yīng)毩⒌膬蓚€前端（數(shù)據(jù)來自同一個管理后臺），極大減少冗余；b、杜絕加載無關(guān)的資源內(nèi)容，引入項目需要的資源；c、由于頁面都由我們團隊重新開發(fā)，隱藏不存在會有其他公司信息的致命錯誤。

④、存在嚴(yán)重的知識產(chǎn)權(quán)風(fēng)險。

現(xiàn)狀：從上一點可以看得出，目前這個網(wǎng)站是隨便另保存某公司一個頁面，然后只是把最直觀的部分信息改成xx電商相關(guān)的；這種行為本身就會出現(xiàn)很大的知識產(chǎn)權(quán)風(fēng)險問題。由此產(chǎn)生的問題包括：c、頁面上的內(nèi)容圖片大量來路不明；b、圖片上的字體包含需要購買才可以商用的字體；c、由于代碼本身來歷不明，就算代碼侵權(quán)追究在司法實踐中不是那么容易，但css引用的字體文件被追究確是一告一個準(zhǔn)。再者，出現(xiàn)多種這樣的問題、特別是有第三方公司圖片、文案等信息，就算對方不追究，如果用戶發(fā)現(xiàn)將極大損害品牌形象。

解決方案：網(wǎng)站前端均有我們團隊重新編碼，有必要引用一些類庫時僅引用MIT等協(xié)議可以商用的部分。如果需要，可以在圖片、文案等內(nèi)容上給出相關(guān)專業(yè)建議，盡可能避免知識產(chǎn)權(quán)風(fēng)險。

⑤、SEO表現(xiàn)差。

現(xiàn)狀：由于以上列出的種種原因，加上目前這個網(wǎng)站本身就壓根沒考慮SEO等問題，所以這方面表現(xiàn)自然就差。當(dāng)然對于貴公司而言SEO這點流量不值得一提，但是有總比沒有好；更重要的是，如果這方面表現(xiàn)更好相信用戶對該品牌印象會更好。舉個例子：現(xiàn)在搜索xx電商相關(guān)會出現(xiàn)一些咋一看是負(fù)面的內(nèi)容，比如啟信寶有一條這樣結(jié)果“湖南xx電商xxxx有限公司-法律訴訟-判決文書-失信被執(zhí)行人-啟信寶”，雖然貴公司沒有相關(guān)失信記錄僅僅有一條跟員工勞動糾紛問題，然而這樣的信息可能被人誤解；而如果有更多的結(jié)果是自己可控的，這種可能被誤解的信息自然就更少展示給用戶。

解決方案：我們將從如下幾個方面從設(shè)計開發(fā)角度更好的幫助網(wǎng)站的整體SEO表現(xiàn)，當(dāng)然最終起決定作用的還是未來該網(wǎng)站的內(nèi)容的數(shù)量和質(zhì)量。主要措施包含：

a、減小網(wǎng)頁體積；

b、規(guī)范代碼編寫；

c、靜態(tài)資源與web服務(wù)分離；

d、所有主要頁面可以靈活自定義頁面的標(biāo)題、關(guān)鍵詞、摘要（TDK）；

e、主動推送新生成內(nèi)容給百度；

f、XML格式網(wǎng)站地圖；

g、如果需要，可以為對接人提供基礎(chǔ)SEO指導(dǎo)。

⑥、細(xì)節(jié)問題。

現(xiàn)狀：由于之前網(wǎng)站據(jù)了解為業(yè)余人員制作，所以除了以上問題外，自然存在一些細(xì)節(jié)問題。比如根據(jù)項目經(jīng)驗：在PC端圖片的實際視覺尺寸必須與css尺寸一致才最佳，比如一個100px的圖片，css寫尺寸99px或者101px都會嚴(yán)重印象。

這張圖片是首頁第二屏右邊的一張圖片，在視覺感受上畢竟模糊，實際上這張圖的原圖是非常清晰的，但視覺效果依然狠模糊。又如，在手機上，如果視覺區(qū)域100px，則實際圖片大小應(yīng)大于200-300px才可以有較好的視覺效果（跟屏幕物理比有關(guān)，所以視覺大小360的屏幕截圖打開有1080大?。?。

解決方案：在細(xì)節(jié)處理上我們有比較豐富的項目經(jīng)驗，在項目過程中，我作為項目經(jīng)理，會嚴(yán)格協(xié)調(diào)前端、UI、后端把控應(yīng)該把控的一些細(xì)節(jié)。另外，可以為對接人提供關(guān)于內(nèi)容創(chuàng)作過程中圖片導(dǎo)出等日常問題的專業(yè)建議。

以上內(nèi)容未經(jīng)微構(gòu)網(wǎng)絡(luò)書面許可不得轉(zhuǎn)載，侵權(quán)必究！