Si të përdorni skedarët WebP në WordPress dhe të zvogëloni kohët e ngarkesës së faqes

skedarët e faqeve të fjalëve në internet

Shumica prej nesh e dinë tani se optimizimi i imazhit është shumë i rëndësishëm pasi luan një pjesë të madhe në kohërat totale të ngarkesës në faqen tuaj të internetit në WordPress. Sot ne duam të ndajmë me ju një alternativë të thjeshtë se si të integroni skedarët WebP të Google në faqen tuaj WordPress. Disa përdorues kanë parë zvogëlime të madhësisë së skedarit të imazhit prej mbi 70%!


Farë është WebP?

Nëse nuk jeni të njohur me WebP, është një format i skedarëve të imazheve i krijuar nga ekipi i performancës së uebit në Google me qëllim të krijimit të imazheve që janë më të vogla dhe më të shpejta. Ajo u njoftua për herë të parë në vitin 2010 dhe përmban të dyja metodat e kompresimit humbës dhe humbje. Imazhet dorëzohen në shfletuesin e internetit nga një server në internet bazuar në llojin MIME që ai përdor image / webp.

Imazhe pa humbje në WebP janë 26% më i vogël në madhësi krahasuar me PNG-të dhe imazhet humbëse në WebP janë 25-34% më i vogël sesa JPEG-të.

Kompanitë si YouTube dhe eBay tashmë janë duke përdorur WebP për të qetësuar në mënyrë të heshtur shumë faqet e tyre. Më poshtë është një shembull nga eBay, ku në faqen e tyre mesatare mesatarisht rreth 30 skedarë WebP.

përdorimi i uebit në ebay

Pse është kaq e rëndësishme WebP? Sipas httparchive, që nga gushti 2016, imazhet përbëjnë mbi 64% të peshës mesatare të faqes në internet. Në mënyrë tipike është më shumë se kombinimi juaj CSS, JS dhe HTML. Kështu që zgjedhja e një metode të fuqishme të optimizimit të imazhit dhe formatit të figurës siç është WebP është thelbësore në mënyrë që të mund të ulni peshën e faqes tuaj sa më shumë që të jetë e mundur. Në përgjithësi, sa më e vogël të jetë faqja juaj, aq më shpejtë do të ngarkojë. Dhe kjo do të kënaqë jo vetëm vizitorët tuaj, por edhe Google, si shpejtësia e faqeve është një faktor renditje.

Mbështetje në WebP

Tani ndërsa WebP është shumë emocionuese është gjithashtu e rëndësishme të përmendim mbështetjen e shfletuesit. Jo të gjithë shfletuesit modernë mbështesin WebP për momentin. Sipas caniuse, WebP mbështetet aktualisht në Chrome 23+, Opera 39+, të gjitha versionet e Opera mini, shfletuesit Android 4.3+ dhe Chrome për Android.

mbështetje e shfletuesit të uebit

Por prit! Mos u zhgënjeni, sepse në tutorialin që do t’ju tregojmë më poshtë, ekziston një metodë për të dorëzoni skedarë WebP në shfletuesit e mbështetur dhe JPG / PNG si një pasiv. Kjo do të thotë që shfletuesit e pa-mbështetur nuk do të shohin një imazh të prishur, ata thjesht do të shohin atë që kanë parë më parë. Mendoni për WebP si një shtesë në faqen tuaj WordPress, në vend se një migrim.

Sipas W3Schools, Chrome ka monopolin në pjesën e tregut të shfletuesit në pak më shumë se 70%. Por mos merrni vetëm pjesën e tregut si provë të fortë, shikoni të dhënat e vizitorëve tuaj dhe shikoni se çfarë shfletuesit përdorin, pasi mund të ndryshojnë bazuar në vendndodhjen tuaj. Ju mund të jeni të befasuar me faktin se sa të skuqur janë statistikat. Në Google Analytics nën “Audience” mund të klikoni në “Shfletues & OS” dhe të shihni se çfarë shfletuesit përdorin njerëzit kur goditen në faqen tuaj. Ne tërhoqëm një faqe në internet të rastit dhe siç mund ta shihni më poshtë, 67% e vizitorëve janë nga Chrome dhe 1% tjetër nga Opera. Kështu që 68% e këtyre njerëzve mund të shikojnë dhe përfitojnë nga Ueb-i formati i skedarit!

shfletues të uebit të Chrome-it

Si të përdorni skedarët WebP në WordPress

Në shembullin e sotëm ne do të përdorim një kombinim të dy programeve të ndryshme të WordPress për të ngritur WebP dhe drejtuar në WordPress. Këto janë krijuar dhe zhvilluar nga ekipi në KeyCDN, i cili është një rrjet global i ofrimit të përmbajtjes (CDN).

  1. [Premium] Optimizuesi i Imazhit Optimus: Shtojca e kompresimit pa humbje të figurës për WordPress, konverton imazhet në WebP
  2. [Lira] WordPress Cache Enabler: Plugin Caching i cili ju lejon të shërbeni WebP te shfletuesit e mbështetur

Optimizuesi i Imazhit Optimus

