{"id":785173,"date":"2023-11-14T09:09:30","date_gmt":"2023-11-14T15:09:30","guid":{"rendered":"https:\/\/blogging-techies.com\/sw\/bilder-tre-optimeringstips-for-att-gora-din-webbplats-snabbare\/"},"modified":"2023-11-14T09:09:30","modified_gmt":"2023-11-14T15:09:30","slug":"bilder-tre-optimeringstips-for-att-gora-din-webbplats-snabbare","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/sw\/bilder-tre-optimeringstips-for-att-gora-din-webbplats-snabbare\/","title":{"rendered":"Bilder: Tre optimeringstips f\u00f6r att g\u00f6ra din webbplats snabbare"},"content":{"rendered":"<p><strong>Folk gillar snabba webbplatser och det g\u00f6r Google ocks\u00e5.<\/strong><\/p>\n<p>Faktum \u00e4r att hastigheten p\u00e5 din webbplats \u00e4r en rankningsfaktor i Googles s\u00f6kmotorresultat.<\/p>\n<p>Om din webbplats laddas snabbt \u00e4r det mer sannolikt att den visas n\u00e4r folk s\u00f6ker efter ditt varum\u00e4rke.  Detta i kombination med vetskapen om att en snabb sajt ger en b\u00e4ttre anv\u00e4ndarupplevelse (UX) g\u00f6r att en snabbare hemsida kan leda till h\u00f6gre konverteringar.<\/p>\n<p>Om din webbplats inte laddas s\u00e5 snabbt som du skulle vilja, <strong>det \u00e4r mycket troligt att dina bilder \u00e4r skyldiga<\/strong>.<\/p>\n<p>H\u00e4r \u00e4r n\u00e5gra vanliga misstag m\u00e4nniskor g\u00f6r n\u00e4r det g\u00e4ller bildoptimering f\u00f6r sin webbplats.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Bilderna_ar_for_stora\"><\/span>Bilderna \u00e4r f\u00f6r stora<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>M\u00e5nga marknadsf\u00f6rare och publicister gillar att anv\u00e4nda stora, h\u00f6guppl\u00f6sta bilder p\u00e5 sin webbplats, eftersom de tror att dessa bilder kommer att ge en b\u00e4ttre anv\u00e4ndarupplevelse.<\/p>\n<p>Problemet \u00e4r att h\u00f6guppl\u00f6sta bilder vanligtvis har en mycket stor filstorlek och tar l\u00e5ng tid att ladda, speciellt n\u00e4r det finns flera bilder p\u00e5 samma webbsida.<\/p>\n<p>Vi har sett m\u00e5nga f\u00f6rlag ladda upp bilder i intervallet 2 Mb till 5 Mb i sina bloggar eller inneh\u00e5llsinl\u00e4gg.  Denna bildstorlek \u00e4r f\u00f6r stor f\u00f6r webben och \u00e4r ett av de vanligaste misstagen som saktar ner webbplatser.<\/p>\n<p>Om din bild \u00e4r st\u00f6rre \u00e4n 500kb kan n\u00e5got vara fel och bilden kan vara komprimerad.<\/p>\n<p>Innan du laddar upp nya bilder till din webbplats eller blogginl\u00e4gg, kom ih\u00e5g dessa tips:<\/p>\n<ul>\n<li>Innan du laddar upp n\u00e5gon bild, dubbelkolla filstorleken (h\u00f6gerklicka p\u00e5 bilden och v\u00e4lj egenskaper)<\/li>\n<li>H\u00e5ll bildfilstorlekar under 500 kb (och under 100 kb om m\u00f6jligt)<\/li>\n<li>Det finns m\u00e5nga onlineverktyg som kan hj\u00e4lpa dig att komprimera dina bilder till en mindre filstorlek, som io, CompressJPG och TinyPNG.<\/li>\n<li>Om du anv\u00e4nder Photoshop f\u00f6r att f\u00f6rbereda dina bilder, kontrollera m\u00e5tten och se till att DPI \u00e4r inst\u00e4lld p\u00e5 72 dpi (Bild\/Bildstorlek) och kom ih\u00e5g att &#8220;Spara f\u00f6r webben&#8221; f\u00f6r att styra den slutliga utdatafilens storlek.<\/li>\n<li>Konvertera dina bilder till l\u00e4mpliga filtyper.  I de flesta fall vill du anv\u00e4nda JPG.  Men om din bild anv\u00e4nder genomskinlighet (som en bild med en &#8220;transparent&#8221; bakgrund), m\u00e5ste du anv\u00e4nda PNG.  Det finns n\u00e5gra s\u00e4llsynta fall d\u00e4r GIF \u00e4r b\u00e4ttre, men n\u00e4r du \u00e4r os\u00e4ker, anv\u00e4nd alltid JPG.<\/li>\n<\/ul>\n<p>Ett specifikt exempel: Ett exklusivt varum\u00e4rke f\u00f6r designerskor online anv\u00e4nder m\u00e5nga stora banners och produktbilder p\u00e5 sin modesajt som reducerade Google PageSpeed-score till bara 20\/100.<\/p>\n<p>Vi skapade ett dagligt cron-jobb (automatiserad uppgift som k\u00f6rs dagligen) f\u00f6r att automatiskt \u00e4ndra storlek p\u00e5 stora bilder till mindre webbstandarder med bibeh\u00e5llen god kvalitet.<\/p>\n<p>I sk\u00e4rmdumpen nedan minskade vi filstorleken p\u00e5 en bild fr\u00e5n 1,3 MB till bara 142 KB.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-62620\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/10\/Imagenes-tres-consejos-de-optimizacion-para-ayudar-a-acelerar-su.png\" alt=\"metallics hemsida\" width=\"800\" height=\"168\"><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-62621\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/10\/1633306638_556_Imagenes-tres-consejos-de-optimizacion-para-ayudar-a-acelerar-su.png\" alt=\"minska sidhastigheten graf\" width=\"800\" height=\"149\"><\/p>\n<p>Genom att helt enkelt minska bildfilens storlek \u00f6kade vi Googles PageSpeed-po\u00e4ng fr\u00e5n 20\/100 till 58\/100.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Automatisk_bildskalning\"><\/span>Automatisk bildskalning<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Ett annat vanligt misstag med bilder \u00e4r att automatiskt skala stora bilder f\u00f6r att f\u00e5 dem att se mindre ut \u00e4n de verkligen \u00e4r.<\/p>\n<p>Att g\u00f6ra detta \u00e4r vanligtvis bekv\u00e4mare f\u00f6r utvecklare och inneh\u00e5llsskapare, men det kan verkligen sakta ner en webbplats.<\/p>\n<p>Till exempel kan en stor fotobanner i ett inl\u00e4gg ocks\u00e5 anv\u00e4ndas som en liten miniatyr p\u00e5 andra st\u00e4llen p\u00e5 sajten.<\/p>\n<p>Utvecklaren, ist\u00e4llet f\u00f6r att skapa flera versioner av bilden (till exempel 1000 \u00d7 425 f\u00f6r bannern och 64 \u00d7 64 f\u00f6r en sidospalt), anv\u00e4nder kod f\u00f6r att automatiskt skala samma stora bild f\u00f6r att visa som en liten miniatyr.  S\u00e5 en stor bild laddas in i on\u00f6dan.  Detta f\u00f6rkortar utvecklingstiden, men sidhastigheten betalar priset.<\/p>\n<p>F\u00f6r att inte tala om att automatiskt skalade bilder kan sluta se f\u00f6rvr\u00e4ngda ut eftersom de har str\u00e4ckts ut med kod.  Till exempel skalas miniatyren nedan automatiskt fr\u00e5n 1000 \u00d7 425 pixlar till 64 \u00d7 64 pixlar och f\u00f6rvr\u00e4ngs.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-62622\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/10\/1633306638_891_Imagenes-tres-consejos-de-optimizacion-para-ayudar-a-acelerar-su.png\" alt=\"f\u00f6rvr\u00e4ngd miniatyr\" width=\"800\" height=\"219\"><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-62623\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/10\/1633306639_339_Imagenes-tres-consejos-de-optimizacion-para-ayudar-a-acelerar-su.png\" alt=\"minska f\u00f6rvr\u00e4ngningen i miniatyrbilden\" width=\"800\" height=\"148\"><\/p>\n<p>H\u00e5ll utkik efter tillf\u00e4llen d\u00e5 samma bild anv\u00e4nds m\u00e5nga g\u00e5nger p\u00e5 din sida.  Om din webbplats kr\u00e4ver 12 olika storleksvarianter som anv\u00e4nds p\u00e5 12 platser (n\u00e5got som 25\u00d725, 40\u00d740, 200\u00d7200, 658\u00d7258, 56\u00d756, 64\u00d764, 92\u00d792, 150\u00d7156, 110 \u00d7 110 , 160 \u00d7 160 och 180 \u00d7 180) \u00e4r f\u00f6rmodligen f\u00f6r m\u00e5nga, och du kanske vill begr\u00e4nsa dem till f\u00e4rre \u00e4n fyra.<\/p>\n<p>Skapa sedan en separat bild f\u00f6r varje olika storlek och ladda upp bildversionen med r\u00e4tt storlek ist\u00e4llet f\u00f6r att automatiskt skala stora bilder f\u00f6r att f\u00e5 dem att se mindre ut \u00e4n de verkligen \u00e4r.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Brist_pa_bildcache\"><\/span>Brist p\u00e5 bildcache<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u00c4ven om du anv\u00e4nder korrekt bildkomprimering och visar korrekt skalade bilder, kan en sida med m\u00e5nga bilder ta l\u00e5ng tid att ladda.  Eftersom bilder \u00e4r statiskt inneh\u00e5ll \u00e4r ett bra s\u00e4tt att snabba upp laddningstiden att anv\u00e4nda CDN-cache.<\/p>\n<p>Cachning (uttalas &#8220;cache&#8221;) \u00e4r processen att lagra data i ett tempor\u00e4rt lagringsomr\u00e5de som kallas en cache.  Till exempel har du f\u00f6rmodligen m\u00e4rkt att en webbplats som du har bes\u00f6kt tidigare kommer att laddas snabbare \u00e4n en webbplats du aldrig har bes\u00f6kt.  Detta beror p\u00e5 att din dator cachar webbplatsen du bes\u00f6kte.<\/p>\n<p>Ett CDN (Content Delivery Network) \u00e4r ett n\u00e4tverk av servrar som levererar cachelagrat inneh\u00e5ll (som bilder) fr\u00e5n webbplatser till anv\u00e4ndare, baserat p\u00e5 anv\u00e4ndarens geografiska plats.<\/p>\n<p>Om du till exempel \u00e4r i New York och tittar p\u00e5 en webbplats fr\u00e5n Indien kan du ladda bilderna fr\u00e5n en server som faktiskt finns i New York, ist\u00e4llet f\u00f6r att ladda bilder fr\u00e5n den andra delen av v\u00e4rlden.<\/p>\n<p>En webbplats som anv\u00e4nder CDN-cache kan leverera bilder och annat statiskt inneh\u00e5ll mycket snabbare, speciellt under tider med h\u00f6g trafik, eftersom bilderna inte laddas direkt fr\u00e5n webbservern, utan fr\u00e5n en cachad server med mycket snabbare hastighet.<\/p>\n<p>Ut\u00f6ver detta hj\u00e4lper ett CDN dig ocks\u00e5 att betj\u00e4na fler bes\u00f6kare samtidigt.  Om din webbplats upplever en pl\u00f6tslig eller ov\u00e4ntad trafik\u00f6kning kan ett CDN h\u00e5lla din webbplats ig\u00e5ng effektivt.<\/p>\n<p><strong>Mike Le \u00e4r medgrundare och COO f\u00f6r CB\/I Digital, en New York-baserad digitalbyr\u00e5 och SEW-bidragsgivare.  Du kan f\u00e5 kontakt med Mike p\u00e5 Twitter eller LinkedIn.<\/strong><\/p>\n  <div id=\"ez-toc-container\" class=\"ez-toc-v2_0_88 ez-toc-wrap-center counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-toggle-hide-by-default' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/blogging-techies.com\/sw\/bilder-tre-optimeringstips-for-att-gora-din-webbplats-snabbare\/#Bilderna_ar_for_stora\" >Bilderna \u00e4r f\u00f6r stora<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/blogging-techies.com\/sw\/bilder-tre-optimeringstips-for-att-gora-din-webbplats-snabbare\/#Automatisk_bildskalning\" >Automatisk bildskalning<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/blogging-techies.com\/sw\/bilder-tre-optimeringstips-for-att-gora-din-webbplats-snabbare\/#Brist_pa_bildcache\" >Brist p\u00e5 bildcache<\/a><\/li><\/ul><\/nav><\/div>\n ","protected":false},"excerpt":{"rendered":"<p>Folk gillar snabba webbplatser och det g\u00f6r Google ocks\u00e5. Faktum \u00e4r att hastigheten p\u00e5 din webbplats \u00e4r en rankningsfaktor i Googles s\u00f6kmotorresultat. Om din webbplats laddas snabbt \u00e4r det mer sannolikt att den visas n\u00e4r folk s\u00f6ker efter ditt varum\u00e4rke. Detta i kombination med vetskapen om att en snabb sajt ger en b\u00e4ttre anv\u00e4ndarupplevelse (UX) [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":785174,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/blogging-techies.com\/wp-content\/uploads\/2023\/06\/4.jpg","fifu_image_alt":"","footnotes":""},"categories":[5],"tags":[],"class_list":["post-785173","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bloggar"],"_links":{"self":[{"href":"https:\/\/blogging-techies.com\/sw\/wp-json\/wp\/v2\/posts\/785173","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogging-techies.com\/sw\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogging-techies.com\/sw\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/sw\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/sw\/wp-json\/wp\/v2\/comments?post=785173"}],"version-history":[{"count":0,"href":"https:\/\/blogging-techies.com\/sw\/wp-json\/wp\/v2\/posts\/785173\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/sw\/wp-json\/wp\/v2\/media\/785174"}],"wp:attachment":[{"href":"https:\/\/blogging-techies.com\/sw\/wp-json\/wp\/v2\/media?parent=785173"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogging-techies.com\/sw\/wp-json\/wp\/v2\/categories?post=785173"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogging-techies.com\/sw\/wp-json\/wp\/v2\/tags?post=785173"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}