Gevorderde asynchroniese CSS3-widget vir sosiale deel van blogger om die verbetering van …

Gevorderde asynchroniese CSS3-widget vir sosiale deel van blogger om die verbetering van ...

Ek wil u een vraag stel, wat is die waarde daarvan om besoekers te verloor as gevolg van die stadige laai van die webwerf? Is dit so belangrik vir jou? As u regtig omgee om u webwerf te laai en besoekersnavigasie wil verbeter, moet u redelike pogings aanwend om ‘n groot aantal algemene besoeke te ontsluit. Die laai van bladsye beΓ―nvloed ook nie net skrifte nie, maar ook prente.

Asinchroniese laai van inproppe om die laaisnelheid van bladsye te verbeter met behulp van Blogger-inprop en widgets – leer hoe om CSS3 in ‘n widget te gebruik in plaas van werklike beelde op die bladsy.

. Dit is die beste praktyke vir ‘n vinniger webtoepassing met CSS3 en HTML5-kodering. Lees hoe u die laai van bladsye dramaties kan verbeter met behulp van die volledig geoptimaliseerde CSS3-widget. Ons het gesien en daar is baie bladsye wat asinchroniese laai-inpropinasies vertoon om die laaisnelheid van bladsye te verbeter, maar ons sien ‘n nuwe handleiding oor die CSS3-widget wat slegs bestaan ​​uit beelde wat deur CSS self gebou is, en ek is seker dit sal help om

.

danksy die lui laai-skrif wat die bladsy aansienlik vinniger maak. Hierdie widgets vertraag die laai van die bladsy aansienlik as gevolg van bykomende aflaaie, verskeie versoeke en sinchroniese laai van JavaScript, wat ‘n hoΓ« geheueverbruik deur blaaiers veroorsaak. Die doel van hierdie boodskap is om meer bladsye te kry, laer weieringskoers te verlaag en u webwerf te optimaliseer

.

. Hierdie widget is volledig gemaak deur CSS3; dit beteken dat al die beelde in hierdie widget uitsluitlik deur CSS geskep word. Ja, dit is waar, CSS kan geskryf word om die beelde wat u op die bladsy wil vertoon te kry in plaas van die werklike beeld, soos .jpg of .png. Sodra dit op ‘n widget-party van ‘n derde party geΓ―nstalleer is, sal dit vereis dat prente afgelaai word, wat meer versoeke en bykomende aflaaie tot gevolg het, asook tyd, wat die laai van die werf beΓ―nvloed. Maar hierdie widget sal NIE enige versoeke skep vir die beelde wat dit vertoon nie, en dit sal ook nie een van hulle aflaai nie, en sodoende sal die laai van bladsye verbeter word.

Hier het ek ‘n e-posintekening-widget voorsien met vier CSS3-ikone wat nie beelde is nie en die CSS-kodering daarvan. Verander die blou teks volgens die inligting en installeer hierdie widget op u webwerf.

