Tvorba mezinárodního eshopu s minimem nákladů

Podrobně Vás provedeme tím nejdůležitějším při tvorbě mezinárodního eshopu s open source softwarem a minimálním rozpočtem a minimem nákladů na údržbu. Založeno na 4 leté intenzivní praktické zkušenosti.

Úvod

V roce 2019 existovaly v multilinguální formě pouze weby globálních technologických společností typu Microsoft, Hewlett Packard. Mnohdy šlo spíš o support weby či weby sociálních sítí než eshopy. Tyto weby jsou často programovány v Pythonu či jazycích vhodných pro velké weby. V zásadě nejsou pro střední a malé eshopy finančně dostupné. Případně existovaly menší eshopy s manuálním překladem do anglického či německého jazyka.

V mezidobí některé opravdu velké obchody začaly přidávat verze automaticky překládané Google Translatorem či DeepL Translatorem. Avšak bez zásadního úspěchu. Limitem těchto velkých eshopů nebylo financování techniky. Spíše nedokonalost překladů, nedostatek marketingu, logistiky a cizojazyčného personálu. Specifický je v tomto ohledu Aliexpress.com nabízející levné zboží z Asie nebo známý bazar Ebay.com. Obě platformy pro svá specifika dobře fungují i s nedokonalými či špatnými překlady.

Automatické překladače v použitelné podobě fungují od roku 2021. Nepříliš použitelné verze se objevovaly již kolem 2012. Ještě v roce 2020 tyto softwary buď neumožňovaly snadné automatické překlady. Nebo byly zahlcené chybami a web často padal.

Při konzultacích s IT odborníky jsme naráželi na velké problémy. Mnoho námi dobře placených zkušených IT odborníků střílelo naslepo, víc než nám bylo milé. Prostě to na této úrovni v podstatě nikdo neumí a nedělá. Víte, že Vás čeká hodně trápení.

Pro případné ocenění článku neděkujte. Až bude potřebovat nějakou sexuální hračku, podívejte se nejlepšího sexshopu Extasica.com.

Volba platformy eshopu – Worpress – Wocommerce

Z důvodů finanční dostupnosti i flexibility úprav je vhodný open source redakční systém a eshop nadstavba. Z praktických důvodů jsme se rozhodli pro nejvíce rozšířený redakční systém – WordPress a nejrozšířenější eshop platformu Woocommerce. Obojí je pro komerční užití zdarma a bez podmínek. Jedná se o velmi robustní a sofistikovaný software. Včetně pluginů -nezávislý softwarový doplněk – to vyvíjí deseti tisíce lidí. Jsou v zásadě placeni z nabídek a prodeje prémiových funkcí. Prémiové funkce potřebujete opravdu vyjímečně (viz přehled zakoupených pluginů dále). Zpravidla je zakoupíte za cenu kolem 40 – 80 EUR navždy. U výběru Woocomerce jako platformy pro eshop nebylo žádné dilema. Proto výběr Woocommerce nebude dále obhajován.

Řešení překladu mezinárodního eshopu – volba tzv. multilinguálního pluginu

Volba architektury a řešení překladů multilinguálního e-shopu je velké dilema. Pro zjednodušení uvedu jen 3 základní typy překladových software pro WordPress.

Dynamický překlad webu

Nejjednodušší, nejdostupnější, ale také nejhorší je tzv. dynamický překlad např. pluginem GTranslate. Dynamický překlad znamená to, co Vám děla překlad v prohlížeči Chrome. Stránka zůstává v původním jazyku, ale překladový software Vám zobrazí překlad. Vyhledavače a tedy ani internetoví uživatelé neví, že stránka je dostupná i v jejich jazyku. Dokud na stránku přímo nepřijdou.

Statický překlad

Prémiová verze pluginu GTtranslate umí i statický překlad. Tzn. vytvoří trvalou stránku v cizím jazyce přístupnou pro prohlížeče a jejich vyhledávací scripty (tzv. crawlery). Ale jedná se o systém, kdy překlady jsou v majetku Gtranslate. Každý rok za Vaše překlady tedy musíte platit licenci. Dále se tedy má smysl zabývat pouze multi linguálními systémy se statickou stránkou v cizím jazyce a vlastním úložištěm překladů.

