 So hello everyone. I'm glad you came in. I hope you enjoyed the lunch Thanks for showing up and you know the thing is with a with a room this size is that they just playing you in a room It happened to me once in Munich before that I spoke in a room that could fit like 150 or 200 people and then about 400 people showed up So everyone's like this in the against the walls and now they decided to put me in the in the keynote room And we have like 100 people for the guys in the in the wall the people in the back Feel free to Take a seat in the front Then I won't be so alone like up here So yeah pretty anxious I never spoke to in such a big room But that being said let's go. So I'm Baras Vanschers. I'm a founder co-owner of a company in Amsterdam called limoen-goen I'm a front-end developer by origin. I love accessibility and everything related to accessibility I'm also the chair of the Dutch Drupal Foundation Founded the foundation about seven years ago and I've been the chair since I think three or four years now Now and then I like to work on Drupal code as well. I maintain a few Drupal modules I now and then work on Drupal core mostly accessibility related issues. So for example For those of you who are into accessibility in the Bartik theme There's an underline under the links. That's one of the patches. I worked on and also the Language of parts button in the CK editor. I think it's released in 8.2 It's a button that you can use to mark a piece of text and say well this piece of text It's not English, but it's French or whatever. So a screen reader will pronounce the age pronounce the piece of text in the correct accent language So I said founder co-owner of limoenchon. It's a Dutch word meaning lime green We based in Amsterdam a five-minute walk from the central station and in the last five years We grew from three people to 14 at the moment This is our opening. Oh here. I have shouldn't point at the screen here I should point there. So this is the opening of our new office Ten months ago and we focus on building websites that last that's our Slogo sustainable websites and we want to build websites that are accessible So all our websites are built with accessibility in mind so that everyone can use a website disregard place location disability or whatever If you want to learn more about why we chose accessibility as a business proposition I have a session on Thursday in Schubert Please attend and the sessions this business talk, but it will go into That it is good to have a niche as a Drupal development agency to focus on a specific part of the market or a specific task And excel in that so we're talking about accessibility as a business proposition So recently we we build a website for Eva Yennec and Eva Yennec. She's a kind of anchor man She's a talk show host on a daily Talk show popular daily talk show on a Dutch public public channel And the website attracts about half a million unique visitors per month and The website won a procedures award called the Dutch interactive awards, which we were thrilled to one And a part of this project was to integrate Facebook instant articles and amp So what is it and how do they compare? Both techniques are used to display content on a mobile device very very fast Facebook instant articles is only used on the Facebook app on your mobile device And I'm talking about like a telephone not not an tablet or an iPad and If you click on an article it loads like instantly really really fast and amp accelerated mobile pages is kind of similar only used within Google Chrome on the mobile device and Used in the search results. So if you perform a search action on Google It will display articles which are amp enabled higher in the search results and very fast and you'll see some examples of this But most important speed like both techniques mainly focusing on speed. This is what Google say themselves I mean think about it for a second. You had a bus station and click on a link in your Twitter feed You wait five seconds you wait ten You keep thinking it must be amazing content if it takes so long to prepare and Right then you get pulled back into reality a full screen interstitial asking me to buy sunscreen I please like me dialogue as that described from the content and make the page so slow You can't even scroll and as if that was enough a bunch of competing analytics scripts in the background party hard every second And kill your phone's battery or maybe the analytics scripts Just want to stop the phone from suffering and put it out of its music quickly. I really don't know So speed is key and research shows that 40% of website visitors leave if a website web page isn't loading within three seconds And I I see that myself if I click on a link from Google and I'm waiting like one or two or three seconds I already clicked away Probably recognized that as well and these slow loading times are often caused by an overload of assets on a web page like a lot of Javascript advertisement tracking software images videos making the page load very slow So ping dump and calm is a website to monitor your uptime of websites And they did a research in back in 2015 and they launched a report with these numbers Like they found out that the average number of HTTP requests on a single web page is 89 cost by average of 42 images 21 Javascripts making it an average page size of three megabytes and These numbers make that the page load on average for a single web page is five seconds So there are a lot of pages even slower than five seconds And I think I find these numbers very shocking and this is why my companies like Facebook and Google step in with their solutions So how does it work? Kind of similar a lot of similarities both work by prefetching content storing this the content the text and images on their own surface and They allow a specific set of HTML elements that you can use to build up your page Because they have a limited set of elements that they use their full control on how they can can preload and build the page and They know exactly which content is being displayed on your screen and which content is below default So which content they can like like lazy load when you scroll And both techniques require specific page variant both for Facebook and Google you need a specific variant of your HTML page So let's have a look at Google There's a small icon on the on the news item. You can see this small flesh was called thunderstruck icon With the word amp next to it giving you an indication that this article North Korea accuses Trump of declaring war is amp enabled And then there is a stream a carry cell with with news items in this case all about the subject Trump I couldn't find a better example sort of it is And if you scroll down you can see some some some other Related items to Trump. I will show you the example in a second If you click on an item you get onto a detail page and from the detail page you can scroll through other news items around the same subject but from other sources other publishers And if you want to share an item you can use the sharing tools that your mobile device gives you So I have an Android phone for example, and I can share it to WhatsApp and Twitter and Telegram and whatnot So here's an example a Google Trump And I get some results first item is amp enabled and I can see the carry cell with amp items These are all amp items and there's some Twitter integration and Wikipedia integration and then there's the regular search results So and if you click on an item in the carry cell Loads pretty fast. I was recording this on a bad connection. So usually it's even faster And if you scroll down you get some There's some some items below the the article And if you click on an item you can also swipe you can see all these bullets on top Those went fast you can see the bullets like just under the title Indicating you that you can slide to other Pages or there are items around the same subject going BBC The post USA today, etc So for the visitor of your of for the for the person googling for information This is a really nice feature gives you a lot of information about this subject from different sources and As a publisher, it's nice that Google displays like amp articles on top of other search results So your amp enabled article will be highlighted And the regular search results are way down at the page So Facebook is kind of similar they use the exact same icon as Amp does And if you click on a detail page, it will bring you to the bottom of the page Showing you other articles, but only articles from the same Facebook page So you won't be clicking you won't be sliding through to other publishers you stay within the same Facebook page and If you if you want to share stuff, you can only share that within Facebook So you can post a link to an article to Facebook messenger You can post it on your Facebook wall You can like it on Facebook, but you can't share an item for example to WhatsApp or Twitter So here's an example of content and then we get the articles you can see the same icon So this article is amp enabled this one as well. See it's loading really fast They offer some other tools as well So if you have like photos within the body content, you can like each photo or share each photo as well This is a very long article all the way down. You will see other articles from the same Facebook page So it's kind of how we how I would do like relevant content and Drupal like related articles But these are not like related. They are just from the same Facebook page They have the same like bullets on top that you can that gives you an indication that you can swipe But the swiping is only within the Facebook page. You could see it's preloaded So it's really fast to navigate through these items So why would you use it, right? Obviously speed loading times are really fast less than a second for Facebook Google as well Facebook says they're 10 times faster and they have 20% more reads 70% less chance of people abandoning the website because of these loading times Google is a bit slower than Facebook But still four times faster and using 10 times less data than on a regular mobile search And both have more control over how they can like there's a limited set But it gives you a snappy feeling because they have full control over how they can build the page So here's some examples of how Facebook what Facebook offers on their instant articles layout You can auto play video for example In a pretty nice way If you have images you can click on an image tap on an image to zoom into It works pretty nice full screen And if you have like landscape photos, you can also use your phone to if you tilt the phone You you like navigate through the photo and they have maps like interactive maps like this And I think these features are pretty hard to do on a mobile website But come out of the box if you use Facebook instant articles and according to Facebook like their marketing sheets as well 20% more clicks and 30% more shares So if it's up to Facebook start using it today but There's also some reasons not to use it because it's harder to implement like tracking codes advertisements For us developers, it's extra work Usually we are used to building a website like responsive desktop and mobile But now we have to have another version for Google AMP and another version for Facebook instant articles and Not all HTML5 elements that we are used to are supported by Google and Facebook So that they both have their own set of elements that you can use to to communicate to display your content Not all features are supported Drupal great community software if you build a community around your news articles or your recipes with foe thing and comments or what not You can't display all these features on your article Facebook only allows Facebook comments for example But if you have comments in Drupal, it's very hard. I think impossible to show them on the on the on the article And for now you saw the example of Google Displaying the content the AMP enabled articles on top of the regular search results And that might be a great reason for publishers to enable AMP But we're not sure what happens in a year or two. Maybe Google stops displaying these articles on top of the search results Also, it's no guarantee that AMP or Facebook instant articles still work in two or three years So it might take a lot of work and energy now to to implement it in the website But who knows maybe in two years Google kills it or Facebook kills it like and it sounds ridiculous But Google check out is one example that we as developers Cost us a lot of energy to implement Google checkout in checkout processes in our e-commerce solutions and then Google killed it So not sure what happens with AMP and Facebook as articles So let's continue a little bit more on AMP. What is it? To start with it's open source, which is nice the full source code of Amp is published on GitHub. You can check the code. You can even submit pull requests if you want to add new plugins And it's open for other companies to use it. So For example, Twitter could check the links that are shared on Twitter and see if the links have an amp Variant as well and then prefetch the amp version. So if you click on a link from Twitter It will load instantly just as Google does. I don't think Twitter does it at the moment But they could since the source code is open source So how would you implement this? I'm not really diving into the Drupal implementation This is more like the broad overview but for every HTML version that you have you you need to have a specific amp version as well So in Drupal, this could be no dash one dash amp for example And then you have to tell Google on the HTML version like here is the URL of my amp version and on the amp version You have to tell them here's the URL of my HTML version. So you can use the link tag to do so You need to add a little piece of schema.org code to explain the page to Google So you have to tell Google you're looking at a news article This is not a recipe or another piece of content. This is a news article. This is the headline This is the date of modification and this is the order on the publisher and there's a few other fields that you can use Like a description This is basic schema.org really interesting stuff if you haven't checked it out do so It's pretty amazing what you can do with it If you want to use CSS to give your own style your own markup on Google that's possible But they are limited like you can only use inline CSS and there's it's limited to 50k So it's a pretty small amount of CSS that is allowed to Style your articles and then you have to use the style amp custom attack And it's not possible to add your own JavaScripts. You're limited to the JavaScripts Google offers you and The reason behind this is that they only use JavaScripts that load async asynchronically So all the JavaScripts are really optimized to load as fast as possible and by doing it in an async way It's not blocking the page load So Google can start building the page or your device can start building the page without having to wait for the JavaScripts to be loaded So this is an example of how you would embed a tweet You just add the Twitter JavaScript that the amp project gives you and then you have an amp Twitter tag With a Twitter ID so Google knows like I have to fetch this to it these tweets and then display it in a in an embed tag And they have other like JavaScripts as well like Google analytics or com score or well There's a lot of JavaScripts that you can already use And images for example, you need like specific tags for all the HTML 5 tags that we know For example a video an image and audio advertisements you need amp variants of these tags. So this is how you would display an image Within amp you use the amp image tag and the thing with amp images It's required to have a width and on height on an image Which is basically a good principle anyway We should do that always since it enables a browser to allocate the space needed to display the image without having to wait before rendering the page or Seeing the content jump when the image is finally loaded So this is a good practice anyway to do but for Google it's required if you don't have the width or the height attributes it won't display the image and There's a few other tags and I listed a few here. So you get an idea of what's possible But they have a really good documentation on all the available tags But you can see it as like Facebook comments and SoundCloud and there are some available integrations to to add to your content page There's also an iFrame so you can use the iFrame for example to to create your own advertisement if you want And if we look at Facebook Apart from having your own Facebook variant of your html There's also a workflow process that you need to follow to get your Items on your Facebook page like displaying the Facebook instead article version So let's look a bit into that First you have to sign into Facebook obviously and enable Facebook instead articles on a page that you maintain It's also very useful to download the Facebook page manager app Which is not the Facebook app but another app That is useful if you manage Facebook pages since you can use the app to to preview all the development articles In the styles that you are going to use I'll come back to that later So then you come to a screen like this and you have to connect Facebook to your website So you have to have a meta tag in your html explaining to to Facebook which Facebook page Belongs to the to the to the website and then you have to add some URLs like testing URL staging production And if you you're going to use The rss workflow to tell Facebook about your articles, which is a one option You can tell Facebook visit the URL of the rss feed with my development articles and with my production articles Um, there's also a way to push articles using the API So you don't need to use the rss workflow, but this is how we how we do it did it with the AFI unique You can create some styles if you want so, um, they have an editor that that you can use to To select colors or to set phones or to I don't know do a logo. It's called the style editor And they have a preview option so you can look like on the right side How the image would look in these styles in these styles For AFI unique we just needed one style with with the orange color But suppose you have a news website with I don't know support section and in the cooking section you can Say to Facebook like all the sports articles. I want to have green green header and for the cooking articles I want a purple heading or whatever you can set quote styles and whatnot It is limited, but you can do You can you can do some things with it So there's an interface with the the articles. This is the development articles overview It's it's using it's displaying all the articles that it fetched in our case from the development rss feed Um And one more thing here is it will display if one of these articles is corrupt For instance, if you use an image tag instead of the specific facebook instant articles image tag It will give you like a warning. This is an invalid article And we will not be publishing this article and you can use a small pencil to update the content in the facebook interface Changing the image tag to the correct tag for example In a production environment, you won't be doing that, but you can use the development Interface to debug your code and make sure the drupal outputs the correct version And then obviously you also have the production overview same same interface But then you can see the status as well that the article is live Um, and one more thing if you want to enable this on your facebook page, you have to go through a review review process Um, so you need five articles That facebook can review and then it will take a few days to get feedback In my View, it seems like a formality since I just added some random articles and it was published uh approved upon without any issues So as an example of how this article would look, let's zoom in a little bit There's three things I want to highlight. You have the canonical tag the link tag to point to the html version Then you have also have the the facebook article style that you can set in this case telling facebook to use the test article style And here's an example of how you would Publish your video and with the loop attribute you can make sure that the video will continues continue playing after it's done So basically kind of similar to html right And then scroll down a little bit more You see an example of time elements Where you can tell facebook that the public the published date and the the modification date of your article So and if you are done making up this whole html you wrap it if you want to use rss In an irregular rss item and then within the content semicolon encoded There you just wrap in in the cdata you just wrap in the full html that we just saw before And this is the pretty easy way to to get your content to facebook In this project we did the integration in custom code Uh using the facebook instant articles sdk. It's a great software development kit that you can use for php It's published on the github the full source code here is on github. It's basically um Around three three elements sorry three three parts of the of the code you can use the elements to Render single elements html elements into facebook instant article elements So for example an image into the required image tag or a video or a piece of text or block code We use the elements a lot since the website is built around the paragraph module And it's really nice if you have a quote paragraph or an image paragraph or a slideshow paragraph to transform these the single uh pieces of content into facebook elements If you use for example a body field with a huge wish week field And the editor is allowed to enter images and whatnot in this wish week field You can use the transformer and that transforms a bunch of html into into separate facebook instant article elements And it also contains the client and you can use the client to push articles to facebook using the api So here's an example of such a uh How you would create an article with the with the sdk? And in this case I just say well, I want to have an instant article Um with a title with a subtitle and a publishing time And in the end this is just a very small one But in the end you just say article render to doc type html So I think it's pretty easy to use and the sdk is pretty good. So uh Our back-end team was really happy with the way it worked So here's an overview of some elements facebook supports. They have a few more Uh, but what you can see it's mostly elements to build up the html on your page It's not really about integrating external systems like google does it's more about we have a blog quote We have a caption. We have a feedback forum, etc. There's a very small link on these slides I will publish my slides obviously after my talk and then you can click all these links So what about monetization? How do facebook and google compare ad wise? So facebook is basically a business partnership you as a page owner you have an agreement with facebook saying well This is the way I want to publish advertisements on my page And then you can use for example the facebook audience network in which case facebook takes a 30 cut Or you can publish your own advertisements within iframes and then you can keep the revenue yourself But it's a bit more work to integrate So this is basically facebook now for google Um, it's kind of comparable. You can use the adsense network. You can use your own uh advertisements within an iframe if you want And the reason that you have to use the iframe is if you want to have your own javascript You need it's the only way to get your own javascripts within this iframe And there were some major media companies reporting less income since they switched to amp on google And they said the ads were loading Slower than they used to before And they're missing income google responded on this On these complaints saying that the advertisement companies or the the publishers weren't using the advertisements As they shoot they could have done better Plus they said they were they were going to increase to to improve these The way ads were displayed and they did since uh 2016 since last year. So here's a few examples of how google Improved their their ads displays So for example The banners themselves are also loaded via amp now and on the right you will see an example of the amp for ads as they call it Uh on an amp for ads enabled advertisement And you will see a difference in speed The banners are on top of the page So you can see a huge difference and you can imagine if you scroll down Like I would scroll down within three seconds yet the ad will already be disappeared before it even is loaded So the amp version is really so it within a second. It's pretty nice Also, if you click on an advertisement Oh, there it is if you click on an advertisement The detail page you land up on is also loaded via amp nowadays so Another example if you click on a link The same advertisement and I click it and I like within a second. I have the the advertisement landing page And it's obviously uh, it's also possible to display an ad within the content Uh, now the amp version is on the left so you can see the difference So if you have to choose like amp face against the articles and budget or time is a limitation which one would you choose And I find it very hard to answer Because it really depends on your target audience and if the target audience of your client mostly Is mostly landing on your webpage via social shares facebook might be beneficial But if people find your website using organic search Google might be very interesting since it displays the New articles above the regular search results So for websites that are mainly around news or recipes, I would say amp is really useful People google for a name of a recipe or they google for a news Subject and then it would be really nice if they Come in via amp However, in our case for genec They have a huge fan base and the fan base is it's interacting on facebook a lot So they saw an increase since they enabled facebook instead articles or 30 percent more traffic to the website And less people abandon abandoning the website But they hardly see any difference Since they enabled amp and it's mainly because the content on the website is like opinionated Deep blog posts. It's not really news. It's not it's not something that people google for Also facebook launched a way to convert facebook instant articles to amp like two or three months ago So if you manage to get this this facebook instant article article using this sdk for example Just like you would render it to html. You can also render it to amp Making it very easy to create a version of facebook as an article and then also create an amp version But before we Cheer and celebrate. I think we should think twice if we want to do this Because do we want to hand over our data to google at facebook? People won't be Visiting your website anymore mainly for for example facebook if you click on an article People only see these articles that are shared on your facebook page But all the other nice articles and relations that you set up in dripple I don't know in the dripple side You usually have like a news article and then a sidebar Maybe you have a link to the author and if you click the order you'll see a listing of all the news articles from this author On all these features you lose these and people only read the articles that you share on your facebook page So People won't be visiting your website anymore And what about the open web and the open data that we used to these two companies now kind of Creating a second web in my opinion In parallel with the open web And what is the impact for us developers? Do we still need to build websites in a few years time or should we just give our data to google or facebook? and I don't know the future future will tell that I think you can do it without them The reason these two companies stood up with these these techniques and tools is because the web page that we built are very slow These numbers from 2015. I think at the moment it might be even worse since we like to have big images big videos on our web pages and we developers are are I would say It's a correct English word We use glass fiber with huge screens to develop websites and we hardly test if a website loads on a slow on a slow device or or a bad connection Making these websites bigger and bigger and bloated and bloated So if we look at google and facebook and see the rules and the tips that they have like the requirements And and use these techniques to improve our own web pages By being reserved for javascript by being reserved with css combining css into one file Using a cdn to deliver your assets for example Use lazy loading for images that are not being displayed above the fold and make sure the goal is Loading the web page within one second. That's very achievable. Let's software to test it and it's not even that hard I think if you you spend a few hours at a current website that you built You can make it much faster within a few hours of work and you and you Help your clients a lot with it so It's a bit opinionated, but I would say I think we can do most of the work that facebook and google do Ourselves as developers just look at what they are doing and their techniques and I'm not sure but My gut feeling would say be careful with implementing them So this is basically what I had to say and I would love to hear your experience is your questions your opinion I'm not an expert. So if you have more to tell the audience, please do But step up to the microphone since this is all recorded. So People at home can hear questions and remarks Hi, thanks for a great talk Sorry, I don't have any experience to share myself, but just a quick look at drupal.org suggests there's at least three modules There's an amp module a simple amp and an amp theme Do you have anything to say about how they support this? Yeah I'm not sure if you could the the sound is a bit soft on the microphone Um, so the question is there are a lot of drupal modules and themes already available. Uh, and what's my experience, right? so During the if a unique website we tested the both the facebook and the amp modules And if you have a basic website or just drupal core with some fields, it works pretty good Within a few minutes you have up and running However, the website that we've built is is hugely built around paragraphs. For example a field collections Um, and it wasn't possible to to implement paragraphs. There's an issue for it So it might might be in the future, but we couldn't we couldn't use it in our project But yeah, if you have a basic drupal fields, it's it's pretty good. Pretty good modules for it There is a talk by the way tomorrow about About google amp and how to implement it in drupal. So it might be interesting to check that out another good dutch guy Eric house from the nilands I was Optimized the websites or accessibility is is one of the main main things you work on We use these tools from facebook and google You also mentioned that with a bit of effort you can speed up your website as well Um, was it worth implementing these tools over optimizing the website yourself? That's a good question In this case the clients Basically told us to implement these techniques. So we didn't we didn't check it out, but it's it's a really good question I think in the time that we spent Implementing amp and and facebook is at articles. I think in 20 percent of the time we could have Get the website to load within a second for sure. It took a it took a pretty much amount of time to implement this more question Is there a much difference in implementing time between those two Uh, according to I I didn't build it myself according to a back-end developer He was really fond of the facebook implementation the sdk that you can use It's really easy to to implement and he had it open running like within I believe a day of developing So, uh, he was very excited about the facebook sdk and he wasn't he was a little less excited about amp But i'm i'm not really sure Thank you Any more questions remarks tips buyers Thank you for your talk and really great presentation Besides facebook and google there are two big players in this Industry or area it's a telegram the messaging app they have also instant articles But it's too different from facebook and google and there is zen it's technology from a yandex It's russian search engine and it's also different from this What's your opinion about the future of this are they going to have a war like it's between react and Angler gs right now or they will merge to something United united unified something unique and they will actually Will end as one one technology. What's your vision? So, um, you know, I'm not I don't know for sure But I would say like competitors for google such as i'm not sure russian search agency or a company or chinese search company They probably gonna gonna make their own software and and competing competing software such as amp Um, but for tools such as telegram might be very beneficial to use the amp since it's open source and they can use it already I'm not sure what happens but I think it's it's it's not a coincidence that facebook now enabled The way a way to like generate an amp version of your Of your page with their software since They they had a feeling that like most a lot of publishers Have to choose between either facebook or google if time or budget is limited limiting factor Uh, but now since they enabled like publishing amp via the facebook sdk They make like that publishes choose facebook maybe above google But i'm not sure about the other competitors So, uh before you run away, please remind you to the contributions print on friday If this is your first time at drupal con It's really amazing experience. I attended mine first. I think four or five years ago Uh, they have a lot of mentors Who are very eager to help you write in your first patch testing your first patch And at the end of the day, it will finish with a live commit on stage by usually web check or trees Uh, it's a goosebump moment. So if you haven't attended one before, please do it's really exciting And help me giving better presentations in the future The drupal con if there will be a drupal con next year Do the survey and uh, please Help us make new sessions better. So thanks very much and have a great drupal con