Rychlost je použitelnost.

Chcete-li to přesněji říci, je rychlost webu velkou částí použitelnosti. Nejintutivnější rozhraní, které kdy vzniklo v mysli člověka, vám neudělá nic dobrého, pokud se uživatel na chvíli načte.

A je to. Článek je hotový ... Ok, takže je toho mnohem víc, ale první věta je asi polovina toho, co potřebujete vědět. Musíme rychle učinit naše webové stránky.

Mohl bych použít spoustu superlativních výrazů, jako je "rychlé bouřky" nebo "extrémně rychlé", nebo dokonce "rychlejší než rychlá kulka", ale byly by nedostatečné. Je jednodušší říci, že neexistuje žádná taková věc jako "příliš rychlá".

Tak co tím myslíme "rychlým"?

Musíme chvíli zabrat, abychom mluvili o jaké rychlosti mám na mysli. Stručně řečeno, všechny rychlosti. Konkrétněji tři druhy rychlosti:

1) Doba načítání

Bude to doba potřebná ke stažení všech informací do zařízení vašich uživatelů. To je ovlivněno především rychlostí připojení k internetu a skutečnou velikostí souborů.

Nemůžete s připojením dělat moc, ale můžete udělat hodně o velikosti souboru.

2) Doba zpracování

Po stažení souborů je třeba je zpracovat a vykreslit prohlížečem. Všechno toto zpracování a vykreslení je ovlivněno tím, jak dobře byl napsán váš kód a vše, co se děje na telefonu, tabletu nebo notebooku / pracovní ploše uživatele.

Jediná věc, kterou můžete ovládat, je váš vlastní kód, ale to má velký rozdíl.

3) Vnímaná rychlost webu nebo vnímaný výkon

A pak je psychologický faktor. Rychlé webové stránky mohou vypadat a mít pocit, jako by byly pomalé. Pomalé webové stránky mohou být dělány cítí trochu rychleji s soudní aplikací některých triků.

Tato část je o studiu vašeho uživatele a jeho informování o tom, co se děje při interakci s vaším webem nebo aplikací.

Musíte věnovat pozornost všem třem aspektům rychlosti webu, aby se vaše stránky cítily, jako by to šlo rychle. A čím větší je místo, tím více je třeba optimalizovat.

Tak začneme.

Zrychlete svůj CSS

Mnohokrát, obzvláště na těch menších experimentálních projektech, které se mi moc líbí, zjistil jsem, že trávím více času na CSS než jakákoli jiná část kódu. Často je také napsáno více CSS než HTML nebo JavaScript. Takže, právě zde, je ukazatel toho, kolik vašeho CSS může ovlivnit velikost souboru.

Pak samozřejmě existuje otázka, jak rychle se vaše webové stránky skutečně spustí na pracovní ploše vašeho uživatele, notebooku, tabletu nebo telefonu. Hodně ze skutečné "práce" nebo vykreslování webové stránky provádí software, s malou pomocí z GPU.

Může se rychle načíst, ale pomalu posouvat. Způsob zápisu vašeho CSS má přímý vliv na to, jak rychle může konkrétní zařízení skutečně zobrazit webovou stránku po stažení souborů.

Při optimalizaci webových stránek rychleji běží, CSS je obvykle dobré místo pro začátek.

Nepoužitý kód

CSS, který sedí ve vašem stylu a dělá nic, činí vaše soubory zbytečně větší. Dobře, tak tohle by se mohlo zdát nesmrtelné; ale stále se to stává to nejlepší z nás.

Získáte nějaký obsah a zapomenete vymazat starý CSS. Změníte třídu nebo ID prvku kontejneru a zapomenete odstranit starý CSS. Napíšete nějaký CSS, uvědomíte si, že existuje lepší cesta a zapomenete ... dostanete to.

