Uttrycka det

Inkludera JavaScript s längst ner i HTML-dokument

Om du inte har document.write (eller någon dynamisk generering av sidans innehåll med hjälp av javascript) för att infoga en del av sidans innehåll i dina skript, flytta skriptet include till botten av sidan, före utgången av BODY-taggen.
Den HTTP/1.1 Specifikationen tyder på att webbläsare ladda inte mer än två komponenter parallellt per värdnamn. Om du tjänar dina bilder från flera värdnamn, kan du få mer än två hämtningar ske parallellt. Medan en skript hämtar dock kommer webbläsaren startar inte några andra nedladdningar, även på olika värdnamn.
Det finns också sätt att dynamiskt skapa SCRIPT noder och ladda avlägsna skript efter att sidan laddas med AJAX.

Externaliserar man JavaScript s

Använda externa JavaScript-filer kommer att resultera i snabbare laddning av sidor eftersom JavaScript-filer cachelagras av webbläsaren. Inline JavaScript s "i HTML-dokument blir laddas varje gång HTML-dokumentet begärs. Detta kan faktiskt minska antalet HTTP gjort förfrågningar, men det senare ökar storleken på HTML-dokumentet. Extern JavaScript s cachelagras av webbläsaren, storleken på HTML-dokumentet minskar utan att öka antalet HTTP-förfrågningar.
Observera att om användarna på din webbplats har flera sidvisningar per session och många av dina sidor återanvända samma skript och stilmallar, finns det en större risk nytta cachade externa filer.

Packa dina JavaScript-filer

I fall av JavaScript, till skillnad från CSS kan filerna knastrade använder vissa standardalgoritmer som skulle ge en reducerad filstorlek än att helt enkelt avlägsna platser eller flikar. Ett exempel på javascript packare finns här http://dean.edwards.name/packer/

Bli av dubbletten Scripts

Det är mycket ovanligt att hela skript kan dupliceras, men en översyn av de tio bästa amerikanska webbplatser visar att två av dem innehåller en duplicerad manus. Duplicera manus men uppenbarligen reducerar prestandan genom att skapa onödiga HTTP-förfrågningar och bortkastade JavaScript genomförande.
Också, i många fall, även om skript namnen är olika, finns det en risk för dubbla skript inom samma sida på grund av lag storlek och antal av skript.

Minimera tillgång DOM element där det är möjligt

Komma DOM element med JavaScript är långsam så för att ha en mer lyhörd sida bör du:
• Cache hänvisningar till tillgängliga uppgifter
• Uppdatera noder "offline" och sedan lägga till dem i trädet
• Undvik att fästa layout med JavaScript

Separat beteende från innehåll och presentation

Precis som vi separat presentation (CSS / XSLT) från innehåll (XHTML / XML), bör vi också skilja Behavior (Javascript). Detta kallas diskret Javascript. Precis som vi länkar till externa CSS-filer bör vi länka till externa JavaScript-filer.

Istället för att hårdkoda beteende i innehåll (t.ex. onMouseOver, onclick, etc.), bör beteendet vara dynamiskt till element, klasser och unika element (IDS) med hjälp av DOM. Den grundläggande dokument, innehåll bör endast innehålla giltig XHTML / XML och ingen javascript.
Javascript måste öka innehåll genom att lägga beteende. Innehållet bör vara användbara och kan användas utan javascript (eller utan full javascript stöd).

Jag har sparat den här artikeln åldrar tillbaka så ledsen! I dont minns källan ... men det verkade bra, för oss som måste vara medveten om publiken för vilka vi utvecklar webbplatsen för ... så här i är

Page vikt kan användas för att bestämma nedladdningen tiden för en viss sida på en rad olika hastigheter Internet-anslutning. Som exempel visar följande tabell de hämtningstider för tre olika sidor på ett antal populära anslutningshastigheter.

Fördelar med att minska sidan vikt?

Den positiva effekten av att minska sida vikt gynnar både webbplatsägare och konsumenter. Potentiella fördelar:

1. Sidor laddas snabbare. Den mest uppenbara effekten av att minska sida vikt är att dina webbsidor kommer att ladda snabbare för besökare, oavsett hastighet.
2. Lägre sida laddningstider skapa mer bekväma besökare. Besökare är mindre sannolikt att bli frustrerad och gå någon annanstans om dina sidor laddas snabbt. Å andra sidan, långsamt lastning sidor är ett av de säkraste sätten att förlora besökare och potentiella kunder.
3. Snabbare belastning gånger kommer att bidra till ökad konvertering. Fler besökare kommer att stanna på din webbplats längre. Flera av dem kommer att hamna gör inköp, registrerar sig för ditt nyhetsbrev, eller boka-märkning din webbplats.
4. Ditt varumärke perception kommer att förbättras. Återkommande kunder och för första gången besökare både kommer att vara mer benägna att beskriva din webbplats (och företag) som "professionell" om dina sidor laddas snabbt.
5. Sidor med rent, fast kod ofta indexeras mer effektivt genom naturliga sökmotorer.
6. Sidor optimerade för vikt kan faktiskt spara bandbredd avgifter på hög trafik webbplatser. 100.000 sidor vardera väger 150 Kb kommer att kräva dubbelt så mycket bandbredd från din Internetleverantör än 100.000 sidor vardera vikten 75 Kb. För Internetleverantörer som tar ut för begagnade bandbredd eller för översatsad, kan denna minskning skapa betydande besparingar på bandbredd avgifter.

