Mobiloptimering af Joomla og gennemgang af de grundlæggende principper for teknisk optimering. Fra JUG Sorø månedsmøde d. 4. juni 2015.

1. Mobiloptimering
JUG Sorø, Juni 2015
CGOnline.dk /v Janich Rasmussen

2. Aftenens program
• Hvad er ”mobiloptimering”?
• Teorien bag
– Media queries?
– Ressourcebrug
• Eksempler
– Dårligt eksempler
– Godt eksempler
• Værktøjer i praksis
– Demo af Google Insights
04/06 – 2015Mobiloptimering af Joomla

3. Hvad er ”mobiloptimering”?
04/06 – 2015Mobiloptimering af Joomla

4. Hvad er mobiloptimering?
• Responsivitet
– Websitet tilpasser sig visning på variabel enhed
• Billedstørrelser
– Store billeder = nogo på lille forbindelse
• Javascript eksekvering
– Enheder eksekverer ikke ens
• CSS rendering
– Enheder renderer ikke ens
• Flash / java == nogo!
04/06 – 2015Mobiloptimering af Joomla

5. Mobiloptimering er så meget mere
• Planlægning af designet
– Hvordan skal tingene ombrydes?
• Simplificering af funktioner
– Hvordan virker din popup/modal? Eller slideshowet?
• Reducering af tekst
– Vi læser ikke. Sådan er det bare!
• Sammenhæng med desktop sitet
– Kan man stadig besøge det eller diktere enheden visningen 100%?
• Teknisk optimering
– Optimering af JS / CSS? Andet?
– Gzip? Cache? Headers?
04/06 – 2015Mobiloptimering af Joomla

6. 04/06 – 2015Mobiloptimering af Joomla

7. Mobiloptimering (og SEO) starter med teknikken
04/06 – 2015Mobiloptimering af Joomla

8. 04/06 – 2015Mobiloptimering af Joomla

9. Teknikken er vigtig
• Cliche:
– Min webhost er langsom
1. Nej – Du har proppet dit site med for mange udvidelser.
2. Nej – Du har proppet dit site med udvidelser der connecter til en langsom
”licens” server for hver eneste sidevisning.
3. Ja - Selvfølgelig er den det. Skal vi ikke hoste den?
04/06 – 2015Mobiloptimering af Joomla

10. Teknikken er vigtig
• Ved du hvad dit tema laver?
• Ved du hvad dine udvidelser laver?
• Hvor mange [ javascripts | css | billeder ] tilføjer de?
Og hvornår?
04/06 – 2015Mobiloptimering af Joomla

11. ‘Responsive design’ aka. Media queries
• ”Automatisk”
tilpasning til:
– Telefon
– Smartphone
– Tablets
– Notebooks
– Desktops
– Tv
– Større enheder?
04/06 – 2015Mobiloptimering af Joomla

12. ‘Responsive design’ aka. Media Queries
04/06 – 2015Mobiloptimering af Joomla
• <meta name=”viewport" content=”width=device-width, initial-scale=1" />
• <link rel="stylesheet" media=”all" href=”default.css" />
• <link rel="stylesheet" media=”desktop" href=”desktop.css" />
• <link rel="stylesheet" media="only screen and (color)" href=”colors.css" />
• { ... }
• @media (min-width: 700px) { ... }
• @media (min-width: 700px) and (orientation: landscape) { ... }
• @media (min-width: 700px), tv and (orientation: landscape) { ... }
• @media (min-width: 700px), handheld and (orientation: landscape) { ... }
• Go crazy: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

13. Less is more
04/06 – 2015Mobiloptimering af Joomla
Færre
requests
Hurtigere
svar
Mere
caching

14. • Low level
– Combine
– Minify
– Scale
– Cache
– Gzip
– Htaccess magic
• Helpers
– Lazy load
– Modernizr
– jQuery plugins
– Bootstrap
Grundprincipper
04/06 – 2015Mobiloptimering af Joomla

15. Dårligt eksempel
04/06 – 2015Mobiloptimering af Joomla

16. 04/06 – 2015Mobiloptimering af Joomla

17. 04/06 – 2015Mobiloptimering af Joomla

18. 04/06 – 2015Mobiloptimering af Joomla

19. 04/06 – 2015Mobiloptimering af Joomla

20. 04/06 – 2015Mobiloptimering af Joomla

21. Opsummering
04/06 – 2015Mobiloptimering af Joomla
88 requests
1.800 kb. = 1,8 mb. = 3.5 sek.

22. Lille plus…
(De fleste ressourcer caches dog)
04/06 – 2015Mobiloptimering af Joomla

23. Godt eksempel
04/06 – 2015Mobiloptimering af Joomla

24. Godt eksempel?
(ikke perfekt, men bedre)
04/06 – 2015Mobiloptimering af Joomla

25. Forside
Underside
04/06 – 2015Mobiloptimering af Joomla

26. (eta 14 dage)
04/06 – 2015Mobiloptimering af Joomla

27. Demo af Google Insights
04/06 – 2015Mobiloptimering af Joomla

28. Diverse forslag til udvidelser
• Joomla
– Site Optimisation (eta 14 dage)
– JCH Optimize (betalingsplugin)
• Browser
– Y-slow
– Webdeveloper
04/06 – 2015Mobiloptimering af Joomla

29. Spørgsmål?
04/06 – 2015Mobiloptimering af Joomla

30. Janich Rasmussen
www.cgonline.dk
info@cgonline.dkSlides: http://www.cgonline.dk/jmobil