Do mixu přemístěte několik vývojářů v oblasti front-endu a máte recept na nepříjemný, nezvládnutelný stylový list nebo sbírku, pokud nejste opatrní. Nepoužitý kód zpomaluje načítání stránky na základě jeho samotné existence jako dat. Zpomaluje vývoj, protože může zaměňovat lidi, kteří čtou styly.

To může také znamenat pomalejší časy vykreslování, protože je pro CSS prohledáván pouze více CSS, zatímco se shoduje se všemi CSS na příslušné prvky HTML.

Bez ohledu na to, zda kontrolujete a odstraňujete všechny staré CSS ručně, použijte automatizované nástroje, které vám pomohou najít nepoužívané voliče CSS nebo jednoduše smažte věci náhodně, dokud se něco nezlomí (nedělejte to), musíte tento starý kód vzít ven.

CSS selektory

Když mluvíme o tom, jak prohlížeč odpovídá CSS s příslušným kódem HTML, je čas podívat se na voliče CSS. Bylo napsáno hodně o tom, které selektory jsou nejrychlejší, které jsou pomalé, zda byste se měli obtěžovat s pomalými a vůbec.

Problémem je, že velká část těchto informací je stará. V roce 2000 napsal Dave Hyatt (vývojář pracující na Safari a aktivním členem pracovní skupiny CSS W3C):

Smutnou pravdou o selektorech CSS3 je to, že by se opravdu neměli používat vůbec, pokud se o výkonnost stránek staráte.

Pokud se na to podíváte dokument z tohoto citátu pochází, uvidíte, že mluví o selektorech jako jsou : první-dítě a další pseudo-selektory. A měl pravdu.

Stále je; ale za posledních patnáct let se počítač trochu rozvinul. V dnešní době se dodatečné úsilí vyžadované od počítače, aby vykázalo, že CSS by neměl být viditelný nikým jiným, kromě těch, kteří používají nejlevnější z levných mobilních zařízení.

To je samo o sobě záležitostí, takže skutečně bude záviset na projektu, na vaší cílové demografii a tak dále. Jednoduše řečeno, použijte svůj nejlepší úsudek a možná nepřekračujte pseudo-selektory.

V opačném případě, pokud vaše stránky nedosahují délky knihy, použité voliče by neměly mít vliv na výkon vašeho webu. Přesto se podívejte na výše uvedený dokument a seznamte se s tím, co zobrazuje nejrychlejší a co ne. Informace mohou být stále užitečné.

Můžete také vidět tento článek z CSS-triků pro o něco pozdější přijetí na téma.

Vlastnosti náročné na zdroje

Samozřejmě existují také vlastnosti CSS, které trvají déle než ostatní. Klasické vlastnosti jako šířka, výška a barva jsou stále nejrychlejší. Ty, které mají tendenci trvat déle (a mohou se lišit od prohlížeče až po prohlížeč) mají tendenci být vlastnostmi CSS3, jako je box-shadow.

Proces přidávání stínu k prvku je složitý, pokud jde o vykreslování webových stránek. Zajímavé je, že, jak bylo uvedeno výše HTML5 Rocks , požadovaný procesní výkon se může značně lišit v závislosti na specifických rozměrech stínu stínu.

tento článek znamená, že to platí i pro jiné vlastnosti, jako je okraj a poloměr .

Opět by to mělo jen malý vliv na vykreslování stránky na vašem počítači nebo notebooku. Mobilní zařízení by ale mohly mít větší zásah, a proto by to mohlo mít za následek zkušenost. Všichni nenávidí roztržené rolování.

Přesto je třeba zvážit náklady na používání snímků, které mají stejný účinek. Kdokoli si vzpomíná na to, co jsme udělali, abychom občas dostali zaoblené rohy?

Nepoužívejte přes palubu a vaše styly by měly být dostatečně rychlé.

Animace CSS

Teď se dostaneme do jiného území. Animace CSS mohou být ohromně rychlé, nebo mohou zpomalit prohlížeč až do okamžiku, kdy hrací plošiny mají problémy s udržením se.

