Laden van JS en CSS

[Gregor]

De eerste SVG icoontjes staan op de site

M.b.v. de tips van Arnoud ben ik op zoek gegaan een site waar ik ook fonts kan selecteren en kwam bij https://icomoon.io/app/#/select uit. Fonts selecteren en als fonts downloaden. Je krijgt een zip-bestand waarvan je de fonts op de webserver zet en de css-code aan het stylesheet toevoegt. Een mooie beschrijving staat op deze site: http://chipcullen.com/how-to-use-icomoo ... sic-usage/

Een volgende stap was om in de template (blog als pagina) de de juiste html-codes te plaatsen, ter illustratie:

Code: Select all

<h4><span class="icon-camera"></span> Meer foto's in het album</h4>

In de paginatemplate de font-awsome fonts uitgeschakeld en zowaar
https://www.uisge-beatha.eu/logboek/523 ... schilderen

Moet de underline nog zien weg te halen en sommige icoontjes netjes uitlijnen, bijv. het zoek-icoon.

[deactivated010521]

Een mooie aanvulling van Tim.

Omdat het nooit kwaad kan om een website sneller te maken en "speed testing" een boeiend onderwerp is heb ik nog eens wat websites en technieken onder de loep genomen.

Vaak valt er op het gebied van afbeeldingen veel te winnen. Comprimeer je foto's of zet de quality van CGSmartImage eens een stukje lager is een "quick win".

Een aantal websites die ik in beheer hebt maken gebruik van de bekende image sliders. Een website wordt afgeleverd met 1 a 2 slider foto's en is redelijk snel.

De eindgebruiker gaat los en zet 10 of 15 fotos in de slider en de "fast initial pageload", loopt terug.

Met een eenvoudige callback functie kan zo'n slider pagina een stuk sneller gemaakt worden. Maak alleen de eerste afbeelding zichtbaar, verander voor de vervolg afbeeldingen <img src=""> in <img data-src="">. Op het moment dat de vervolg slide ingeladen wordt zet je data-src snel om naar src.

Code: Select all

      
    $('.carousel').on('slide.bs.carousel', function (ev) {
        var i;
        i = $(ev.relatedTarget).find("img[data-src]");
        i.attr("src", i.data('src'));
        i.removeAttr("data-src");
      });

Iets meer toekomst muziek maar lazy loading met de JavaScript intersection server api is ook toe te passen:

http://deanhume.com/home/blogpost/lazy- ... rver/10163

[Gregor]

Over lazy loading had ik al e.e.a. gelezen. Gebruik in een aantal blog posts een mogelijkheid om een slide show van foto's te bekijken https://www.uisge-beatha.eu/2017/03/Gec ... ditartikel. Op dit moment gebruik ik daar een template voor met de volgende code:

Code: Select all

<div style="clear:both"></div>{* make sure heading is alignemt to the left *}
{* clean up parameters |replace:' ':'%20' *}
{assign var='album_no_spaces' value=str_replace(' ', ' ', "uploads/images/Gallery/{$gcb_params.album}")}
{assign var='foto_no_spaces' value=str_replace(' ', ' ', {$gcb_params.foto})}
{assign var="first_photo" value="uploads/images/Gallery/{$gcb_params.album}/{$gcb_params.foto}.jpg"}

<h4><span class="icon-camera"></span> Meer foto's in het album</h4>
{assign var='files' value="{$album_no_spaces}/*.jpg"|glob}
{if count($files)}
   <div class="fbCycler floatbox" data-fb-options="doSlideshow:true group:`cgblog` caption:`href` header:`#socialmediashare1`">
   <a href="{$first_photo|cms_escape:'urlpathinfo'}">{CGSmartImage src="{$first_photo}" width="150" alt="Uisge Beatha, Zeilen"}</a>
   {foreach from=$files item='file'}
         {if !$file|contains:"thumb_"}
            <a href="{$file|cms_escape:'urlpathinfo'}"></a> 
         {/if}
   {/foreach}
   </div><p> {* needed to for come a warning on W3C validation *}
{/if}

