Font Awesome er fedt

Font Awesome er ikke en font, Font Awesome er en samling af ikoner, som man bruger ligesom en font.
Men idéen er at man tilføjer en lille stump kode på sin side, også tilføjer de ikoner man skal bruge, der hvor man skal bruge dem. Du kan erstatte alle de små billeder som ligger på din side, fx den ved søgeknappen, den ved indkøbkurven osv for at gøre din side hurtigere.
På Mackabler.dk erstattede vi nok 10 små billeder, med font-awesome, det betyder at vores kunder skal downloade 10 færre billeder og de skal kun downloade en enkelt font i stedet for. font-awesome fylder kun 27KB, hvorimod dine billeder kan fylde samlet meget mere, men pladsen betyder ikke meget, det betyder mere at dine kunder får færre filer at downloade, hvilket betyder en hurtigere load af din side, det har jeg skrevet om tidligere her.

Der er masser af forskellige ikoner, så du har noget at vælge imellem, fx disse:

Font Awesome kommer i alle størrelser

Du kan selv finde Awesome fonts ikoner her:
Du kan selv bestemme hvor store dine ikoner skal være, da de er lavet i vector grafik er der ikke nogen grænser.
Font Awesome er retina, helt uden du skal gøre noget, og der er ikke noget komprimerning eller dårlig opløsning nogen sinde igen, på nogen enheder.


Hvordan virker det?

  1. Du tilføjer fonten til din side, enten fra awesome-fonts side ellers kan du ligge den på din egen server(det sidste er nok hurtigst).
    Koden er:
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  2. Så tilføjer du det ikon du gerne vil have tilføjet: fx denne: med koden: <i class="fa fa-pied-piper-alt"></i>
  3. Så sætter du størrelsen enten med css og font-size ellers med at tilføje class’en i HTML fa-4x for 4x størrelse, fa-8x for 8x størrelsen osv.
  4. Dine kunder får nu ikonerne på din side hurtigere og de er altid i rigtig opløsning, uden komprimering.

Brug srcset til at lave retina billeder på din side

Der er først lige nogen begreber som skal på plads.

Retina billeder er billeder i 2x opløsning, jeg kalder det retina fordi Apple gør, men idéen er den samme om det er på en Windows acer eller en Apple Mac.

På nettet viser man billeder i fx 262 x 262px (som nedenstående), dette optager noget plads på skærmen, den plads på en retina skærm svare til (262*2) 524px, derfor sætter man et billede i 4x størrelsen ind(2x på hver side) også bliver det vist skarp på en retina skærm – hvor imod det ser sløret ud på en retina skærm i den normale opløsning.

Der er nogen problemer

Sådan noget her kan enten klares på server siden eller på folks  PC’er.

På server siden virker det ikke rigtigt, fordi din server ikke ved hvilken skærm dine brugere har, og du vil helst ikke sende 4x for meget billede til alle de brugere som ikke kan bruge det til noget, google kan heller ikke lide at dine billeder er for store.

Derfor skal det klares på klient siden. – eller hos dine brugere.
Dette klarede man som regel med Javascript, altså man skrev et meget lille script som erstattede alle billederne med dem som er til Retina, hvis siden skulle vises på en retina skærm. Javascript bliver altid loadet til sidst, så det betyder at alle dine brugere skal hente alle billeder også hente dem igen i retina opløsning, det dumt og er spild af din server og folks pc’er.

Det er her “srcset” kommer ind, det er noget forholdvist nyt og ikke særligt mange bruger det endnu, WordPress er dog lige begyndt at bruge det.

Lige nu bruger man “src” til at definere hvor et billede er, som dette: src=”/img/storfedko.jpg”  srcset kan erstatte src, så man skriver: srcset=”/img/storfedko.jpg”, eller hvis man vil have en anden version til retina skærme skriver man det sådan:

srcset=”/img/storfedko.jpg x1 , /img/storfedko-retina.jpg x2″