#menump {align: center;}
#menump ul {lysstyl: geen; vulsel: 0; marge: 0; oordrag: verborge; font: 0.875em / 1 Arial, sans-serif; }
#menump ul li {float: links; breedte: 46px; hoogte: 49 pixels; opvulling links: 20px; }
#menump ul li a {vertoon: blok; breedte: 45px; hoogte: 45 pixels; oordrag: verborge; rand: 1px soliede deursigtig; lynhoogte: 45px; teksversiering: geen; tekskadu: 0 -1px 0 rgba (0,0,0,0,5); -moz-grens-radius: 5px; -webkit-grens-straal: 5px; randradius: 5 pixels; }
# menump ul li a: hover, # menump ul li a: fokus, # menump ul li a: aktief {ondeursigtigheid: 0,8; randkleur: # 000; }
/ * β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”
– FACEBOOK
————————————————– β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€” * /
.facebook a {
posisie: relatief;
randkleur: # 3c5a98;
tekstransformasie: kleinletters;
teksinkeping: 24px;
letterafstand: 10 pixels;
fontgewig: vet;
lettergrootte: 40px;
lynhoogte: 50 pixels;
kleur: #fff;
agtergrond: # 3c5a98;
/ * css3 * /
-moz-boks-skaduwee: 0 0 4px rgba (0,0,0,0,4);
-webkit-doos-skaduwee: 0 0 4px rgba (0,0,0,0,4);
bokskadu: 0 0 4px rgba (0,0,0,0,4); / * standaardweergawe laaste * /
}
/ * β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”
– TWITTER
————————————————– β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€” * /
.twitter a {
posisie: relatief;
randkleur: # a8eaec;
tekstransformasie: kleinletters;
teksinkeping: 13px;
letterafstand: 40px;
font: vetdruk 45px / 1 Tahoma, sans-serif;
lynhoogte: 35 pixels;
kleur: # 6ac6df;
agtergrond: # daf6f7;
/ * css3 * /
tekskadu: 3px 3px 1px #fff, -3px -3px 1px #fff, 3px -3px 1px #fff, -3px 3px 1px #fff;
-moz-boks-skaduwee: 0 0 4px rgba (0,0,0,0,4);
-webkit-doos-skaduwee: 0 0 4px rgba (0,0,0,0,4);
bokskadu: 0 0 4px rgba (0,0,0,0,4); / * standaardweergawe laaste * /
/ * OPMERKING: die implementering van die webkit-gradiΓ«nt voldoen nie aan die spesifikasie * /
agtergrond: -webkit-gradiΓ«nt (lineΓͺr, links bo, links onder, van (# dbf7f8) tot (# 88e1e6));
agtergrond: -moz-lineΓͺre gradiΓ«nt (bo, # dbf7f8, # 88e1e6);
}
/ * β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”
– RSS
————————————————– β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€” * /
.rs a {
posisie: relatief;
breedte: 45px;
vulsel: 0 2px;
randkleur: # ea6635;
tekstransformasie: kleinletters;
teksinkeep: -186px;
lettergrootte: 30px;
fontgewig: vet;
kleur: #fff;
agtergrond: # e36443;
/ * css3 * /
/ * OPMERKING: box-skadu is nie tans in enige CSS3-module nie. Dit kan weer in ‘n heel ander vorm verskyn * /
-moz-boks-skaduwee: 0 0 4px rgba (0,0,0,0,4);
-webkit-doos-skaduwee: 0 0 4px rgba (0,0,0,0,4);
bokskadu: 0 0 4px rgba (0,0,0,0,4); / * standaardweergawe laaste * /
/ * OPMERKING: die implementering van die webkit-gradiΓ«nt voldoen nie aan die spesifikasie * /
agtergrond: -webkit-gradiΓ«nt (lineΓͺr, links bo, links onder, van (# f19242) tot (# e36443));
agtergrond: -moz-lineΓͺre gradiΓ«nt (bo, # f19242, # e36443);
}
/ * skep ‘n sirkel * /
.rss a: voor {
inhoud: “00a0”;
posisie: absoluut;
onderkant: 4px;
aan die linkerkant: 5px;
breedte: 9px;
hoogte: 9 pixels;
agtergrond: #fff;
/ * css3 * /
-moz-grens-radius: 12px;
-webkit-grens-straal: 12px;
randradius: 12 pixels; / * standaardweergawe laaste * /
}

/ * skep twee boΓ« * /
.rss: na {
inhoud: “00a0”;
posisie: absoluut;
onder: 5 pixels;
aan die linkerkant: 5px;
breedte: 14px;
hoogte: 13 pixels;
randstyl: dubbel;
randbreedte: 24px 24px 0 0;
randkleur: #fff;
/ * css3 * /
-moz-grens-radius: 0 50px 0 0;
-webkit-rand-bo-regs-radius: 50 px;
grensradius: 0 50px 0 0; / * standaardweergawe laaste * /
}
/ * β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”
– GOOGLE
————————————————– β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€” * /
.google a {
posisie: relatief;
randkleur: # 26478d;
tekstransformasie: kleinletters;
teksinkeping: 6px;
letterafstand: 40px;
font: 71px / 21px Georgia, Times New Roman, Times, serif;
kleur: #fff;
agtergrond: # 1e3c7f;
/ * css3 * /
-moz-boks-skaduwee: 0 0 4px rgba (0,0,0,0,4);
-webkit-doos-skaduwee: 0 0 4px rgba (0,0,0,0,4);
bokskadu: 0 0 4px rgba (0,0,0,0,4); / * standaardweergawe laaste * /
/ * OPMERKING: die implementering van die webkit-gradiΓ«nt voldoen nie aan die spesifikasie * /
agtergrond: -webkit-gradiΓ«nt (lineΓͺr, links bo, links onder, van (# 447aec) tot (# 1e3c7f));
agtergrond: -moz-lineΓͺre gradiΓ«nt (bo, # 447aec, # 1e3c7f);
}
# sidebar-subscribe-box {
breedte: motor;
/ * rand: 1px soliede # b2b2b2; * /
agtergrond: # ececd9;
randradius: 10 pixels;
opvulblad: 25px;
ondervulling: 1px;
}
.sidebar-subscribe-box-wrapper {
kleur: # 000;
lettergrootte: 11px;
vulsel: 1px 20px 10px;
teksbelyning: middelpunt;
letterafstand: normaal;
tekstransformasie: hoofletters;
lettertyd dikte: normaal;
}
.sidebar-subscribe-box-vorm {
albei skoon;
Vertoonblok;
marge: 10px 0} vorm.sidebar-subscribe-box-formulier {clear: beide; vertoon: blok; marge: 10px 0 0; breedte: outomaties}
.sidebar-subscribe-box-email-veld {
-moz-grens-radius: 4px; -webkit-grensradius: 4px;
rand: 1px soliede #ccc; grensradius: 4 px; kleur: # 444; marge: 0 0 15px; opvulling: 10px 40px; breedte: 68%}
.sidebar-subscribe-box-e-pos-knop {
agtergrond: # 58524b;
rand: soliede 1px # 4a453e;
grensradius: 4px;
vakskadu: 0 1px 0 rgba (255,255,255,0,3) insetsel, 0 1px 0 deursigtig;
kleur: #fff;
wyser: wyser;
fontfamilie: Droid Serif;
fontgewig: 700; opvulling: 10px; teksskadu: 1px 1px 0 rgba (0,0,0, .4); tekstransformasie: hoofletters; breedte: 100%}
.sidebar-subscribe-box-email-button: hover, .sidebar-subscribe-box-email-button: focus {achtergrond: # D83F1D}
.sidebar-subscribe-box-email-button: aktief {-moz-box-skadu: 0 1px 4px rgba (0,0,0,0,5) plaas; -webkit-box-skaduwee: 0 1px 4px rgba (0,0, 0,0,5) insetsel; box-skaduwee: 0 1px 4px rgba (0,0,0,0,5) insetsel; omtrek: 0} iframe, object, inbedding, .yt-border iframe, .yt-border object, .yt-border embed, tabel {breedte: 100%} embed {border-radius: 3px; -moz-box-skaduwee: 0 2px 4px rgba (0,0,0,0,2); – Webkit-box-skaduwee: 0 2px 4px rgba (0.0,0,0,2); agtergrond: #FFF; raam: 1px eenvormig #ddd; bokskadu: 0 2px 4px rgba (0,0,0,0,2); marge: 0; vulsel: 4px 4px 4px}
# voetsnit {rand-bo: 1px solied #aaa; box-skaduwee: insetsel 0 4px 6px -3px #aaa; fontfamilie: cambria; lettergrootte: 14px; hoogte: 100px; marge: 10px -30px 5px; opvulling: 0 30px; teksbelyning: middelpunt; breedte: 100%}
a.social-ikone {margin-right: 5px; hoogte: 45px; breedte: 45 px;}
a.sosiaal-ikone: hover {ondeursigtigheid: .7; filter: alfa (ondeursigtigheid = 70);}

Gebruik hierdie HTML-widget en sien die verskil in bladsindsnelheid en YSlow.