Multi linguální software pro překlad eshopu

Tyto pluginy jsou pro více jazyků vždy placené. Cena za licenci pro jeden web se pohybuje kolem 90 EUR. Po roce můžete software užívat dále zdarma, ale pro roční přístup je updatům je třeba licenci koupit znovu. Náš obchod se zatím pro multilinguální plugin drží 4 roky bez updatů. To též dokládá robustnost a stabilnost WordPress a Woocommerce platforem.

Polo automatický překlad

Překlad eshopu se od překladu běžného publikačního webu liší. E eshopu potřebujete přeložit i mnoho dalších prvků, než jen texty článků. Např. informace o dopravě, maily potvrzující objednávku apod. Tyto data jsou navíc často uloženy v back endu webu. Tzn. že nejsou přímo přístupné návštěvníkovi z webu.

Tato skupina poloautomatických překladových software je nejrozšířenější. Nejznámějším překladovým pluginem je WPML. Známý je též WordPress Multilingual. V zásadě jde o manuální překlad celého webu. Pro překlad textů lze využít API rozhraní automatické překladače. Vše ostatní nastavení a procesy překládáte ručně. WordPress Multilingual je velmi rychlé řešení, ideální pro výkon serveru. Ale v podstatě nejde o překlad, ale o nezávislou komplexní v každém tvorbu webu cizího jazyka.

Manuálně např. vytváříte pro každý produkt i detaily jako pole pro překlad popisu produktu, názvu produktu, vlastnosti produktu, krátký popis produktu a dalších nekonečně prvků. Lze to částěčně scriptovat. I tak je to v zásadě IT pravěk. Na této bázi je založena např. populární platforma pro eshopy Shoptet. Ta je tak pro mluti linguální obchod zcela nevhodná.

WPML je o něco dál. Vytvoří pole cizího jazyka, kam vkládáte překlady. Ale velká část práce – doplnění překladů enjen textů, ale právě i růuných funkcí vlastností a nastavení je manuálního charakteru. Pro menší a střední sexshop v podstatě nepoužitelné.

Plně automatický překlad eshopu

Opět je tu několik systémů. Ale nejvyšší míru automatizace překladů eshopů nabízí Translatepress. Nemá smysl zde dělat srovnání. 50 podobných srovnání na webu navádí zejména na Translatepress a WPML. Ale plnou informaci Vám dá až samotná zkušenost. Translatepress Vám automaticky po zaškrtnutí několika nastavení přeloží vše. Pro jeden cizí jazyk je zdarma.

V základní prémiové licenci za asi 90 EUR máte neomezeně jazyků a SEO podporu. Veškerá nastavení včetně automatických emailů a dokonce i některých externích pluginů. Třeba v rámci roční podpory, jež je součástí licence, zdarma propojili free plugin PDF Invoices & Packing Slips for WooCommerce. Tento doplněk zdarma pro automatické faktury eshopu je tak od 2019 automaticky překládám Translatepressem.

Překlad Translatepress funguje tak, že se zaregistrujete na příslušených stránkách Google cloud Platform či DeepL. Zřídíte si účet a API rozhraní. Google má prvních 500 000 znaků za měsíc zdarma. Dále se platí 20 USD za každých 500 000 znaků. Za automatické překlady multilinguální sexshopu Extasica s cca 1000 produkty si Google translator vezme průměrně 40USD měsíčně. U Deepl platíte vše a o něco dráž. Deepl však má mnohem lepší překlady.

Pokud bychom začínali s tvorbou multilinguálního webového obchodu znovu, volili bychom Deepl. U Google translateru je třeba texty v nativním jazyce více upravovat, aby jim Google rozuměl. Přeložený text se uloží do databáze a znovu se již nepřekládá. Pokud v odstavci změníte 1 znak, Translatepress jej nechá znovu přeložit pro všechny jazyky.