Så kommer den gamle parnoide mand op i mig, fordi selv om alle moderne browsere understøtter srcset, så er der mange gamle som ikke gør, derfor kan men ligeså godt beholde det gamle “src”, som gamle browsere kan bruge. På den måde er der det gamle tag til de gamle også bliver det overskrevet af det nye hvis brugerens browser understøtter det.
Hvis man bruger srcset på den måde downloader browseren kun de rigtige billeder, google får de rigtige billeder også, så de ikke brokker sig over for store billeder.

Du må selv gætte på hvilken er retina udgaven og hvilken som ikke er.

ikretinaretina

 

srcset kan også en masse andre smarte ting, fx give billeder i en bestemt størrelse til bestemte telefoner, pc’er eller tablets – der er faktisk ikke nogen grænse. tagget x3 eller x4 virker også hvis skærme kommer med endnu mere opløsning i fremtiden.

Jule trafik?

Julen betyder rigtigt meget salg for mange webshops. Og selvfølglig også min.

Men Julen betyder også en masse ekstra trafik, faktisk er det rigtigt meget det der sker for webshops i julen, trafikken stiger enormt men salget følger ikke med.

Neden for har jeg en graf over vores server’s CPU forbrug, som topper den 22. dec. Det var den sidste dag vi kunne nå ud med pakker til kunderne.
Selv om CPU-brug ikke helt hænger sammen med trafik, så viser det her hvordan det gør.

juletrafik

Det giver også mening, eftersom alle dine kunder er ude på tilbudsjagt.

Men pointen er at du skal sikre dig at din server kan klare 2x eller 3x trafik i julen, fordi det kan betyde meget mindre salg hvis din server halter efter, bliver langsommere eller går helt ned.

Huske cache, det betyder meget mindre CPU forbrug især når du har mange besøg. Ellers er det altid en god idé at optimere sin side 🙂
Des hurtigere din side loader des kortere tid bruger din server 😉

Vildt hurtig hosting?

Det er vigtigt at have en hurtig side, særligt til en webshop, lange loadings tider betyder som regel at kunderne bliver utålmodige og forsvinder hen på en af de andre tabs de har åbnet sammen med din side.
Amazon har udgivet mange af disse tests og de viser meget konkret at langsommere sider giver markant mindre salg. Amazon siger at 0,1sek mere load betyder 1% mindre salg.

Det er svært få hurtig hosting i Danmark. Sådan er det bare. i sær hvis du tror at hosting koster imellem 5-20kr/md. Hvis du lever af din side, og derfor tjener flere penge jo hurtigere din side er, er det vigtigt med en ordentlig host.

Der er nogen stykker som kan klare opgaven her i Danmark zitcom.dk, netgroup også er det en masse i udlandet. I danmark giver man hurtigt 1000kr/md for en host (VPS), hvorimod mere konkurrence i udlandet betyder at priserne her er lavere. Google har deres, Amazon har deres og det jeg bruger er DigitalOcean.

Først skal vi lige slå fast hvordan vi tester hastighed. Du kan teste det på din egen computer, det er også fint, men du skal være opmærksom på at din browser tager en masse backup og at dit internet ikke altid er lige hurtigt. Derfor bruger jeg Pingdom tools, jeg sætter den altid på sverige, fordi den server er tættest på. Denne viser ca. altid det samme, hvilket er godt til at teste denne slags ting.

På digital ocean kan du få din egen VPS, visuelle private server for ned til 5$/md, jeg satte en helt normal WordPress side op på sådan en, og fik en load på 0,3sek.
Til sammenligning klare min gigahost server (til 29kr/md) det på 2,1sek.

CRxogVmW0AAIDLf

Så er det min webshop. Den køre Prestashop, og det er ikke kendt som et særligt hurtigt CMS. Det er fyldt med PHP scripts, og selv om du kan sætte cache på, så virker det ikke optimalt, da deres cache ikke er så cache’y.

