Laden van JS en CSS

Nederlandse ondersteuning voor CMS Made Simple

Moderator: velden

User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Re: Laden van JS en CSS

Post by Gregor »

Als ik een test doe via Google insight https://developers.google.com/speed/pag ... ab=desktop, dan krijg ik o.a. de volgende melding:
JavaScript en CSS in content boven de vouw die het weergeven blokkeren, verwijderen
Je pagina heeft 3 blokkerende CSS-bronnen. Dit veroorzaakt vertraging bij het weergeven van je pagina.
Ongeveer 5% van de content boven de vouw op je pagina kan worden weergegeven zonder te wachten totdat de volgende bronnen zijn geladen. Probeer blokkerende bronnen uit te stellen of asynchroon te laden of parseer de essentiële gedeelten van die bronnen rechtstreeks in de HTML.
Optimaliseer de CSS-weergave voor de volgende URL's:
https://www.uisge-beatha.eu/…ned_afc0e3 ... 2b156f.css
https://maxcdn.bootstrapcdn.com/bootstr ... ap.min.css
https://www.uisge-beatha.eu/…ned_ab14e6 ... 6858d4.css
Wat zou ik dan kunnen doen om deze 'blokkerende' bronnen op te lossen?

@Rolf: ik zou met een A-score en 100% meer dan tevreden zijn :)
deactivated010521

Re: Laden van JS en CSS

Post by deactivated010521 »

Icomoon in het verleden ook wel eens gebruikt. Als je geen externe site wilt gebruiken (in eigen beheer met versie controle): https://www.npmjs.com/package/gulp-iconfont

Voor iconfonts en webfonts is een font-loader ook nog een optimalisatie: https://github.com/bramstein/fontloader

Een svg sprite techniek maakt geen gebruik van fonts maar 1 svg afbeelding waar alle icoontjes in zitten, qua performance de optimale oplossing.

Above the fold CSS is niet heel makkelijk te automatiseren binnen CMSMS. Opnemen van basis CSS (typografie + grid) in de header van een template... en de overige CSS bestanden samenvoegen tot 1 bestand kan wel enige winst opleveren.

Bij Frameworks als Bootstrap wordt vaak alle CSS ingeladen en maar een fractie gebruikt. Met de Sass versie kan je de componenten die je niet gebruikt eruit laten. Je maakt daarmee een slankere versie:

https://getbootstrap.com/docs/4.0/getti ... ming/#sass
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Re: Laden van JS en CSS

Post by Gregor »

Denk voor mij de winst vooral gaat zitten in minder gebruik van .js-files; de pagina voor blog-artikelen laadt er iets van 135. Door {if page_alias.....} schakel ik er verschillende uit, maar dan nog blijft het veel.
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Re: Laden van JS en CSS

Post by Gregor »

Ben aan het stoeien geweest met de suggestie om Sprite te gebruiken voor verschillende icons, gebaseerd op Icomoon. Waar ik achter kwam, is dat het het inkleuren van de icoontjes niet zo eenvoudig is. Met SVG lukt het me wel. Nu wil ik met flexbox de social media icoontjes op een rij krijgen, en per icoontje deze 'klikbaar' te maken. Tot het moment van toevoegen van het a-attribuut staan de icoontjes netje op een rij en worden binnen de kolom 'gewrapped', tot het moment van het toevoegen van het a-attribuut, dan neemt dit attribuut de volledige kolombreedte in beslag :-/

Iccon-css:

Code: Select all

[[strip]]
.social-container {
    display: flex;
    /* flex-direction: row; */
    flex-wrap: wrap;
    justify-content: space-between;
    min-height: 0%;
    flex: 0;
}
.social-container a {
    
}
a.svg {
 position: relative;
 display: inline-flex;
 min-width: 0;
}
a.svg:after {
  content: ""; 
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left:0;
}


.social-container a svg {
    height: 3vh;
    margin-bottom: 10px;
}
.flex-item {
    height: 5%;
}
.name{
  font-size: 0.5em;
  margin-left: 1em;
}
.icon-home3 {
	color:blue;
}

.icon-twitter {
    background-color: #4da7de;
    color: white;

}
.icon-twitter:before {
    content:'\e040';
}
.icon-facebook {
    background-color: #3e5b98;
    color: white;
}
.icon-facebook:before {
    content:'\e041';
}
.icon-google-plus {
    background-color: #dd4b39;
}
.icon-google-plus:before {
    content:'\e042';
}
.icon-pinterest2 {
    background-color: #c92619;
    color: white;
}
.icon-pinterest2:before {
    content:'\e043';
}
.icon-rss {
    background-color: #f26109;
    color: white;
}
.icon-rss:before {
    content:'\e00b';
}
.icon-linkedin2 {
    background-color: #3371b7;
    color: white;
}
.icon-linkedin2:before {
    content:'\e049';
}
.icon-sailing-boat-water {
	color: blueviolet;
}

.icon-twitter:hover {
    background-color: #3993ca;
}
.icon-facebook:hover {
    background-color: #2a4784;
}
.icon-google-plus:hover {
    background-color: #c93725;
}
.icon-pinterest:hover {
    background-color: #b51205;
}
.icon-rss:hover {
    background-color: #de4d00;
}
.icon-linkedin2:hover {
    background-color: #1f5da3;
}

[[* styling individual icons *]]
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
     font-family:si!important; 
    font-style:normal;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;

    -o-transition:.1s;
    -ms-transition:.1s;
    -moz-transition:.1s;
    -webkit-transition:.1s;
    transition:.1s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);

    overflow:hidden;
    text-decoration:none;
    text-align:center;
    display:block;
    position: relative;
    z-index: 1;
    width: 60px;
    height: 30px;
    line-height: 30px;
    font-size: 20px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-right: 5px;
    background-color: none;
}


