{"id":247526,"date":"2022-12-31T09:35:00","date_gmt":"2022-12-31T06:35:00","guid":{"rendered":"https:\/\/inform.click\/reageerivate-veebisaitide-toimimine\/"},"modified":"2022-12-31T09:35:00","modified_gmt":"2022-12-31T06:35:00","slug":"reageerivate-veebisaitide-toimimine","status":"publish","type":"post","link":"https:\/\/inform.click\/et\/reageerivate-veebisaitide-toimimine\/","title":{"rendered":"Reageerivate veebisaitide toimimine"},"content":{"rendered":"

\n Oli aeg, mil sai enesekindlalt vahet teha lauaarvuti veebilehe ja mobiilse veebilehe vahel. Tegelikult nii palju, et t\u00f6\u00f6lauasaitide mobiilseadmete jaoks muutmise \u00fcmber kasvas terve t\u00f6\u00f6stusharu.\n<\/p>\n

\n M\u00f5nda aega polnud te keegi, kui teil polnud eraldi domeenis eraldi mobiilisaiti. Siis hakkasid asjad muutuma.\n<\/p>\n

\n Mobiiliekraanid on tundmatuseni paranenud. Nii ka mobiilibrauserid. Tahvelarvutid viskasid v\u00f5rrandisse veel \u00fche elemendi. 4G tuli kaasa. Retina ekraanid pakkusid l\u00f5ppkasutajatele uut selgust.\n<\/p>\n

\n J\u00e4rsku tundus piir lauaarvuti ja mobiili vahel h\u00e4gune.\n<\/p>\n

\n Samal ajal kasvas t\u00f6\u00f6lauakuvarite suuruse ja eraldusv\u00f5ime mitmekesisus.\n<\/p>\n

\n Ja kasvav peavalu veebidisaineritele.\n<\/p>\n

\n M\u00f6\u00f6das olid ajad, mil pidid rahuldama vaid k\u00e4put\u00e4ie vaateava suurusi. Asjad l\u00e4ksid keeruliseks.\n<\/p>\n

\n \u00d5nneks oli abi k\u00e4ep\u00e4rast meediap\u00e4ringute ja reageeriva disaini kontseptsiooni n\u00e4ol.\n<\/p>\n

\n T\u00e4nu meediap\u00e4ringutele sai v\u00f5imalikuks muuta stiile ja paigutust \u2013 isegi sisu \u2013 olenevalt kasutaja vaateava laiusest ja ekraani eraldusv\u00f5imest. Muidugi pole meediap\u00e4ringud kaugeltki ainuke t\u00f6\u00f6riist reageeriva disaineri trikkide kotis, kuid v\u00f5ib \u00f6elda, et need on tehnika aluseks.\n<\/p>\n

\n See oli mobiili jaoks suurep\u00e4rane uudis. Tundlik disain t\u00e4hendas, et saate t\u00f5husalt edastada sama saidi erinevaid versioone erinevatesse seadmetesse. Seda k\u00f5ike ilma eri domeenil eraldi mobiilisaiti arendamata.\n<\/p>\n

\n Aga j\u00f5udlus?
\n<\/h4>\n

\n Saidiomanikud on hakanud m\u00f5istma, et l\u00f5ppkasutajad hoolivad j\u00f5udlusest. Eelk\u00f5ige on jaem\u00fc\u00fcjad hakanud m\u00f5istma, et laadimisaja millisekundite v\u00e4hendamine v\u00f5ib bilansis t\u00e4hendada miljoneid.\n<\/p>\n

\n \u00d5nneks pakuvad reageerivad saidid oma mobiilsete n\u00f5bude ees selget j\u00f5udluse eelist: \u00fcmbersuunamine mobiilidomeenile on v\u00e4listatud.\n<\/p>\n

\n Sellele vaatamata on tundlik disain saavutanud v\u00e4hese j\u00f5udluse maine.\n<\/p>\n

\n M\u00f5nes m\u00f5ttes on see \u00fcsna eba\u00f5iglane, kuid tasub vaadata t\u00e4iendavaid j\u00f5udlusprobleeme, mis tulenevad tundlikust disainist ettevaatlikumatele\u2026\n<\/p>\n

\n Pildid
\n<\/h5>\n

\n Pildifailid on suured. Ja kuna need on suured, on nad sageli s\u00fc\u00fcdi aeglastes laadimisaegades. Seet\u00f5ttu on need hea koht alustamiseks k\u00f5igile, kes \u00fcritavad saidi toimivust optimeerida.\n<\/p>\n

\n Kahjuks ei olnud \u00fcks esimesi lahendusi piltide tundlikuks edastamiseks j\u00f5udluse jaoks suurep\u00e4rane.\n<\/p>\n

\n Tehnika on ilusti lihtne. Kasutage lihtsalt max-width: 100%, et veenduda, et pildid skaleeruvad sisaldava elemendi laiusega:\n<\/p>\n

img\n{\nmax-width: 100%;\n}<\/code><\/pre>\n
\n  Kui konteiner kahaneb, et see sobiks v\u00e4iksemate vaateavade jaoks, kahanevad k\u00f5ik sees olevad pildid koos sellega. Lihtne!\n<\/p>\n
\n  Aga seal on probleem. Kujutise suurus v\u00f5ib ekraanil kahaneda, kuid faili suurus j\u00e4\u00e4b samaks. See pole j\u00f5udluse seisukohast kaugeltki ideaalne. V\u00f5ite saata 800 x 800 pikslise kujutise m\u00f6\u00f6da traati, ainult selleks, et see kuvatakse 80 x 80 piksliga: teisis\u00f5nu v\u00f5ite edastada sadu (v\u00f5i tuhandeid) mittevajalikke baite. Pildi laadimine ei v\u00f5ta mitte ainult kaua aega, vaid k\u00f5ik need \u00fcleliigsed baidid v\u00f5ivad l\u00f5ppkasutaja v\u00e4\u00e4rtuslikku andmemahtu ammendada.\n<\/p>\n
\n  See pole aga ainus \u2013 ega isegi mitte parim \u2013 viis tundlike piltide edastamiseks. Esiteks, pilt, mis t\u00f6\u00f6tab laiusega 800 pikslit, ei pruugi selle suuruse erinevate osade puhul nii h\u00e4sti t\u00f6\u00f6tada.\n<\/p>\n
\n  Selle lahendamiseks saate kasutada meediumip\u00e4ringut, et kuvada kujutise erinevad versioonid s\u00f5ltuvalt vaateava suurusest, kasutades meediumip\u00e4ringut ja kuva: pole.\n<\/p>\n
\n  CSS:<\/strong>\n<\/p>\n
@media (min-width: 601px) {\n#croppedImage\n{\ndisplay:none;\n}\n}\n@media (max-width: 600px) {\n#largeImage\n{\ndisplay:none;\n}\n}<\/code><\/pre>\n
\n  HTML:<\/strong>\n<\/p>\n
<img id=\"largeImage\" width=\"400\" height=\"400\" alt=\"\" src=\"images\/largeImage.webp\" \/>\n<img id=\"croppedImage\" width=\"200\" height=\"200\" alt=\"\" src=\"images\/croppedImage.webp\" \/><\/code><\/pre>\n
\n  See v\u00f5imaldab teil kuvada pildi erinevaid versioone, mitte ainult sama pilti erinevates suurustes. See aga ei v\u00e4henda baitide arvu. Tegelikult on lehe \u00fcldine suurus suurem, kuna k\u00f5ik pildid laaditakse olenemata sellest, kas neid kuvatakse v\u00f5i mitte.\n<\/p>\n
\n  Parem alternatiiv \u2013 kui see on praktiline \u2013 on kasutada elementide asemel taustapilte. <img src=\"https:\/\/inform.click\/wp-content\/uploads\/2024\/11\/inform.click\" \/><\/code>See on eelistatav, kuna CSS-is viidatud kujutised laaditakse ainult siis, kui neid kasutatakse (kui need pole andme-URI-d):\n<\/p>\n
@media (min-width: 601px) {\n#largeImage\n{\nwidth:400px;\nheight:400px;\nbackground-image:url(\/images\/largeImage.webp);\n}\n#croppedImage\n{\ndisplay:none;\n}\n}\n \n@media (max-width: 600px) {\n#croppedImage\n{\nwidth:200px;\nheight:200px;\nbackground-image:url(\/images\/croppedImage.webp);\n}\n#largeImage\n{\ndisplay:none;\n}\n}<\/code><\/pre>\n
\n  See toimib h\u00e4sti: k\u00fclastajad laadivad alla ainult neid pilte, mida nad vajavad, just siis, kui nad neid vajavad. Probleem on selles, et see on korrastamata, k\u00e4sitledes sisu t\u00f5husalt stiilina. Sellisena v\u00f5ib see tekitada hooldusprobleeme ja p\u00f5hjustada ka selle, et otsingumootorid eiravad olulisi pilte.\n<\/p>\n
\n  Selle asemel, miks mitte kasutada SVG-d (skaleeritav vektorgraafika): pildivorming, mis skaleerub oma olemuselt? SVG-piltide eeliseks on ka see, et neid saab CSS-iga h\u00f5lpsasti kujundada (vaadake seda suurep\u00e4rast \u00f5petust<\/a>, kuidas muuta SVG-d CSS-iga reageerivaks). See sobib suurep\u00e4raselt ikoonide ja logode jaoks, kuid kahjuks ei saa te fotode jaoks SVG-sid kasutada \u2013 selleks peate kasutama rastervorminguid, n\u00e4iteks JPEG.\n<\/p>\n
\n  Teine v\u00f5imalus on kasutada reageerivate piltide edastamiseks \u00fchte paljudest JavaScripti lahendustest. See on populaarne viis seda teha, kuid see lisab veel \u00fche keerukuse kihi. Veelgi enam, kuna JavaScript blokeerib DOM-i konstrueerimise, v\u00f5ib iga JavaScripti h\u00f5lmav lahendus renderdamist takistada. Ehkki seal on m\u00f5ned v\u00e4ga nutikad pistikprogrammid, ainu\u00fcksi v\u00f5rrandisse JavaScripti lisamisega n\u00f5ustute mingil m\u00e4\u00e4ral kahest kurjast v\u00e4iksemaga.\n<\/p>\n
\n  Kuni viimase ajani olid need ainsad v\u00f5imalused.\n<\/p>\n
\n  N\u00fc\u00fcd aga toovad elemendid ja <source \/><\/code>ning atribuudid srcset ja sizes l\u00f5puks veebi t\u00f5eliselt tundlikud pildid. Uus spetsifikatsioon hakkab saama ka brauseri tuge, millel on t\u00e4ielik tugi Chrome'is ja Operas ning eraldusv\u00f5ime vahetamise tugi Safaris. Kuni teised brauserid j\u00e4rele ei j\u00f5ua, on olemas suurep\u00e4rane JavaScripti pol\u00fcfill<\/a>.\n<\/p>\n
\n  Selles vapper uues maailmas saate kasutada srcsetit, et koostada brauseri jaoks valitud piltide loend. Seej\u00e4rel saate atribuudis sizes kasutada meediumip\u00e4ringut, et m\u00e4\u00e4rata, millises suuruses kujutist kuvatakse. Kasutades elementi koos meediumip\u00e4ringutega \u00fches v\u00f5i mitmes elemendis, saate erinevate tingimuste jaoks m\u00e4\u00e4rata erineva pildivahemiku (nt kuni teatud laiusega vaateavade jaoks kasutage pilti a, b v\u00f5i c ja suuremate vaateavade jaoks pilti x, y v\u00f5i z). See on kasulik, kui peate v\u00e4ikese ekraaniga kasutajatele edastama pildi k\u00e4rbitud versiooni.\n<\/p>\n
\n  Uue s\u00fcntaksi kasutamise t\u00e4psed \u00fcksikasjad ei kuulu selle artikli ulatusse, kuid suurep\u00e4rase \u00f5petuse leiate aadressilt alistapart<\/a>.\n<\/p>\n
\n  V\u00f5ib-olla on selle uue spetsifikatsiooni ainsaks puuduseks see, et see on \u00fcsna pikk, mis v\u00f5ib t\u00e4hendada HTML-i \u00fclepaisumist lehtedel, kus on palju pilte. Kuid eelised kaaluvad oluliselt \u00fcles puudused.\n<\/p>\n
\n  CSS-i laadimine, mida te (tingimata) ei vaja
\n<\/h5>\n
\n  Kuigi meediumip\u00e4ringud v\u00f5imaldavad teil s\u00f5ltuvalt teie seatud kriteeriumidest rakendada erinevaid CSS-i reegleid, ei saa te sellest m\u00f6\u00f6da, et l\u00f5ppkasutajad peavad alla laadima k\u00f5ik CSS-i, mis v\u00f5ivad kehtida. See kehtib isegi siis, kui panete oma CSS-i eraldi failidesse ja asetate oma meediumip\u00e4ringu sellesse\n<\/p>\nelementi.\n
\n  N\u00e4iteks laaditakse olenemata vaateava laiusest m\u00f5lemad j\u00e4rgmised laadilehed:\n<\/p>\n\n
\n<\/pre>\n\n
\n  See ei ole brauseri viga. Meediap\u00e4ringutes kasutatavad kriteeriumid on sageli seotud asjadega, mis lehe k\u00fclastuse ajal muutuvad. N\u00e4iteks v\u00f5ib k\u00fclastaja otsustada brauseriakna suurust muuta v\u00f5i tahvelarvutit\/mobiilseadet p\u00f6\u00f6rata. Sellest tulenev kuvamuutus peaks olema sujuv ja teise CSS-faili p\u00e4ringu k\u00e4ivitamine poleks kaugeltki ideaalne. See kehtib eriti mobiilseadmete kohta, mis soovivad aku s\u00e4\u00e4stmiseks raadiolingid esimesel v\u00f5imalusel sulgeda. V\u00f5imalik, et selle lingi taasloomine, kui vaateava suurus muutub, v\u00f5ib olla halb uudis aku kasutusaega.<\/code>\n<\/p>\n
\n  Chrome p\u00fc\u00fcab aga neid erinevaid faile arukalt k\u00e4sitleda. Kuigi k\u00f5ik failid laaditakse alla, blokeerib renderdamise ainult see, millel on praegu sobiv meediumip\u00e4ring. K\u00f5ik teised laaditakse madalama prioriteediga.<\/code>\n<\/p>\n
\n  Kahjuks pole teised brauserid nii kohusetundlikud. N\u00e4iteks Firefoxis ei blokeeri kasutamata CSS-failid ainult renderdamist, vaid blokeerivad ka muude lehel olevate objektide laadimise.<\/code>\n<\/p>\n
\n  Allolev juga diagramm illustreerib asja. Sellel lehel olevaid pilte ei hakata laadima enne, kui kasutamata CSS-fail on t\u00e4ielikult alla laaditud:<\/code>\n<\/p>\n
\n  Saate sellest m\u00f6\u00f6da hiilida, kui kasutate CSS-i tingimuslikuks laadimiseks JavaScripti, kuid nagu oleme juba n\u00e4inud, kaasnevad JavaScriptiga oma j\u00f5udluskulud.<\/code>\n<\/p>\n
\n  Mida see k\u00f5ik t\u00e4hendab reageeriva saidi ja mobiilisaidi toimivuse jaoks?<\/code>
\n<\/h5>\n
\n  Noh, tundliku saidi mobiilikasutajad ja lauaarvutite kasutajad peavad alla laadima sama CSS-i.<\/code>\n<\/p>\n
\n  Ja seda saab olema rohkem kui ainult lauaarvutitele v\u00f5i mobiilidele m\u00f5eldud saidil.<\/code>\n<\/p>\n
\n  Veelgi enam, spetsiaalne mobiilisait kasutab t\u00f5en\u00e4olisemalt lauaarvuti CSS-i kergemat ja v\u00e4hendatud versiooni (kuigi praegu on see v\u00f5ib-olla v\u00e4hem t\u00f5si, kuna kasutajad ootavad \u00fcha keerukamatel mobiiliekraanidel rikkalikumat kogemust).<\/code>\n<\/p>\n
\n  Seega, kui muud tegurid on v\u00f5rdsed, n\u00e4ib olevat midagi selles argumendis, et reageeriv sait on t\u00f5en\u00e4oliselt aeglasem kui mobiilisait, kuna on vaja t\u00e4iendavat CSS-i. Kuid seni, kuni disainerid on v\u00f5imalikest l\u00f5ksudest teadlikud, peaksid nad suutma luua tundliku saidi jaoks kiiresti laaditavaid stiililehti. Eelk\u00f5ige on hea m\u00f5te:<\/code>\n<\/p>\n
    \n
  • \n    v\u00e4ltige andmete URI-de kasutamist piltide jaoks \u2013 binaarsed taustpildid laaditakse (tavaliselt) ainult siis, kui neid vaja on, kuid k\u00f5ik andme-URI-d laaditakse sellest hoolimata.<\/code>\n  <\/li>\n
  • \n    hoidke seda kergelt \u2013 kuna k\u00f5ik CSS-id tuleb alla laadida, on oluline olla t\u00f5hus. See t\u00e4hendab dubleerimise v\u00e4ltimist ja globaalsete reeglite seadmist v\u00e4ljaspool meediumip\u00e4ringup\u00f5hist CSS-i.<\/code>\n  <\/li>\n<\/ul>\n
    \n  RESS (tundlik veebidisain + serveripoolsed komponendid)<\/code>
    \n<\/h5>\n
    \n  RESS on reageeriva ja adaptiivse disaini h\u00fcbriid, mis h\u00f5lmab kasutajaagendi nuusutamist serveris, et vaadata kliendi seadme omadusi ja edastada sellele sobivat sisu.<\/code>\n<\/p>\n
    \n  Kui \u00fcks vastuv\u00e4iteid tundlikule disainile on see, et see h\u00f5lmab kogu sisu edastamist k\u00f5ikidesse seadmetesse, siis miks mitte leevendada seda, l\u00f5igates v\u00f5imalusel osa sellest sisust v\u00e4lja?<\/code>\n<\/p>\n
    \n  Sellel v\u00f5ib olla palju m\u00f5tet. Kui teate, et teil on pilt, mida te ei soovi kunagi kuvada seadmetes, mille ekraan on alla teatud suuruse, v\u00f5ite sama h\u00e4sti j\u00e4tta seda nendesse seadmetesse saatmata, s\u00e4\u00e4stes ribalaiust ja l\u00fchendades laadimisaega.<\/code>\n<\/p>\n
    \n  Veelgi enam, kui kasutate meediumip\u00e4ringuid, mida teate, et teatud seadmetes ei saa rahuldada, on v\u00e4hemalt argument CSS-i eraldamiseks erinevateks failideks ja nende tingimuslikuks laadimiseks.<\/code>\n<\/p>\n
    \n  Tasub meeles pidada, et kogu see protsess ei ole j\u00f5udluse m\u00f5ttes \"tasuta\". Ilmselgelt tuleb serveris m\u00f5ningaid t\u00f6id teha, mis v\u00f5tab aega \u2013 ilmselt mitte piisavalt, et kasu \u00fcles kaaluda, kuid sellega tasub arvestada.<\/code>\n<\/p>\n
    \n  Kohtuotsus<\/code>
    \n<\/h5>\n
    \n  Kas reageerivad saidid on aeglased?<\/code>\n<\/p>\n
    \n  Oleneb, mida sa m\u00f5tled aeglase all.<\/code>\n<\/p>\n
    \n  Kas k\u00f5ige kiiremini reageeriv sait, mille saate teha, on t\u00f5en\u00e4oliselt aeglasem kui kiireim spetsiaalne mobiilisait, mille saate luua?<\/code>\n<\/p>\n
    \n  T\u00f5en\u00e4oliselt.<\/code>\n<\/p>\n
    \n  Oleme ka n\u00e4inud, et on m\u00f5ned l\u00f5ksud. Kui te ei ole ettevaatlik, on lihtne sundida kasutajaid alla laadima palju \u00fcleliigseid pilte ja CSS-i, muutes teie tundliku saidi palju aeglasemaks, kui see peaks olema.<\/code>\n<\/p>\n
    \n  Siiski ei pea see nii olema. On t\u00e4iesti v\u00f5imalik luua tundlik sait, mis on nii kiire kui vaja ja pakub suurep\u00e4rast kasutuskogemust. Ja kuna nii standardid kui ka brauserid hakkavad j\u00e4rele j\u00f5udma sellele, mida arendajad soovivad pakkuda, peaks see muutuma lihtsamaks.<\/code>\n<\/p>\n
    \n  <\/p>\n<p><\/code>\n<\/p>\n
    \n  : <a target=\"_blank\" rel=\"noopener nofollow\" data-pssr=\"\" href=\"http:\/\/www.instantshift.com\/2015\/09\/07\/making-responsive-websites-perform\/\">instantshift.com<\/a><\/code>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
    Oli aeg, mil sai enesekindlalt vahet teha lauaarvuti veebilehe ja mobiilse veebilehe vahel. Tegelikult nii palju, et t\u00f6\u00f6lauasaitide mobiilseadmete jaoks muutmise \u00fcmber kasvas terve t\u00f6\u00f6stusharu. M\u00f5nda aega polnud te keegi, kui teil polnud eraldi domeenis eraldi mobiilisaiti. Siis hakkasid asjad muutuma. Mobiiliekraanid on tundmatuseni paranenud. Nii ka mobiilibrauserid. Tahvelarvutid viskasid v\u00f5rrandisse veel \u00fche elemendi. 4G tuli kaasa. Retina ekraanid pakkusid l\u00f5ppkasutajatele uut selgust. J\u00e4rsku tundus piir lauaarvuti ja mobiili vahel h\u00e4gune. \u2026<\/p>\n","protected":false},"author":1,"featured_media":222114,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[195,52],"tags":[],"class_list":["post-247526","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-veebikujundus","category-web-ja-wordpress"],"_links":{"self":[{"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/posts\/247526","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/comments?post=247526"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/posts\/247526\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/media\/222114"}],"wp:attachment":[{"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/media?parent=247526"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/categories?post=247526"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/tags?post=247526"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}