Mobiloptimering - JUG Sorø
Transcript of Mobiloptimering - JUG Sorø
Mobiloptimering
JUG Sorø, Juni 2015CGOnline.dk /v Janich Rasmussen
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
Hvad er ”mobiloptimering”?
04/06 – 2015Mobiloptimering af Joomla
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
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
04/06 – 2015Mobiloptimering af Joomla
Mobiloptimering (og SEO) starter med teknikken
04/06 – 2015Mobiloptimering af Joomla
04/06 – 2015Mobiloptimering af Joomla
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
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
‘Responsive design’ aka. Media queries
• ”Automatisk”
tilpasning til:
– Telefon
– Smartphone
– Tablets
– Notebooks
– Desktops
– Tv
– Større enheder?
04/06 – 2015Mobiloptimering af Joomla
‘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
Less is more
04/06 – 2015Mobiloptimering af Joomla
Færre
requests
Hurtigere
svar
Mere
caching
• Low level– Combine
– Minify
– Scale
– Cache
– Gzip
– Htaccess magic
• Helpers– Lazy load
– Modernizr
– jQuery plugins
– Bootstrap
Grundprincipper
04/06 – 2015Mobiloptimering af Joomla
Dårligt eksempel
04/06 – 2015Mobiloptimering af Joomla
04/06 – 2015Mobiloptimering af Joomla
04/06 – 2015Mobiloptimering af Joomla
04/06 – 2015Mobiloptimering af Joomla
04/06 – 2015Mobiloptimering af Joomla
04/06 – 2015Mobiloptimering af Joomla
Opsummering
04/06 – 2015Mobiloptimering af Joomla
88 requests
1.800 kb. = 1,8 mb. = 3.5 sek.
Lille plus…
(De fleste ressourcer caches dog)
04/06 – 2015Mobiloptimering af Joomla
Godt eksempel
04/06 – 2015Mobiloptimering af Joomla
Godt eksempel?
(ikke perfekt, men bedre)
04/06 – 2015Mobiloptimering af Joomla
Forside
Underside
04/06 – 2015Mobiloptimering af Joomla
(eta 14 dage)
04/06 – 2015Mobiloptimering af Joomla
Demo af Google Insights
04/06 – 2015Mobiloptimering af Joomla
Diverse forslag til udvidelser
• Joomla
– Site Optimisation (eta 14 dage)
– JCH Optimize (betalingsplugin)
• Browser
– Y-slow
– Webdeveloper
04/06 – 2015Mobiloptimering af Joomla
Spørgsmål?
04/06 – 2015Mobiloptimering af Joomla