[[* ==========================================
Single-colored icons can be modified like so:
.icon-name {
  font-size: 32px;
  color: red;
}
========================================== *]]

.icon-price-tags {
   width: 1em;
}

.icon-bubbles {
  width: 1.125em;
}

.icon-facebook {
   width: 20%;
   height: 2%;
   padding: 3px;
}
.icon-twitter {
   width: 20%;
   height: 2%;
   padding: 3px;
}
.icon-google-plus {
   width: 20%;
   height: 2%;
   color: white;
}
.icon-linkedin2 {
   width: 20%;
   height: 2%;
}
.icon-rss {
   width: 20%;
   height: 2%;
   padding: 3px;
}
.icon-pinterest2 {
   width: 20%;
   padding: 3px;
   height: 2%;
}

.icon-camera {
   color: #feffff;
   background-color: navy;
}
[[/strip]]

In de template:

Code: Select all

<span class="social-container">

    <a href="http://www.facebook.com/sharer.php?u={$canonical}" target="_blank">
       <svg preserveAspectRatio="none" class="icon icon-facebook"><use xlink:href="#icon-facebook"></use></svg>
    </a>
    <a href="https://twitter.com/share?url={canonical}&text={title}&hashtags=uisgebeatha" target="popup" onclick="window.open('https://www.twitter.com','name','width=600,height=400')">
       <svg preserveAspectRatio="none" class="icon icon-twitter"><use xlink:href="#icon-twitter"></use></svg>
   </a>
   <a href="javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());">
       <svg preserveAspectRatio="none" class="icon icon-pinterest2"><use xlink:href="#icon-pinterest2"></use></svg>
   </a>
    <a href="https://plus.google.com/share?url={$canonical}" target="_blank">
       <svg preserveAspectRatio="none" class="icon icon-google-plus"><use xlink:href="#icon-google-plus"></use></svg>
    </a>
</span>
Hoe kan ik de ruimte die het a-attribuut inneemt inperken zodat de icoontjes op een rij komen te staan?
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3483
Joined: Mon Nov 28, 2011 9:29 am
Location: The Netherlands

Re: Laden van JS en CSS

Post by velden »

Als ik zo snel de css lees dan moet je denk ik een class="svg" toevoegen aan de <a ... > tags
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Re: Laden van JS en CSS

Post by Gregor »

Dank je Velden, toegevoegd, maar helaas geen effect.
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3483
Joined: Mon Nov 28, 2011 9:29 am
Location: The Netherlands

Re: Laden van JS en CSS

Post by velden »

Is het ergens live te bekijken? (url)
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Re: Laden van JS en CSS

Post by Gregor »

User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3483
Joined: Mon Nov 28, 2011 9:29 am
Location: The Netherlands

Re: Laden van JS en CSS

Post by velden »

Volgens mij moeten de <a> items niet display:inline-flex hebben (lijkt me voor containers).

Dus wellicht kun je proberen:

Code: Select all

a.svg {
 display: inline-block;
}
Tevens zie ik dat de .icon-xxx nog een width van 20% meekrijgen. Die moet er ook af volgens mij.

ps. ik ben niet thuis in de Flexbox materie.
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Re: Laden van JS en CSS

Post by Gregor »

Het werkt :)
De oplossing zat in het weghalen van "width: 20%". de "inline-block" teruggezet naar "inline-flex" en dan blijft het ook netjes in een rij staan, uitgelijnd over de breedte van de kolom. Zal het vanavond eens in andere browsers proberen hoe het daar eruit ziet; schijnt niet allemaal even compatibel te zijn......
deactivated010521

Re: Laden van JS en CSS

Post by deactivated010521 »

Mogelijk heb je vendor prefixes nodig voor flexbox gebruik. Ik schrijf CSS altijd zonder prefixes "moz-", "webkit-", "o-", "ms-".

Aan de hand van een "browserlist" (lijstje met browsers die ik ondersteun), laat ik autoprefixer alles invullen (automatisch ingebakken in mijn buildtool).

https://developer.mozilla.org/en-US/doc ... dor_Prefix
http://browserl.ist/?q=last%204%20version
https://autoprefixer.github.io

Binnen een svg sprite gaat het stylen iets anders.

https://developer.mozilla.org/en-US/doc ... VG_and_CSS

Code: Select all

svg {
fill: 
stroke:
....
}
Voorbeeld op codepen:

Er wordt 1 svg sprite (test.svg) ingeladen geen font!
https://codepen.io/frontendstudio/pen/EEqmRM
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Re: Laden van JS en CSS

Post by Gregor »

arnoud wrote:...(automatisch ingebakken in mijn buildtool)....
Mijn buildtool is de editor van cmsms en soms cssedit, en die doen dat niet..... ;)

Kan het zijn dat er in je voorbeeld iets niet goed gaat? Zie alleen maar tekst.

De suggesties die je deed, heb ik geprobeerd op de sprite van Icomoon, maar kreeg het niet voor elkaar. Misschien dat het aan iets van Icomoon ligt.

Als ik nu diezelfde icons elders wil gebruiken, maar dan in de vorm van een cirkel, werkt het dan zo dat ik hier een nieuwe styl-definitie voor maak, bijv.:
.icon-circle-name {
code om een cirkel te maken
}
Post Reply

Return to “Dutch - Nederlands”