Zal zien of ik deze kan aanpassen naar LL.

Een onderdeel waar ook winst is te behalen is, is het laden van allerlei js-files. In de oorspronkelijke lay-out van de sites werd per template dezelfde set van js-files geladen. Dit heb ik samengevoegd in een template die ik per paginatemplate aanroep. Het samenvoegen van js-bestanden, dat in verschillende speed tester wordt voorgesteld, leidt tot een aanzienlijke verbetering van de laadtijd, maar ook tot een navenant aantal fouten in het debugscherm. Daarom ook aan het kijken of er plugins zijn die voor een lichtere variant kunnen worden vervangen. Als iemand suggesties heeft, ik houd me aan bevolen.

Code: Select all

{* jQuery (necessary for Bootstrap's JavaScript plugins)
*}
<__script__ src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></__script>
<__script__ src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></__script>
{* cache_remote_file url='https://www.uisge-beatha.eu/index.php?page=cache_googletranslate_2' *}

{if $page_alias == 'Artikelen'}
   {* 14jun17 script for endeless scrolling of blog articles - https://www.cmscanbesimple.org/blog/cmsms-modules-and-endless-scrolling
   *}
    <__script__ src="{uploads_url}/tpl-buddy-011/js/jquery.jscroll.min.js" defer></__script>
    <__script__ type="text/javascript">
    $(function() {
        $('div.jscroll').jscroll( { 
        nextSelector: 'a.jscroll-link:last',
        autoTrigger: true,
        loadingHtml: '<i class="icon-spinner3"></i>'
        } );
    } );
   </__script>
   {* CSS for endless scrolling is put in buddy011-Main stylesheet ++++++ end script endless scrolling *}
{/if}

{* +++++ Cookies +++++ *}
<__script__ src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></__script>
<__script__ type="text/javascript">
  $(".accept_cookies").click(function () {
    $("#cookie_consent").toggle("slow");
    location.reload();
  } );
  $(document).ready(function() {
    $.cookie("cookie_consent", "yes", { domain: "uisge-beatha.eu", path: "/", expires: 1095 } );
  } );
</__script>


{* Vanilla-js, doesn't work yet *}
<__script__ src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></__script>
{* if $page_alias == 'reageer'}
     <__script__ type="text/javascript" src="https://cdn.jsdelivr.net/npm/cookie-bar/cookiebar-latest.min.js?tracking=1&showNoConsent=1"></__script>
{/if *}
{* +++++ End Cookies script +++++ *}

{* +++++ Gallery module +++++ *}
{* 24feb18: Floatbox 740 changed to _752 ----- don't add async or defer because it will break the function *}
{if $page_alias == 'fotoalbum' || $page_alias == 'detail-pagina-logboek' || $page_alias == 'Artikelen' || $page_alias == 'thuishaven'}
    <__script__ src="{root_url}/modules/Gallery/templates/floatbox_752/floatbox.js"></__script>
{/if}

{* Carousel on the homepage *}
{if $page_alias == 'test' || $page_alias == 'thuishaven'}
    <__script__ data-pagespeed-no-defer src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></__script>
    <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
{/if}

<__script__>
    $(window).bind("load", function() {
       $.getScript('https://www.uisge-beatha.eu/uploads/_Javascripts/social.js', function() {});
    });
</__script>
<__script__ async src="//assets.pinterest.com/js/pinit.js"></__script>
{* End +++++ Social Media Share Buttons +++++ *}

{* +++++ cycle2 script used for Zeiluitspraken +++++ *}
<__script__ data-pagespeed-no-defer src="{uploads_url}/_Javascripts/jquery.cycle2.min.js"></__script> {* no async or defer *}

{* Include all compiled plugins (below), or include individual files as needed 
*}
    <__script__ type="text/javascript" src="{uploads_url}/_Javascripts/bootstrap.min.js"></__script> 
    <__script__ src="{uploads_url}/tpl-buddy-011/js/superfish.js" ></__script>
    {* 
    <__script__ src="{uploads_url}/tpl-buddy-011/js/combined.js"></__script> *}
    {* combining scripts leads to more errors (inspect element) *}
    
    <__script__ src="{uploads_url}/tpl-buddy-011/js/jquery.flexslider-min.js"></__script>
    <__script__ src="{uploads_url}/tpl-buddy-011/js/jquery.stellar.min.js"></__script>
    <__script__ src="{uploads_url}/tpl-buddy-011/js/jquery.magnific-popup.min.js"></__script>
    {* <__script__ src="{uploads_url}/tpl-buddy-011/js/combined-jquery.js"></__script> *}
    
    <__script__ src="{uploads_url}/tpl-buddy-011/js/init.js" defer></__script>
    
    {if $page_alias == 'detail-pagina-logboek'}
        <__script__ async src="{uploads_url}/_Javascripts/sorttable.js"></__script>
    {/if}
    {include file='cms_template:Tooltips'}
    {if $page_alias != 'test'}
        {global_content|strip name='Analytics'}
    {/if}
    {global_content|strip name='Cookie_active'}

[Gregor]

Hierop terugkomend:

De eindgebruiker gaat los en zet 10 of 15 fotos in de slider en de "fast initial pageload", loopt terug.

Met een eenvoudige callback functie kan zo'n slider pagina een stuk sneller gemaakt worden. Maak alleen de eerste afbeelding zichtbaar, verander voor de vervolg afbeeldingen <img src=""> in <img data-src="">. Op het moment dat de vervolg slide ingeladen wordt zet je data-src snel om naar src.

Code: Select all

      
    $('.carousel').on('slide.bs.carousel', function (ev) {
        var i;
        i = $(ev.relatedTarget).find("img[data-src]");
        i.attr("src", i.data('src'));
        i.removeAttr("data-src");
      });

Voor nagenoeg alle weergaven van foto's op de site gebruik ik CGSmartImage. Om de lazyload toe te passen zou je in staat moeten zijn om de "img src=....." van CGSI aan te passen, of is daar een andere 'truc' voor?

[deactivated010521]

CGSmartImage:

(optional) notag="" - Do not output an img tag, only the url to the cached image. This has no effect when CGSmartImage is used from within a stylesheet.

Of Smarty | replace:

Code: Select all

{$img|replace:'src':'data-src'}

https://www.smarty.net/docsv2/en/langua ... eplace.tpl

[Rolf]

Humm, wat krijgen jullie hier?
https://tools.pingdom.com/#!/bj9o2t/htt ... imple.org/

[deactivated010521]

Performance grade
A 100
Load time
1.19 s
Faster than
85 %
of tested sites
Page size
362.1 kB
Requests
7
Tested from
Stockholm

Je font awesome .js is wat aan de zware kant:
fontawesome-all.min.js
www.cmscanbesimple.org/assets/themes/…
252.4 kB

[Gregor]

Humm, wat krijgen jullie hier?
https://tools.pingdom.com/#!/bj9o2t/htt ... imple.org/

Uitermate snelle site
Heb font-awsome vervangen door SVG-fonts, dus alleen die fonts die ik gebruik. Bleek aan 10 fonts voldoende te hebben.

[Gregor]

Code: Select all

{$img|replace:'src':'data-src'}

https://www.smarty.net/docsv2/en/langua ... eplace.tpl

Als je twee foto's wilt laten zien, dan ga je dit dus vanaf de 3e foto doen??

[Gregor]

Humm, wat krijgen jullie hier?
https://tools.pingdom.com/#!/bj9o2t/htt ... imple.org/

Uitermate snelle site
Heb font-awsome vervangen door SVG-fonts, dus alleen die fonts die ik gebruik. Bleek aan 10 fonts voldoende te hebben.

Wat ik bij mijn site niet begrijp, is de 3-4sec voor TTFB https://tools.pingdom.com/#!/crEU35/htt ... t-elleboog

[deactivated010521]

Als je twee foto's wilt laten zien, dan ga je dit dus vanaf de 3e foto doen??

Ja, iets met loop.index?

Code: Select all

{foreach from=$items item=item name=loop}

   {if $smarty.foreach.loop.index >= 2}
+ zichtbaar   
{else}
- onzichtbaar
   {/if}

    {if $smarty.foreach.loop.first}
    {/if}
{/foreach}

[deactivated010521]

Wat ik bij mijn site niet begrijp, is de 3-4sec voor TTFB

Slow Time To First Byte (TTFB) is netwerk / server gerelateerd:
https://developers.google.com/web/tools ... nce/issues

[Rolf]

Ik heb mijn blog www.cmscanbesimple.org opnieuw opgebouwd, hierbij heb ik erg goed gekeken naar de pagina laadtijd en wat advieswebsites daar van vinden.

Deze genoemde websites geven advies... klopt! Maar dit is niet altijd begrijpelijk (vind ik) en ook niet altijd uitvoerbaar (op shared hosting).

Wat heb ik gedaan? Ik ben begonnen met de zaken die voor de hand liggen aan te passen!
Deze .htaccess heb ik gebruikt en die lijkt goed te werken!
viewtopic.php?f=4&t=77785 Ik gebruik Piwik voor analytics op een apart domein, óók daar heb ik deze .htaccess neergezet. Tenminste het caching en veiligheidsdeel. Het eerste deel, de CMSMS URL rewriting regels etc. hoeft natuurlijk niet.

Ik heb gekozen om af te stappen van CDN services, tegen alle adviezen in... Door het zelf te hosten heb je een betere controle over caching. Het gebruik van een CDN kan ook gebruikt worden om bezoekers te volgen. Denk bijv. aan Google fonts, die kijkt dan lekker mee zonder dat je het beseft... Bij bepaalde browser kun je dat blokkeren waardoor jouw site er verkeerd uit komt te zien.

Fonts! Ik gebruikte Open Sans vanuit CDN. Nu gebruik ik simpelweg de standaard Verdana font-family, die webveilig moet zijn. Ziet er eigenlijk hetzelfde uit. Niet muggeziften...

Met Template Inheritance kun je per pagina(groep) bepalen wel externe bestanden (JS/CSS) worden geladen en niet alles tegelijkertijd.
https://www.cmscanbesimple.org/blog/the ... gn-manager

Ik moet nu alleen het Font Awesome bibliotheek bestand nog verkleinen, maar ben nu al erg tevreden! Bij Pingdom Speedtest krijgt de site een 100%!!

[deactivated010521]

Qua SEO komt je cmscanbesimple websites ook goed door de tests heen.

Uit een font-awesome font kan je alle losse icoontjes halen:

Code: Select all

fontforge -lang=ff -c 'Open($1); SelectWorthOutputting(); foreach Export("svg"); endloop;' font_file.ttf

Mogelijk zijn de .svg source bestanden ook los te vinden.

Met losse .svg bestanden kan je een 'eigen' iconfont genereren, of overstappen op een .svg sprite techniek:

Deze laatste optie heeft de beste performance, maar vraagt wat extra werk voor het voorbereiden van de bestanden en .css.

Zie:

https://www.webdesignerdepot.com/2017/0 ... g-sprites/

Zie dat je voor je logo een .png gebruikt als je deze vervangt voor een

Code: Select all

<img src='logo.svg'>

zal je pagina ook nog iets sneller worden.

[Gregor]

Ik heb de webfonts voor uisge-beatha.eu via deze site gemaakt https://icomoon.io/app/#/select Eigenlijk heel eenvoudig