Úskalí Translatepress plně automatického překladového pluginu

Velmi zatíží web. Na rychlém serveru Vám při ideálním nastavení zpomalí page download o 1 sekundu. Na běžném hostingu i virtuálních serverech i o 3-6 sekund. V zásadě jednoduchý multi linguální eshop odpovídá z hlediská nároků na softwarem výkonově složitému jednojazyčnému web opravdu velkého eshopu. Samostatnou otázkou jsou pak nároky dle množství návštěvníků a opravdu velké databáze, ale to není případ středně velkého eshopu.

Kolem roku 2019 / 2020 byl Google Translator ještě plný chyb a web jej užívající padal i několikrát týdně.

Mějte zapnutou volbu Force language in custom links. Návštěvníkovi v cizím jazyce zajistí transformaci nativního url do URL jazyka návštěvníka.

Používejte kompatibilní externí SEO plugin, např. AIO SEO. Plugin Yoast s pluginem Translate press zbytečně zatěžuje databázi. Kompatibilitu SEO pluginu s Translatepress zkontrolujete zobrazením kódu stránky (klik pravým tlačítkem na příslušnou stránku a volba „kód stránky“). Metadata by měla být přeložena do příslušného jazyka.

Vytvořte site mapy v cizím jazyce (premium verze) a uploadujte je Googlu.

Nakonec to nejdůležitější. Nepřekládejte URL slugy, tzn. URL adresy. Dělá to velký nepořádek a tyto překlady stejně nejsou dost kvalitní pro SEO.

Server

Na začátku se různě oslovení programátoři či správci serveru vždy pozastavovali nad tím, jak máme výkonu zbytečně mnoho. Tehdy virtuální server 2 CPU a 4GB RAM. Page down load 3 sekundy pro nativní jazyk a 6 sekund pro cizí jazyk. Pomalý web zdůvodňovali množstvím pluginů wordpress a jejich nižší kvalitou oproti eshopu na míru.

V roce 2022 jsme přešli k americkému poskytovatele virtálních serverů Digital Ocean se servery po celém světě. V našem případě Frankfurt nad Mohanem v Německu.

Výhoda Digital ocean č. 1

Nastavujete si výkon sami dle potřeb. V extrému můžete na noc kliknutím přepnout na málo výkonný server a ve špičce na dražší výkonnější. To nikdo nedělá. Spíše jde o možnost snadného trvalého posílení či snížení výkonu či krátce za účelem testování. Digital Ocean nabízí 3 druhy virtuálních procesorů.

Základní CPU AMD / Intel.

Premium AMD nebo Intel

„Dedikované virtuální“ AMD nebo Intel – nejdražší

Premium AMD je výkonnější proti základním AMD / Intel. Tyto jsou velmi dobré i oproti nejrychlejším a největších českých poskytovatelům virtuálních serverů. „Dedikovaný“ CPU je za téměř dvojnásobek prémiového CPU, ale navýšení rychlosti webu nepřinesl.

Konfigurace a náklady serveru na Digital Ocean:

aplikační server: 4 CPU AMD Premium / 8GB RAM, 50 GB SSD, databázový server 2 CPU AMD Premium / 4GB RAM, 25 GB SSD.

Velikost DB se pohybuje od 400 – 800MB. 106USD za měsíc. Správu řešíme půlročně a ad hoc za cca 200 EUR rok. První rok to za tvorbu, ladění serveru a některé úpravy software bylo 2000EUR.

Výsledek serveru bez cache na úrovni pluginů

Page download se v zásadě snížila na polovinu.

Page download 2s nativní jazyk, 3-4s cizí jazyk

Po vyčištění databáze DB specialistou: Page download 1,7s nativní jazyk a 2-4s cizí jazyk.

Tuzemští poskytovatelé rychlostně nestačí