Vi har brugt rigtigt meget tid på at optimere loadtiden i vores design, hvilket har gjort at den loader på kun 0,5sek. Dette er den lidt mere ambitiøse 20$/md(140,84 kr) version. Det betyder flere salg og at serveren kan klare mange flere besøg.

pingdom-mackabler

Vi har ligget nogen forskellige steder, blandt andet hos zitcom(ca. 140kr/md), her loadede vi på 1,5sek, vi har også ligget på en VPS fra Unoeuro(ca. 510kr/md) her loadede vi ca. på lidt over 2sek også har vi ligget på en prohost hos Meebox(99kr/md) her loadede vi på ca. 4sek.

Cloud hosting taler alle om

Cloud hosting betyder ikke rigtigt noget, da hosting af websider ikke kan være andre steder end i en cloud, men det seje der er kommet fra med Cloud-bøjlen er servere som kan opgraderes og nedgraderes med et enkelt tryk.

Med DigitalOcean kan vi opgradere til 12 kerner og 32gb ram om et par min, fra 2 kerner og 2gb ram, hvis vi bliver ramt af for meget trafik. Vi kan også nedgraderer igen – også betaler vi kun for det vi bruger.

Med DigitalOcean kan du også lave en ny server, fx en kopi af den du har i forvejen, på et par min, DigitalOcean siger 60sek, men det passer ikke, særligt hvis du laver serveren ud fra en kopi af din online server. Det tager os ca. 5min.
På den måde kan du teste noget, med en nøjagtig kopi af din server, og hvis det virker kan du skifte til den nye server på få minutter.

Der er en hage ved det hele

Du skal selv stå for serveren, du skal selv opdatere PHP, og selv installere pyton eller Mysql hvis du har brug for det. Det kan man heldigvis betale sig fra, men bagefter er der, som med alt IT, altid noget som skal rettes. Det koster også penge.
Jeg tror man skal have lidt teknisk forståelse og det hjælper helt sikkert at have løst en masse server problemer tidligere 🙂

Hvordan gør du helt praktisk ?

Hvis du har mod på at starte dette, så kan du ligeså godt teste det, DigitalOcean giver 10$ gratis prøve tid, og på upwork (tidligere odesk) kan du hurtigt finde en meget billig sysadmin til at sætte din server op.
Du kan ligeså godt starte med den billigeste 5$/md server, også opgradere i takt med at enten trafik stiger eller du får mere blod på tanden, det kan klares uden nogen teknisk indsigt, på 2min.

create-droplet

Efter det hele er opsat kan du teste hastighederne, og se hvor meget der er at vinde, selvfølgelig stadig på et test domæne.
Din side er sikkert blevet dobbelt så hurtig hvis du kommer fra en god dansk host, til 100kr/md, eller 8x hurtigere hvis du kommer fra meebox, også skal du ansætte en dansker til at gøre din server sikker og til at stå for løbende forbedringer, dette finder du let med Amino freelancer. Nu er du klar til at opsige dit gamle, og skifte server.

Alt i alt er vi tilfredse med vores DigitalOcean server. Amazon og Google er helt sikkert også fine, men dem har jeg ikke prøvet og jeg får en lille pose penge tilføjet til min konto, hvis du køber digital ocean med et af mine links, derfor linker jeg til dem.

Du kan også bare ignorer alt det her og få dig en shoporama shop, de er vildt hurtige, og du du skal hverken have fat i freelancere eller UpWork for at få den til at blive hurtigere 🙂

Sådan forholder du dig i et DDOS angreb

Du kan læse om hvad et DDOS angreb er her: Wiki DDOS

744px-Stachledraht_DDos_Attack.svgLige hurtigt er et DDOS angreb at din server bliver besøgt flere gange end den kan håndtere, det betyder at en eller flere dele i netværk/server/kabler bliver lukket ned så din side ikke virker.
Måden man forsvare sig imod et DDOS er at man filtre de besøgende og filtre dem fra som ikke er rigtige, men dette kræver stadig at netværk/server/kablerne er store nok til at håndtere trafikken, også er vi tilbage til det første problem. Derfor er det stort set umuligt at forsvare sig imod et DDOS, med mindre det er meget småt.