Je to částečně proto, že ne všechny animace jsou vykresleny stejně. Některé těžké zvedání se provádí pomocí hardwaru, zatímco jiné druhy animací musí být vykresleny zcela podle vlastních funkcí prohlížeče. To je zvláště nákladné v mobilních zařízeních.

v další článek na HTML5 Rocks, vlastnosti CSS, které jsou nejrychlejší animovat, jsou pozice , měřítko , rotace a neprůhlednost.

Podívejte se na článek, který vám poskytne úplnější přehled o tom, co lze animovat a zároveň udržet nízkou cenu.

Použijte předprocesory CSS

Zde vám nabízíme ty nejpraktičtější rady, které vám, autor, dám. Použijte CSS preprocesory jako LESS, SASS a Stylus. Jistě, pokud je používáte špatně, můžete vytvářet větší styly, než jste zamýšleli; ale potenciální přínosy stojí za to.

Chcete-li například snížit počet požadavků HTTP na server (vždy dobrý nápad), zahrnout všechna nastavení, rámce do jednoho souboru LESS / SASS. Při kompilaci bude vše v jediném stylu. Navíc většina preprocesorů nabízí možnost vygenerovat všechny CSS v minifikované podobě.

Tímto způsobem můžete použít tolik různých souborů, kolik potřebujete pro účely organizace kódu, aniž byste příliš ovlivnili velikost souboru.

Urychlení JavaScript

JavaScript může být opravdu pomalý. Přesněji řečeno, JavaScript může mít mnohem přímější efekt na "zpracování" části rovnice rychlosti než CSS. Ještě horší je, že JS může dostat exponenciálně těžší, pokud jde o velikost souboru, aby bylo možné dosáhnout zdánlivě triviálních věcí.

Je to dvojnásobná bolestná pomalost a naši uživatelé jsou často obětmi, obzvláště ti na mobilních prohlížečích. To však není chyba jazyka. Jak se nám podařilo získat JS, je často v přímém poměru k naší neznalosti programování obecně.

Nejsem vývojář. Často jsem použil knihovny, jako je jQuery, nebo samostatné samostatné JS pluginy, které vám umožní udělat věci. Čím víc potřebuji, tím více pluginů potřebuji, aby vše fungovalo. Tyto pluginy a rámce jsou dodávány s dalšími možnostmi a funkcemi, které nikdy nepoužívám.

Tam je šíření pásma-kradou nafouknout, tam.

Pluginy navíc nemusí fungovat dobře. Mohou se zpomalit, nebo by někdo mohl úplně přestat pracovat.

Je tu zbytečná zpracovatelská síla, právě tam.

Pokud opravdu chcete urychlit svůj web, oholejte milisekundy (nebo celé sekundy, v některých případech), je to, co musíte udělat:

JavaScript by měl být téměř vždy externí

Stejně jako CSS, je nejlepší udržovat JS v externích souborech a propojen s vaším HTML. Možná si nemyslíte, že je to tak velký problém, pokud nemáte mnoho kódu JS a přidává se žádost HTTP, ale tady je věc: externí soubory CSS a JS se ukládají do mezipaměti prohlížečem.

Pokud se tedy znovu požádá o stejnou stránku nebo se na vás požadují jiné stránky na vašem webu, které používají stejný systém CSS nebo JS, použijí se tyto externí soubory uložené ve vyrovnávací paměti, místo aby byly znovu staženy. To znamená rychlejší načítání a mírně rychlejší zpracování. Stále stojí za to volání na server znovu a znovu.

Zahrnujte soubory JS ve spodní části stránky

V podstatě tato teorie vypadá takto: prohlížeč zobrazuje nejprve to, co je nahoře v horní části zdrojového kódu stránky. To je důvod, proč se věci jako značka blíží k vrcholu.

Soubory JavaScriptu však mohou všechno zpomalit zastavením prohlížeče před vykreslením kódu HTML, dokud nejsou načteny. Vzhledem k tomu, že většina běžně používaných efektů JS a zásuvných modulů potřebuje pracovat pouze po zbytku stránky na obrazovce, je to méně než ideální.