Chtěli jsme záložní řešení v zemi našeho sídla. I největší z providerů hosistongu a VS naší zemi hostingu to použitelně neumí. Dalšímu providerovi jsem sdělili přesnou konfiguraci, aby nám zde postavili kopii virtuálního serveru. Dostali se dvojnásobně dlouhé na časy 3,5 a 6 sekund. Nejprve velmi trapně tvrdili, že jejich viditelně 2x pomalejší server je stejně rychlý. Osobně pak přiznali, že nové rychlejší CPU Digital Ocean nedokáží dorovnat vyšším počtem starších CPU.

Výhoda č. 2 – hlavní výhoda Digital Ocean

Rychlé procesory. Virtuální providěři bohužel ve svých prezentacích nespecifikují, jaká CPU užívají. Nabídka vždy zní 2CPU / 4 RAM apod.

Výhoda č. 3 – obnova všech webů a serveru jedním klikem za 2 minuty

Za 1 zálohu platíte 5% cenz serveru.Pokud máte nastaveny 4 automatické zálohy týdně, je to 20% navíc. Komplexní obnova serveru a všech webů jedním klikem za 2 minuty je něco úžasného.

Cache na úrovni wordpress pluginu

Cache udělá na rychlosti webu opravdu hodně. Webové cache mají několik vrstev. Na úrovni serveru je to na IT odborníky (OP Cache, Mem Cache, Varnish aj.). Cache svá úskalí. Např. můžete mít rozbitý web a nevíte o tom, neb se Vám zobrazuje zatím starší dobré verze webu uložená v cache.

Na úrovni pluginů jich máte na výběr moře. Hodně jich neumí mobilní verzi cache nebo to umí pomaleji než jiní. Např. Light Speed Cache potřebuje pro cache nezávislou síť CDN Network. Nejrozšířenější WP Fastest Cache umí mobilní verzi cache jen v licencované verzi s nekonečnými updaty za 59USD. Všichni doporučují WP Rocket – základní licence 59 USD na rok. Dále lze WP Rocker užívat bez nároku na update. Ač to je málokdy můj případ, zde musím sklopit uši. Hluboce se uklonit a zařadit se do nekonečné řady we bových „WP rocket trolů“ a fandů. Tip: Remove unused CSS se projeví až po pár minutách. Při změně CSS není třeba znovu odebírat nepoužité css, stačí jen Purge cahe).

Důvody:

1 Mobilní cache v Rocket Cache spolehlivě funguje i bez volby samostatné mobilní šablony.

2. Jedním klikem vyloučí jakýkoli plugin – nutnost pro každý lepší produktový filtr (tj. na bázi Ajax).

3. U minifikace a slučování HTML, CSS a JS prostě zaklikněte vše. Pokud Vám vyšší úroveň minifikace rozbíjí web, plugin to pozná a vadnou vobu sám deaktivuje!

4. Odstraní nepoužívané scripty a obsah blokující nahrání obsahu.

5. Mobilní výkon na Google Insights (více dále) Vám navýší o 10%. Nejvíc ze všech placených cache pluginů a stejně tak je to i v reálu.

6. Nakonec to nejdůležitější. Příklad: Na web jako první přijde návštěva v cizím jazyce např. Švéd. Mnoho cache pluginů, např. Fastest Cache, Vám s každým kliknutím zobrazí Švédskou verzi. To je pak konec … WP Rocket to má ošetřené. Podobně mohou zlobit převodníky měn.

Pluginy pro převod měn

Podobně jako WP Rocket je internetem promován předražený převodník měn Aelia Currency Switcher. Slibují cache řešení pro měny. To je ale lež. Měny se i se zapnutou cache načítají zpožděně přes Ajax a nebo bez Ajaxu, kdy jde pomalu celý web. Obojí je tragické. Fox currency switcher v kombinaci s WP Rocket to zvládá dobře za poloviční cenu cca 40 Eur. A to dokonce s neomezenými aktualizacemi! 1 cizí měnu je zcla zdarma – stáhnete to z wordpress depozitáře.

Produktový filtr na bázi ajax

Některé robustní produktové filtry jako např. Husky nejsou optimalizovány pro více jazykový web. Vytváří mnoho řetězců v databázi, jež zpomalí page download o další sekundu.