Man kan ikke rigtigt forsvare sig imod et DDOS, med mindre man har planlagt rigtigt og bruger mange tusinder kr på hosting.

Vi blev i sidste weekend udsat for et DDOS, det var stort, så stort at hele hostens server lukkede ned og alle sider som var på samme server var lukket samtidig.
Man kan ikke rigtigt måle DDOS størrelser fordi man kun kan måle op til maks for ens servere, også holder den op med at måle, vores første angreb var på 150 000 forbindelser i sekundet og det andet var på flere milioner. Anden gang lå vi på en server med bedre beskyttelse.

Her er en liste over hvad man skal gøre hvis man bliver udsat for et DDOS:

  1. Forhold dig roligt
  2. LAD VÆR MED AT BETALE!
  3. LAD VÆR MED AT SVARE DEM!
  4. Lad vær med at fortælle din host at du er under angreb.
  5. Brug Cloudflare

1. Det koster penge at være ned, og det er noget man må tage med, men der er desværre ikke andre muligheder.

2. Hvis du betaler, kommer du til at betale for evigt, det er stort set gratis for hackerne at lave et DDOS og hvis du har bevist du har råd, så har du også råd om en uge eller en måned.

3. Jeg svarede, og jeg tror det havde været mindre sjovt for dem, hvis jeg havde holdt min mund.

4. Det her er vigtigt, fordi det var den fejl jeg lavede, hvis du fortæller du er under angreb så bliver du højest sandsynligt smidt ud, også står du og skal skifte server samtidig med at du skal klare alt det andet.
Webhosten skal nok finde ud af det selv.

5. Cloudflare hjalp ikke os, men det hjælper imod 80% af alle angreb. Opsætningen er super enkel, bare sørg for at du ikke udgiver dine ip adresser der inde og at alt køre igennem Cloudflare. Du kan se en Opsætningsguide til Cloudflare her, du får også Gratis SSL med Cloudflare.

Her er min historie med DDOS.

  • Lørdag morgen gik siden ned, kort for inden havde vi modtaget emails fra en russer som fortalte os at vi var under DDOS angreb, Cloudflare ville ikke hjælpe og vi skulle betale 15 BTC (25.000kr) for at det stoppede.
  • Jeg svarede: at vi ingen penge havde.
  • Jeg aktiveret cloudflare
  • Jeg fik en mail om at Cloudflare ikke ville hjælpe, det var også rigtigt.
  • jeg skrev til vores webhost, han havde ingen idé, han fortalte mig at han først kunne hjælpe mandag, da den PC han skulle bruge var på arbejdet.
  • DDOS’et hold et pause på 15min lørdag, her omdirigeret de trafikken så den ramte hosten direkte, så alle hostens websider gik ned.
  • Så tog webhosten sig samme og arbejdede på en løsning hele natten.
  • Webhosten foreslog vi kom over på en ny server søndag, men først mandag, denne server skulle være DDOS sikret, igennem en af danmarks største hosts.
  • Søndag aften stoppede DDOS’et, noget videre.
  • Mandag kom vi over på den nye host, de blev lagt ned imens vi uploadede siden til den nye server. Dette fik hosten til at tro at vores email var hacket, og det var grunden til at den nye ip blev lagt ned før vi var online. Jeg tvivler, da emailen indenholder FTP, mysql oplysninger, paypal login, epay login, sikkert også netbank login osv, og dette kan være meget mere lukrativt end DDOS-ransom note.
  • Vi var sammenlagt nede i 10min på den nye server, vi flyttede tilbage til vores trofaste, men lidt langsomme, Gigahost løsning som vi bruger i dag. Den koster under en 10 del men er også 1/2 så hurtig.
  • Og vi har ikke været nede siden.
  • Vi er ikke velkommen hos den host vi ellers stadig betaler for.

 