Zlepšete uživatelské zážitky a snižte vnímaný čas načítání propojením s externími soubory v dolní části stránky, těsně před značkou.

V době, kdy se uživatel dostane k interakci s čímkoli, co vyžaduje JS, mělo by být připraveno jít.

Vyhněte se rámcům a jiným závislostem, pokud je to možné

Pokud vytváříte plnohodnotnou aplikaci, můžete tuto sekci ignorovat. Dobrý, flexibilní a lehký rámec může dát vývojářům obrovskou výhodu. U malých až středně velkých webových stránek však může být překračující rámec JavaScript. Na těchto webových stránkách se JS bude nejčastěji využívat v back-endu systému správy obsahu pro správu obsahu. Na předním panelu můžete mít posuvník obrazu nebo rozložení zdí nebo dva. Pokud jste opravdu fantazijní, můžete mít na vyhledávacím panelu automatické dokončení.

Většina obsahu nemusí být fanatiková a animovaná takhle. JavaScript by měl být co nejvíce vyhrazen pro zlepšení uživatelského prostředí. Spoléhat se na to jednoduše docela místo na webu může mít za následek pomalé, pomalé místo, a to zejména na mobilních zařízeních.

Ve skutečnosti jsou všechny kódové rámce stejné, ať už jde o JavaScript, PHP, Python, HTML nebo CSS: každá funkce je spousta kódu. Při výběru rámce nebo pluginu pro práci si zeptejte se, zda použijete všechny funkce, které nabízí, nebo dokonce většinu z nich.

Pokud ne, je modulární modul? Můžete vybrat a vybrat pouze ty části, které skutečně potřebujete? Pokud ano, a věříte, že velikost kompromisu za to stojí za to, pak to všechno půjde! V opačném případě je nejlepší, když vidíte, co můžete vynechat víc, než to, v čem se můžete dostat.

Vypněte JavaScript

Ne trvale! Zamyslete se nad tím, existuje nějaký obsah nebo funkčnost na vašem webu, která je skrytá JS? Mohou to lidé získat přístup, aniž by měli ve svých prohlížečích povoleno službu JS?

Pokud ano, pak skvělé. Nicméně, pokud lidé nemohou vidět důležité informace, kontaktovat se nebo správně navigovat bez JavaScriptu, pak máte problém. Jistě, můžete se spoléhat na to, že většina lidí má stále zapnutou funkci, ale vždy máte ty okrajové případy.

Jak to souvisí s rychlostí webu? Představte si, jak pomalé procházení dostane, pokud část vašeho webu náhle jednoduše nefunguje.

Najme si developera

Ne vážně, pokud nejste vývojář, a máte rozpočet na jednoho, jděte si jeden, a to i pro malé a jednoduché práce. Je to z dlouhodobého hlediska levnější, než si najmete někoho, kdo je zkušený, jednou.

V případě, že se věci dělají strašně špatně (a mluvíme zde o počítačích, takže se něco pokazí), zjistí, co se stalo rychleji. Budou mít zkušenosti s nalezením takových problémů a vyřešením těchto problémů. Pokud nic jiného, ​​oni budou lepší na googling těchto konkrétních témat.

A co je nejdůležitější, budou vědět, jak dělat, co je třeba udělat s méně kódem. Méně kódu (obvykle) běží rychleji a (vždy) stahování rychleji. To je nejjednodušší rada, kterou mohu dát.

(Pokud jste vývojář nebo se učíte, sestavil jsem seznam výukových programů, které se nacházejí v dolní části tohoto článku. Jsou zde také některé návody pro začínajícího psát JavaScript, který běží rychle.)

Obrázky a komprese

Když vyfotografujete video z rovnice, největší věcí na libovolném webu s obsahem je obrázky. Obrázky mají tendenci být velké, mohutné a pomalé, když nejsou optimalizovány.