Ju mund të shkarkoni Optimus Image Optimizer nga Depo e WordPress, nga optimus.io, ose nga pulti i plugin-it tuaj. Shënim: Kërkon një licencë premium nëse doni të ktheni imazhet tuaja në WebP. Pasi të keni instaluar mund të aktivizoni “Krijimin e skedarëve WebP” në cilësimet e shtojcës.

krijimin e skedarëve të uebit

Pasi të aktivizohet WebP, kjo në thelb krijon një imazh shtesë për gjithçka që konvertohet. Pra, nëse ngarkoni një skedar PNG ose JPG, tani ekziston një version .webp i imazhit tuaj. Mos harroni, PNG / JPG është akoma e nevojshme sepse këto përdoren akoma për të shërbyer për shfletues të pa-mbështetur. Optimus bën kompresim pa humbje, kështu që PNG dhe JPG tuaj gjithashtu janë të kompresuar.

skedarë ueb dhe png

Ekziston gjithashtu një mundësi për përmirësimin e pjesës më të madhe në rast se ju keni kompresuar tashmë imazhet tuaja më parë dhe akoma keni nevojë për t’i kthyer ato në WebP.

optimizator i imazhit pjesa më e madhe

WordPress Cache Enabler

Kështu që tani kur keni imazhe në WebP, ju duhet një mënyrë për t’i thënë WordPress të shërbejë imazhe në WebP në shfletuesit e mbështetur dhe PNG / JPG në shfletuesit e tjerë. Kjo mund të realizohet me plugin falas WordPress Cache Enabler. Ju mund ta shkarkoni shtojcën nga Depo e WordPress ose instaloni atë nga pulti i plugin-it tuaj. Pasi të keni instaluar mund të aktivizoni “Krijoni një version shtesë të ruajtur në WebP” në cilësimet e shtojcës.

Cilësimet e mundësimit të cache

Pasi të aktivizoni atë opsion, krijohet një version shtesë i mbajtur në internet i faqes tuaj.versionet në ueb

Dhe kjo është ajo! Tani duhet të keni skedarë WebP që funksionojnë në faqen tuaj të internetit në WordPress.

Krahasimi i JPG me WebP

Ne kemi bërë një krahasim të JPG në WebP për të treguar ndryshimet që mund të arrini.

EMRI FILEORIGINAL JPGngjeshur JPGFORMATI I WEBPDiferenca SIZE%
jpg-to-webp-1.jpg758 KB685 KB109 KB86%
jpg-to-webp-2.jpg599 KB529 KB58.8 KB90%
jpg-to-webp-3.jpg960 KB881 KB200 KB79%
jpg-to-webp-4.jpg862 KB791 KB146 KB83%
jpg-to-webp-5.jpg960 KB877 KB71.7 KB93%

WebP rezultoi në një 85.87% ulje në madhësinë mesatare të figurës.

Krahasimi i PNG me WebP

Përsëri, ne gjithashtu kemi bërë një krahasim të PNG te WebP për të treguar ndryshimet që mund të arrini.

Emri i skedaritPNG origjinaleCompressed PNGFormati i Ueb-itDiferenca e madhësisë%
png-to-webp-1.png44 KB34 KB30 KB32%
png-to-webp-2.png46 KB35 KB33 KB28%
png-to-webp-3.png43 KB31 KB25 KB42%
png-to-webp-4.png30 KB24 KB18 KB40%
png-to-webp-5.png15 KB11 KB8 KB47%
png-to-webp-6.png34 KB24 KB18 KB47%
png-to-webp-7.png15 KB13 KB8 KB47%
png-to-webp-8.png63 KB47 KB44 KB30%
png-to-webp-9.png48 KB36 KB33 KB31%
png-to-webp-10.png17 KB14 KB11 KB35%
png-to-webp-11.png18 KB13 KB9 KB50%
png-to-webp-12.png61 KB45 KB39 KB36%
png-to-webp-13.png32 KB25 KB21 KB35%
png-to-webp-14.png26 KB21 KB17 KB35%
png-to-webp-15.png14 KB12 KB9 KB36%
png-to-webp-16.png36 KB27 KB24 KB33%
png-to-webp-17.png14 KB12 KB8 KB43%
png-to-webp-18.png21 KB18 KB13 KB38%
png-to-webp-19.png42 KB30 KB27 KB36%
png-to-webp-20.png23 KB20 KB18 KB22%

WebP rezultoi në një 42.8% ulje në madhësinë mesatare të figurës.

përmbledhje

Siç mund ta shihni, WebP është shumë e thjeshtë për t’u zbatuar në faqen tuaj WordPress dhe mund të arrini madhësi drastike më të vogla të skedarëve të imazhit! Nuk ka kompresim imazhi atje që mund të krahasohet me kursimet e WebP. Oh, dhe a përmendëm se WebP ka aftësinë të përdorë kompresim pa humbje? Kjo do të thotë që ju nuk do të shihni ndonjë humbje të dukshme të cilësisë. Nëse jeni duke kërkuar një mënyrë më të mirë për të shpejtuar WordPress, WebP mund të jetë një zgjidhje e shkëlqyeshme.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map