Vi fik et tilbud efter 24 timers nede tid. DDOS manden gav mig 50% rabat, og et tilbud om at sikre vores server imod DDOS for kun $50/md 🙂 Han begrundede rabatten med at kan godt kunne lide mig, og at jeg havde svaret 🙂

Nu har vi været oppe på den lille host i en uge, alt er godt, og vi har ikke oplevet nogen nedgang. Det hele har kostet os under 20 000kr men en masse besvær.
Og gode råd om hosts ? Jo større jo bedre 😉 Selv om vores host viste alt om prestashop, så viste de nøjagtigt intet om DDOS.
Vi havde skiftet host uanset hvad, fordi forløbet simpelhen var latterligt uprofessionelt, men det havde været rart at ligge på den hurtige server indtil vi fandt en ny.

Opsætning af CloudFlare

Jeg har tidligere skrevet om hvorfor man skal vælge CloudFlare, det kan du læse der.

Her er en guide til hvordan man sætter det op og hvordan man får SSL til at virke, jeg bruger mit domæne Bagnefoto.dk, fordi det ikke endnu er på SSL eller Cloudflare.

Det er vigtigt at vide at du ikke skifter din hosting ud, så lad endelig vær med at droppe den.

Guiden til at sætte et domæne op, med SSL og Cloudflare:

1. Opret en konto hos Cloudflare:

cloudflare

2. Tilføj dit site til Cloudflare

Dette gøre ved at trykke “add site” fra Dashboardet når du lige er logget ind. Hvorefter du trykker “Begin Scan”.

scanning-med-cloudflare

3. Så skal du tjekke dine DNS indstillinger

Cloudflare gennemgår de indstillinger den kan finde, så side delen virker helt sikkert med det samme, men hvad angår emails og andre ting du selv har tilføjet kan det være de ikke kommer med, sammenligne den med de indstillinger du har på din nuværende DNS udbyder. (Jeg har gjort dette med 20 domæner nu, og har aldrig skulle ændre noget).

scanning-færdig-med-cloudflare

4. Vælg den plan og få navne server indstillinger

Vælg den gratis plan med det samme, du kan altid opgradere på 1min senere, og hvis gratis er godt nok, så kan du lige så godt nøjes med det.

Bagefter får du navne server indstillinger, dem skal du skrive ind i DK-hostmaster, hvis du har et .dk domæne, og hvis du har et andet skal du skrive dem ind i domæne håndteringen det sted du købte dit domæne.

navneservere-cloudflare

5. Skift navne server

Jeg går ud fra de fleste her har et dk domæne, så jeg viser hvordan man gør hos Dk-hostmaster.

Hos DK-hostmaster skal du logge ind med din bruger og kodeord.

På hoved menuen skal du ind på: Redeleger domænenavn

Her skriver du dit domæne ind også det første felt fra Cloudflare, som i mit tilfælde var ‘abby.ns.cloudflare.com’.

Derefter trykker du videre, og bekræfter.
Dk-hostmaster tager tit langt tid om at virke, så det kan godt være at du skal holde en times pause også forsøge igen.
Efter du har bekræftet kan der også let gå 3-4 timer før det bliver vist rigtigt.
For at være sikker på at du får cloudflare versionen, så brug en ny browser eller forsøg i inkognito mode samt forsøg med “rigtig refresh”.
cmd+r er normal refresh, mens rigtig refresh er cmd+shift+r.

dk-hostmaster

6. Så virker Cloudflare

Hvis cloudflare siger der ikke er nogen fejl, så virker alt nu.

cloudflare-virker
7. Nu skal vi have SSL på domænet

Det virker allerede, med standard indstillingerne. Men lige for at tjekke, du skal ind i dashboadet hvor du kan se alle dine domæner, også trykke på det domæne du vil have SSL på. Her skal SSL stå til “Flexible” som neden for:

cloudflare-backend

8. WordPress plugins