Nyní s rozšiřováním obrazovky sítnice, které nás nutí používat větší snímky, pokud chceme, aby věci vypadaly dobře na každém zařízení, problém se nebude lépe řešit. A co je ještě horší, je to problém, na který je snadné zapomenout, dokud nevyčerpáte více, než jste zamýšleli na šířku pásma.

Když každý byt počítá, nemůžeme si dovolit zapomenout.

Dobrou zprávou je, že se nejedná o žádný nový problém. Proč je to dobré? Znamená to, že existuje spousta potenciálních řešení, z nichž můžete vybírat, a můžete použít více než jednu z nich najednou. Ve skutečnosti je to obecně dobrý nápad.

Takže, dokud poskytovatelé internetových služeb a hostingové společnosti nezačnou poskytovat neomezenou volnou šířku pásma (nedržte dech), je zde několik věcí, které můžete udělat:

Dělejte více s kódem než s obrázky

Jednoduše řečeno, dělejte co nejvíce vizuálně, pomocí CSS a JavaScript, než se obrátit na obrázky. Kód bude vždy levnější k přenosu než obrázky, takže se s ním držte co nejvíce. Navzdory výpočtové síle spotřebované stínovými stíny, gradienty a podobně, založenými na CSS, zvažte kompromisy.

Mějte také na paměti, že SVG obrázky se v tomto případě počítají jako "kód", protože to jsou všechny: kód XML, který se vykresluje jako obrázek. Proto je třeba je používat vždy, když potřebujete něco, co se týká vektorů.

Používejte citlivé obrázky

Nyní, když se vrátíme k výše uvedeným sítím sítnice, co s nimi děláme? Jak ušetříme na šířku pásma?

Zde se obracíme na prvek a vlastnost sady obrazů . Jsou poměrně nové a nejsou plně podporovány, ale umožňují prohlížečům vybrat vhodnou velikost obrazu pro zařízení, které se používá.

Takže aniž by vám to ušetřilo nějakou šířku pásma pro někoho, kdo si prohlíží vaše stránky ve svém iMacu, není to tak velká dohoda, protože s největší pravděpodobností získala širokopásmové připojení. Někdo na svém telefonu zatím dostane menší verzi stejného snímku, aniž by čekal příliš dlouho.

Zvolte správný formát úlohy

Mnoho problémů s velikostí obrázků se opraví, jakmile zjistíte, který formát obrázku chcete použít v dané situaci. Mohl bych pokračovat ve specifických formátech obrázků, v tom, jak komprese funguje atd., Ale opravdu si jen pamatujete na pár věcí:

  1. Pro složitou grafiku, například fotografie, použijte formát JPEG.
  2. Pro jednodušší grafiku, která používá několik barev, jako jsou ikony a loga, použijte SVG a / nebo PNG.
  3. GIF je určen pouze pro animaci a pouze když nebudete lépe sloužit animací s CSS3 nebo JavaScript. Animované GIF pracují lépe jako obsah než jako prvky rozhraní.

To je opravdu všechno. Pokud to uděláte a hrajete-li s nastavením optimalizace při ukládání obrázků, můžete často získat poměrně slušnou kvalitu při poměrně malých velikostech souborů.

Těšit se

Existuje však nový formát nazvaný WebP, který je automaticky podporován prohlížečem Chrome a Opera. Google nároky že soubory WebP jsou o 26% menší než PNG a o 25-34% menší v závislosti na několika faktorech.

To jsou skvělé zprávy, s výjimkou dvou věcí: Firefox a IE. Nyní, pokud vám nevadí používání záložních souborů a dalšího skriptu, můžete dnes používat formát WebP. Stačí stáhnout WebPJS , a máte dobré jít.

WebPJS používá JavaScript a trochu Flash ( povzdech ... ale to je jen pro IE), aby to fungovalo, ale to funguje. Možná byste si to měli uvědomit, pokud potřebujete rychle a spoustu větších obrázků, přičemž nevýhodou je, že nebude fungovat bez JS.