Tänk på följande data, publicerades i en rapport

Sätt Stylesheets på Top

Om du vill ha en sida att ladda successivt, det vill säga vi vill att webbläsaren ska visa allt innehåll har så snart som möjligt, placera CSS längst upp på sidan i dokumentet HEAD. Detta gör sidor verkar vara lastning snabbare, eftersom detta underlättar progressiva avbild av sidan. Detta är särskilt viktigt för sidor med mycket innehåll och för användare på långsamma Internet-anslutningar.

Det är ett dokumenterat faktum att för att förbättra användarupplevelsen är det viktigt att ge resultatindikatorer och visuella återkopplingar. För att slippa att rita delar av sidan, i fallet om deras stilar förändring, vissa webbläsare, inklusive IE, blockerar återgivning av sidan tills CSS är fullastad. På grund av detta, att användaren är får se en tom vit sida.

De W3 HTML-specifikation "anges också att CSS ska jag ta med i HEAD delen av HTML-sidan. at the bottom of the page, so it's best not to use it. Observera också att, i IE @import fungerar på samma sätt som med <link> längst ner på sidan, så det är bäst att inte använda den.

Undvik att använda Browser Särdrag

Filter: Användning av filter ökar minnet konsumtion och tillämpas per element, inte per bild, så problemet multipliceras. Dessutom Filter är IE Proprietary, kommer därför inte att fungera som avsett i andra webbläsare. Om du vill ha genomskinliga eller övertoning bakgrunder, använd 1Pixel med bilder.
Uttryck: CSS uttryck är en trevlig funktion att ha i CSS, men fortfarande är IE särdrag. Det är också viktigt att notera att dessa uttryck är utvärderas när sidan återges och storlek, rullas och även när användaren flyttar muspekaren över sidan. Självfallet kan detta påverka prestanda på din sida. Därmed i enkla ord, undvik att använda CSS uttryck, om du inte känner sina för "väger mer än cons"

Externalisera man CSS

Använda extern CSS kommer att resultera i snabbare laddning av sidor eftersom JavaScript och CSS-filer cachelagras av webbläsaren. Inline CSS i HTML-dokument blir laddas varje gång HTML-dokumentet begärs. Detta kan faktiskt minska antalet HTTP gjort förfrågningar, men det senare ökar storleken på HTML-dokumentet. Extern CSS cachelagras av webbläsaren, storleken på HTML-dokumentet minskar utan att öka antalet HTTP-förfrågningar.

Observera att om användarna på din webbplats har flera sidvisningar per session och många av dina sidor återanvända samma skript och stilmallar, finns det en större risk nytta cachade externa filer.

Packa din CSS-fil

Förpackning eller knastrande din CSS är det praxis att ta bort onödiga tecken från koden för att minska dess storlek och därmed förbättra laddningstider.

CSS kan jag knastrade genom att ta bort alla kommentarer och eventuella oönskade tecken som vita utrymmen, nyradstecken etc.

För tider har jag tänkte att konsolidera alla de goda exempel, har jag läst då och då. Äntligen! Jag fick komma ner för att uttrycka det till PEN. Jag insåg att det kommer att bli gigantisk uppgift att skapa denna kolossala dokumentet, så jag beslöt att ägna en hel kategori till det, så att jag kunde fortsätta att lägga saker om bästa praxis när och när jag stöter på dem ...

Tja! Innehållet här kommer att bli en sammanslagning av mina personliga bästa UI utveckling praxis med de skrivits av vanliga utvecklare som Yahoo, Google etc.

Titta på detta utrymme och håller browing den Best Practices Kategori

Enkel sett (för dem som aldrig hört talas om doctype tidigare idag)! DOCTYPE är förklaringen i ett HTML-dokument som kommer före <HTML> taggen ser att något så här (klistras in från källan till denna mycket sidan)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Därför lösning på detta problem var att

• tillåter webbutvecklare som visste deras normer att välja vilket läge som ska användas.
• fortsätter visa gamla sidor enligt de gamla (quirks) regler.

Och DOCTYPE föddes.

Så, baserat på om du sidan är utformad för att standarder eller inte, väljer du rätt doctype.

Gamla sidor skrivna innan dessa normer infördes har ingen doctype. Därför när det inte finns någon DOCTYPE i HTML så webbläsaren är i quirks mode.
Men om DOCTYPE definieras som en av följande, då webbläsaren sägs vara i strikt läge.

<DOCTYPE html PUBLIC "- / / W3C / / DTD HTML 4.01 Transitional / / EN" "http://www.w3.org/TR/html4/loose.dtd">