每個網站的設計者都希望自己所設計的網頁能讓瀏覽者一見傾心, 為實現這一目標, 在進行網頁設計時設計者常有追求盡善盡美的傾向。因此將網頁設計得異常複雜, 並使用大量的圖片和動畫, 以期對瀏覽者產生感染力。這雖然無可非議, 但 Elementor 網站設計的最終目的不是孤芳自賞, 而是以滿足瀏覽者訪問需求為最終目的。對瀏覽者而言, 他們希望網站提供精美內容的同時, 首先必須保證一定的訪問速度, 否則即使網站內容精彩絕倫, 但卻千呼萬喚始出來, 同樣會使瀏覽者因無法忍受漫長的等待而棄之。
就目前國內網路現狀來看, 網路頻寬仍是瓶頸, 擁塞現象非常嚴重。低頻寬依然是 Elementor 網站設計時必須正視的現實 (除非您所設計的網站只在單位內部的區域網中使用), 因此如何使自己的網站適應低頻寬網路環境成為不少 Elementor 網站設計者面臨的主要挑戰。從技術角度而言, 若想使自己的網站在低頻寬環境下同樣有出色的表現, 無外乎是在不影響網站功能的前提下, 儘量減少頻寬消耗因素, 讓瀏覽者能夠得到較為理想的訪問速度。
1. 減小圖片尺寸
圖片可能是扼殺您的網頁的兇手! 精美的圖片有時自然可以成為 Elementor 網站設計的畫龍點睛之筆, 但更多時候卻耗蝕了瀏覽者有限的頻寬。一幅圖片所佔用的空間通常需要成千上萬位元組, 您在製作網頁時可能感覺不到什麼, 但是對於瀏覽者來說就顯得太大了。您到網上看看就會發現, 大塊的等待時間是由圖片下載造成的。網頁的瀏覽者往往是沒有耐心等待的, 您的圖片再精美, 但如果對於網路速度來說過於龐大, 則大多數瀏覽者在沒有看到您的圖片時就已經轉向別處。因此在非必要的情況下, 儘量減少圖片的使用是提高網站訪問速度的要訣之一。
如果必須使用圖片, 則應設法將圖片的尺寸減到最小。圖片尺寸除了受畫面大小的影響外, 色彩數的多少也是關鍵因素, 因而減少圖片中的色彩數也可以得到較為顯著的瘦身效果。在不影響 Elementor 網站設計初衷的前提下, 將圖片色彩從真彩調整為 256 色或 16 色就可以讓多數體態臃腫的圖片苗條不少, 而這種色彩調整一般透過常用的圖片編輯軟體就可以輕鬆搞定。
另外, 在圖片使用較多的情況下, 將圖片分割成小塊, 然後再進行組合也不失為一種行之有效的瘦身途徑。您可以將網頁上的圖片一幅幅進行比較, 找出相同的部分, 將其分割出來, 這樣瀏覽者在訪問您的網頁時, 相同部分的圖片只要下載一次即可了, 如果使用巧妙, 可以大大節省下載時間。
2. 儘量不用圖片來代替文字
現在, 有很多網頁製作者喜歡用圖片來代替文字, 這樣雖然可以美化網頁的版面, 但卻帶來網路頻寬資源的耗蝕。因此, 能使用文字的地方儘量不用圖片, 這幾乎成了設計網頁的基本準則。
對於那些需要強調的內容, 或需要營造某種特殊的視覺效果以引起瀏嵬者的興趣時, 可以透過特殊字摹等顯示技術加以實現。這一技術的缺點是在不同型別的瀏覽器中的效果可能會有所不同, 設計時需要進行相關的測試, 但它卻是加快網站訪問速度行之有效的途徑。
3. 少用動畫
動畫是加強網頁視覺效果和吸引注意力的有效手段。活潑有趣、動感十足的畫面有時可以收到出奇制勝效果, 但您必須意識到, 動畫對網路頻寬的要求更為苛刻, 濫用動畫的結果可能會導致許多瀏覽者對其望而生畏。如果感覺網站上的動畫必不可少, 則應透過一定的動畫編輯技術儘量壓縮動畫尺寸, 以免彩響訪問速度。如果動畫與訪問速度出現較大的衝突時, 對其忍痛割愛當為明智之舉。例如, 將按鈕的圖片從動態改為靜態就可以明顯地加快訪問速度。
4. 表格使用技巧
表格在網頁製作中幾乎是必不可少的, 網頁的排版大部分都是透過表格來實現的。但在使用表格時需要注意的是, 設計者對錶格的不同處理方式將會給網頁的載入速度帶來截然不同的後果。
將整個網頁放置於一個單一表格內並將表格巢狀使用, 會導致網頁無法在瀏覽者的瀏覽器上逐行顯示, 而只有等到整個表格下載完畢, 且瀏覽器根據計算確定不同表格元素的位置後才能一次性顯示。這會讓瀏覽者因等待時間過長而轉向其他網站, 適當地分割表格並減少表格巢狀層數可使瀏覽器在網頁全部下載完之前就能夠顯示部分內容, 不致出現長。時間的網頁顯示停滯現象。另外, 給出固定的表格單元格尺寸, 則可以在需要較長時間下載的內容前先顯示文字等內容。
5. 相容性
除了上面提到的訪問速度外, 網頁的相容性也是非常重要的。設計網頁時必須考慮到瀏覽者所使用的瀏覽器是各式各樣的, 可能有人還在使用早期的瀏覽器。雖然一些新技術可以讓您的網頁大放光彩, 但如果您不想失去這部分瀏覽者的話, 就不要使用那些新瀏覽器才增加的功能。