Komprese

Existují dva druhy komprese, které můžete použít na obrázky. Za prvé, máme ztrátovou kompresi . Používá se ve ztrátových formátech, jako je JPEG. Umožňuje vám komprimovat jakýkoli obraz o tom, kolik chcete, s tím, že kvalita se zhorší a zhorší. Věci budou pixelovány a ztratí definici.

Lossless compression se používá ve formátech jako je PNG a může do jisté míry snížit velikost souboru. Má však své hranice. Vždy přichází bod, ve kterém není možné snížit obraz bez ztráty kvality.

Máte-li aplikaci Photoshop nebo podobně pokročilý editor obrázků, je často nejlepší použít je pro kompresi obrázků, abyste viděli, jaký výstup bude vypadat, když skončíte.

(Automatické nástroje, zejména on-line nástroje, podle mých zkušeností mají tendenci komprimovat věci možná trochu daleko. Přesto budu uvádět ty nejlepší kompresní nástroje, které jsem našel v sekci odkazů níže.)

Implementujte kompresi obrazu a změnu velikosti v CMS

Pokud používáte CMS, jako je WordPress, automaticky změní velikost obrázků, které jsou příliš velké. Je také snadné najít pluginy, které je automaticky komprimují za vás.

Uvědomte si, že doporučuji automatickou kompresi pouze v případech, kdy víte, že se hodláte hodně nahrávat, a spoustu obrázků podobné kvality pro stejný účel. Fotografický blog je jedním příkladem.

Pokud provozujete web, kde uživatelé nahrávají své vlastní obrázky, je to samozřejmě ... automatické změna velikosti a komprese je absolutní nutností a to je důvod, proč to dělá každá sociální síť.

Obecné tipy

Zde je pár rad rad, které se nezachytily v žádné ze tří výše uvedených kategorií.

Upravte vše

"Zmenšení" kódu znamená jen to, že všechny extra mezery a linky jsou odstraněny. To může značně snížit velikost souboru.

Mohlo by to znít jako spousta práce, ale existují nástroje pro minimalizaci CSS a JS automaticky a zachování vylepšených souborů samostatně pro vaše zdrojové soubory z poměrně zřejmých důvodů.

Jak již bylo zmíněno dříve, různé předprocesory CSS dokáží nejdříve vygenerovat celý kód ve formátu miniatury.

Stlačte vše

Pokud je váš server nastaven správně, celý kód může být odeslán do prohlížeče ve formátu komprimované. Textové soubory se velmi dobře komprimují, což značně snižuje velikost odeslaných souborů.

Nyní váš server musí trvat okamžik nebo dva, aby komprimoval soubory, které odesílá, a uživatelský prohlížeč je musí dekomprimovat, ale obvykle to stojí za to, aby se šířila šířka pásma.

Úplné vysvětlení toho, jak to funguje, naleznete Jak optimalizovat vaše stránky pomocí komprese GZIP .

Ukládání do mezipaměti vašeho webu

Browser caching se automaticky stává do jisté míry díky moderním prohlížečům. Prohlížeč přejde na web a dočasně uloží obrázky a další informace, které najde.

Tímto způsobem, pokud se stejný uživatel vrátí během daného časového období, nemusí prohlížeč znovu požadovat stejné obrázky. Načte pouze ty, které již má, a požádá o nové obrázky, které by nemusely mít.

Existuje však něco, co můžete udělat pro to, aby prohlížečům co cache a jak dlouho, jak je vidět v této příručce .

Ukládání do mezipaměti serveru

A pak je ukládání do mezipaměti serveru. Serverové ukládání do mezipaměti v podstatě trvá pouze na vašem webu a dává nějaký druh "kopie" mezi uživateli a vaším vlastním serverem. Proč byste se obtěžoval?

Je to zvlášť užitečné pro lidi, kteří používají systémy správy obsahu ve velkém měřítku. Díky tomu, že mají uživatelé přístup k dočasné kopii vašeho webu namísto skutečné věci, snižuje počet hovorů do vaší databáze. Informace se zobrazují a načítají rychleji, protože nemusí být pokaždé zpracovávány.