Dobrý filtr zdarma je WBW Product Filter, jenž ve free verzi dobře vypadá – umí toggle a skryje prázdné kategorie filtru.

Měření rychlosti mobilního webu

Sem jsme se dostali po 7 letech ladění designu a rychlosti mezinárodního sexshopu Extasica.com. Je to částečně třešeň na dortu. Ale nejde o samoúčelně honění score. Nápověda Google Insights Page Speed Vám pomůže opravit chyby rychlosti, SEO a zlepšit komfort uživatelů webu i dalšími doporučeními. Při použití fontů Google (např. ikony hvězdiček či košíku) velmi pomůže plugin OMGF. Stáhne fonty k Vám na server a není třeba pro ně sahat na internet s každým novým návštěvníkem. Pro radost můžete rychlost změřit i na testu GT Matrics nebo Pingdom Website Speed Test. Ty ale v zásadě měří desktopovou verzi webu.

Ještě jedno měření. Přidáno několik grafických prků. Výkon mobilní verze klesl na 91, ale pokud jsou 2 obrázky produktů na prvním místě malé velikosti, hodnocení výkonu poskočí na 99 :). Rychlost stránky je při tom stejná. Takže hodnocení výkonu Googlem má své rezervy. Tohle si ale prostě musíte vyfotit a vystavit.

Design Webu

Nedělejte to sami. Nechte si to udělat. Grafik to udělá třeba na 20 pokusů. Grafici též často pracují v týmu. Např. jeden udělá grafiku eshopu za 50 hodin. Další dva grafici dají tipy a odladí to každý v rozsahu deset hodin. Synergický efekt Vám za 70 hodin práce 3 grafiků dá ekvivalent práce 150 hodin jednoho grafika. Ale začátečník až na 1000 pokusů. Design jsem řešil a upravoval sám metodou samouk. Finanční náklady 0 – časové náklady brutální. S šablonou jsem strávil tisíce hodin. Nebyla to efektivní práce. Grafiku jsem dodělal až po 7 letech fungování eshopu.

Grafik může mít o povědomí o věcech, co normálně nezjistíte. Např. mobil s obrovským rozlišením 4K si slabozraký či důchodce može nastavit na větší ikony a zobrazení. Ale že pro web to znamené ekvivalent šířky obrazovky 250px jal na 20 let staré nokia, to Vás nenapadne. S tím při tvorbě webu napočítají žádné analytické nástroje. Po letech zjistíte, že jste měli po celou dobu rozbitý web pro důchoce a slobozraké. Na druhou stranu po letech máte 0 náklady na grafiku, design přesně dle Vašich představ, umíte jej jakkoli upravit.

Multilinguální web Vám design dále komplikuje rozdílnou délkou textů, zejména nadpisů, popisů funkcí a výpisů příspěvků.

Platební brána

Platebních bran je mnoho. Napojí Vás na karetní systémy a bankovní brány bank ve Vaší zemi, případně i v několik dalších zemích. Vybírejte dle výše poplatků. Ve střední Evropě – Česká Republika, Slovensko, Polsko, má patrně nejlepší poplatky Comgate. Napojí Vás na Visa, Master Card Maestro, Apple Pay, Google Pay a bankovní brány českých, polských a slovenských bank.

Doprava do zahraničí

To už dnes není problém. Dopravci se propojují a globalizují. Mnoho z nich nabídne doručování do celé EU. Např. Packeta.com, WEDO, GLS, DPD.

Multi měnové účty

Samostatný článek Multiměnové účty v ČR – srovnání.

Minimální roční náklady na tvorbu a údržbu mezinárodního eshopu

1200 EUR server včetně záloh (server týdenní, DB denní)

200 Eur údržba serveru

jednorázové počáteční Licence pluginů 400 Eur, roční obnovování 100 Eur – napojení na dopravce

Navržení a prvotní instalace, nastavení a odladění serveru 1000 Eur

Grafika jednorázově 3000 Eur včetně ikon, logo 1000 Eur

rezerva 20%

Autor: JUDr. Ing. Vladimír Koranda, Ph.D.

redaktor, majitel Extasica