Nu skal du ind i din WordPress backend og installere et par plugins.

A. Du skal bruge et til at rette en redirect loop som WordPress laver, det hedder: CloudFlare Flexible SSL hvis det ikke virker så brug: WordPress HTTPS (SSL)

B. Test om dit domæne virker med SSL? Sæt https:// foran dit domæne og se om den laver en fejl. Hvis den laver en Cloudflare fejl, så har jeg oplevet at det var fordi SSL stod til “Full” og ikke “Flexible”. Det er Ok at den lave en gul fejl, det klare vi senere.

C. Så skal du bruge et plugin til at sikre dig at alle bliver sendt videre til SSL i stedet for den normale kedelige http:// -version:

Jeg bruger WP Force SSL men på et domæne hvor dette ikke virker bruger jeg: Force SSL.

D. Du skal nu ind i “indstillinger” og “Generelle indstillinger”, hvor du finder et felt til din domæne navn, her skal du ændre feltet til https://xxx.dk i stedet for http://xxx.dk. Dette skal du kun gøre hvis domænet faktisk virker med SSL (test B), ellers virker dit domæne ikke mere, og du skal ind i databasen for at ændre dette tilbage.

Dette behøver du faktisk ikke, og det gør det svært at rette SSL fejl, så lad vær.

wp-ssl-indstillinger

9. Nu kommer SSL problemerne

Særligt Chrome har et kæmpe problem med SSL problemer, de, som de eneste, kræver at man henter alt igennem SSL, før du får en grøn lås.

Men det er bare at komme igang.

SSL-problemer

10. Sådan løser du SSL problemerne

Det er meget enkelt, du skal ind i Chrome, ind på din side også skal du ind i udvikler værktøjet. Du kan finde det under “vis”, “udvikler” også “udviklerværktøjer” i menuen eller bruge genvejen: alt+cmd+i.

Under fanen “Console” kan du se de fleste af de fejl din side laver, fx SSL fejl.

På billedet nede for, opstillet som det tydeligt er, kan du se en enkelt SSL fejl, Chrome vil have at billedet “857847_1015180676527101…” ikke bliver hentet med https men bare normalt http, så alt du skal gøre at at rette linket til billedet til enten:
https://bagnegaard.dk/wp-content/uploads/2015/02/857847_1….jpg
Eller
/wp-content/uploads/2015/02/857847_1….jpg

Også bliver alting grønt igen.

Du skal gøre dette på alle dine sider, hele vejen igennem dit website, og det kan godt tage tid, det kan nok betale sig at lave en lille script til MySQL databasen som kan gøre det for dig, hvis du har mange indlæg.

Det er meget normalt at en side har 5-10 SSL fejl, men det er bare at gå igang.

ssl-fejl

11. Også virker alt.

Så virker det

PHP? Jeg hader servere

I dag har jeg siddet 2 time og forsøgt at opdatere PHP på vores server til mackabler.dk – det er svært, særligt når man intet ved om servere.

Problemet er at der ikke er nogen guides online med det – og dem der er er altid lige lidt forkerte. Vi bruger Plesk 11.5 og CenOS 6.3 og PHP 5.3 – og alle guides’ne er til nyere eller ældre versioner af det en eller flere dele.

Vi fandt gennemgik et par af dem, en fra plesk’s forum, som antager at man ved alt om servere i forvejen og en fra en meget habil mand, men det virkede uheldigvis ikke.

Det hele endte med at vi kom til at ødelægge noget – så backup’en skulle i brug.

MySQL serveren kunne ikke starte efter backup – men dette er heldigvis et meget velkendt fejl, så der er meget hjælp til det. Det tog kun en enkelt svedetur – også 10min at få det hele op igen.

Men 2,5 timer senere? Er serveren nøjagtig som den var tidligere. Jonathan og jeg er lidt klogere, men det har ikke været tiden værd 🙂

 

Sådan er det nogen gange. I morgen ansatter vi en til det.