V závislosti na tom, jak je nastaveno, může ukládání do mezipaměti serveru obecně také snížit náklady na šířku pásma. V podstatě je čím větší je váš web, tím větší je důvod, proč se musíte podívat do mezipaměti.

A teď sekce, na kterou jste čekali: seznam odkazů! Máme nejčastěji konzultace a průvodci a několik nástrojů pro kompresi obrazu, které doporučujeme.

Obecná informace

Z Yahoo Developer Network

Yahoo! nemusí být tak velká dohoda, jaká kdysi byla, ale jejich vývojářská síť má na tom spoustu dobrých věcí. To zahrnuje jejich Nejlepší postupy pro urychlení vašeho webu , která pokrývá některé základní věci, které můžete udělat. Některé z nich se týkají stejného důvodu jako tento článek, ale kromě toho existuje i další.

V úvodu jsem se zmínil o vnímání rychlosti místa, známého také jako vnímání výkonu. Pokud se o tom chcete dozvědět více, podívejte se Začátečník průvodce vnímáním výkonu: 4 způsoby, jak vytvořit mobilní stránky jako domácí aplikace .

CSS

Effeckt.css

Effeckt.css je sada animací založených na CSS, které jsou navrženy tak, aby byly rychlé, bez ohledu na to, na jaké platformě se uživatel nachází.

Optimalizujte doručování služby CSS

Tento je návod, jak zajistit, aby váš prohlížeč CSS získal a zpracoval co nejrychleji.

JavaScript

24 Best Practices pro začátečníky

Když právě začínáte, učení se správně může být stejně velkým zvýšením rychlosti jako všechny náhodné tipy triků, které byste se mohli naučit. Špatný kód stojí víc, pokud jde o dobu zpracování, a tak se naučíte dělat věci správným způsobem.

Psaní rychlého, úsporného javascriptu

Tady je a základní průvodce který se zaměřuje konkrétně na psaní kódu JavaScript, který běží rychle.

Tipy pro výkon jazyka JavaScript ve verzi V8

Stejně jako název říká, tento je veškerá rada zaměřená konkrétně na JavaScript V8.

5 tipů pro efektivnější výběr jQuery

A někdy pravděpodobně skončíte pomocí jQuery. Pokud to uděláte, měli byste alespoň vědět, jak napsat jQuery selektory, které vás nebudou zpomalovat. A tady je Sitepoint jste zahrnuty .

snímky

Příručka pro začátečníky k formátu obrazových souborů

Přečti si tohle Další informace o obrázkových formátech na webu. Informace jsou trochu staré, ale stále platné a dobré vědět.

Optimalizace obrazu

Tento je techničtějším návodem k optimalizaci obrazu poskytovanému sítí Google Developer Network.

Compressor.io

Compressor.io je jedním z nejpůsobivějších nástrojů, se kterými jsem se osobně setkal. Je to on-line aplikace, takže budete muset nahrát všechny soubory, které chcete komprimovat, ale může udělat zázraky pro JPG. Nabízí jak ztrátové, tak i bezztrátové možnosti komprese, z nichž každá má docela úžasné výsledky a dá to i dávkové zpracování.

Trimage

Trimage se specializuje na bezztrátovou kompresi, ale může být nainstalován na vašem počítači, na Windows, Mac nebo Linux. Protože se instaluje do počítače (a ano, přichází s různými možnostmi příkazového řádku a grafickým uživatelským rozhraním), lze jej snadno spustit automaticky jako součást vývojového pracovního postupu.

Závěr

Jako vždy je toho mnohem víc, než se naučit. Ale vyzbrojené informacemi, které jsme poskytli, a zdroji, s nimiž jsme se spojili, budete na cestě k budování webů a aplikací, které z vašich uživatelů neplechají peklo.

A je to první krok k jejich impresi.