Drupal Website Optimisation Guide: Enhance Your Digital Investment
•Download as PPTX, PDF•
0 likes•288 views
In the modernised business world, our digital assets are one of our biggest investments. We need our digital assets to be built for the ultimate user experience: one that performs in usability, find-ability, speed and security, and one that simultaneously provides rich, personalised digital experiences. In this presentation, Imon Hoque, CTO of Sitback Solutions, discusses key trends for technical marketers in SEO and Accessibility of Drupal Websites. This is part 1 of 2. Part 2: How to Optimise your Drupal Website for Security and Personalisation: https://www.slideshare.net/Sitback-Solutions/how-to-optimise-your-drupal-website-for-security-and-personalisation-part-2/ Read more about this presentation - and get tons more information - on our blog: https://blog.sitback.com.au/blog/optimise-drupal-website-seo-security
Recommended
Recommended
More Related Content
Similar to Drupal Website Optimisation Guide: Enhance Your Digital Investment
Similar to Drupal Website Optimisation Guide: Enhance Your Digital Investment (20)
Recently uploaded
Recently uploaded (20)
Drupal Website Optimisation Guide: Enhance Your Digital Investment
- 1. Drupal Website Optimisation: How to protect & enhance your digital investment Imon Hoque CTO, Sitback Solutions &
- 3. 3 Sitback Solutions Neglected & forgotten Maintained & Optimised Build. Maintain. Optimise.
- 4. 4 Sitback Solutions Focus areas for maintenance & optimisation ▸Core Web Vitals & SEO ▸Accessibility ▸Security ▸Hosting ▸Personalisation
- 5. Core Web Vitals & SEO Ensure your website performs at it's best and ranks well in Google so your customers can find you no matter where they are or what device they're using
- 6. 6 Sitback Solutions Core Web Vitals An initiative by Google to provide unified guidance for the quality of the website’s performance to deliver a great user experience
- 7. 7 Sitback Solutions Pillars of UX Essential metrics for a healthy website ▸Loading performance ▸Ease of interaction ▸Visual stability
- 9. 9 Sitback Solutions ▸Organic search results ▸Quality of organic traffic ▸Quantity of organic traffic WHY IS SEO IMPORTANT?
- 10. 10 Sitback Solutions ▸Organic search results ▸Quality of organic traffic ▸Quantity of organic traffic WHY IS SEO IMPORTANT? ▸Content ▸Semantics (HTML) ▸Performance WHAT ARE THE MAIN ASPECTS?
- 11. 11 Sitback Solutions Core Web Vitals & Drupal MODULES ▸Advanced CSS/JS Aggregation ▸Image, Responsive Image and Breakpoint ▸WebP module DEVELOPMENT APPROACH / FEATURES ▸Enable text compression (gzip, deflate, or brotli) to minimize total network bytes ▸Use https://pagespeed.web.dev ▸Or use NodeJs to install “lighthouse” and “lighthouse-stack- packs”, and use it via CLI
- 13. 13 Sitback Solutions SEO & Drupal MODULES ▸Drupal SEO Checklist ▸Pathauto ▸Metatag ▸XML Sitemap ▸Redirect ▸Schema.org Metatag DEVELOPMENT APPROACH / FEATURES ▸Site’s performance
- 16. 16 Sitback Solutions Core Web Vitals & SEO ▸User Experience ▸Organic Search Results
- 17. Accessibility Increase your customer-base by 20% with the core concepts you need to know to ensure that anyone, regardless of ability, can use your website
- 18. 18 Sitback Solutions Low/no Vision Hearing Loss Limited movement Speech disability Photosensitivity Cognitive limitations Accessibility The concept of whether a product or service can be used by everyone— however they encounter it.
- 24. 24 Sitback Solutions Accessibility & Drupal Drupal Core has been designed to support the development of sites that comply with WCAG • Drupal’s key accessibility principles https://www.drupal.org/node/465106 • External accessibility resources https://www.drupal.org/docs/accessibility/ext ernal-accessibility-resources The basic principles to keep in mind: ▸All non-text content has alternative text ▸Links make sense out of context ▸Media has captions and/or transcripts ▸Non-HTML content is accessible i.e. if you have an image ensure the image has a proper alt text ▸Users can skip repetitive elements on the page ▸Meaning is not conveyed through colour alone ▸Users can access content from various devices and browsers
- 25. 25 Sitback Solutions Accessibility & Drupal MODULES ▸Civic Accessibility Toolbar ▸High contrast ▸Block ARIA Landmark Roles ▸htmlLawed ▸Additional modules: ▸https://www.drupal.org/docs/accessibility/contrib uted-modules-for-extending-accessibility-in- drupal
- 26. 26 Sitback Solutions Auto Alter Using Azure Cognitive Services www.drupal.org/project/auto_alter With 76.75% confidence level, the API describes the image as: "a rainbow in the sky"
- 27. 27 Sitback Solutions Accessibility & Drupal ▸Accessibility can increase user base by 20% ▸Semantic HTML ▸Follow the Accessibility guidelines and principles ▸Use WebAIM and WAVE tools to audit
- 28. Get in Touch Imon Hoque CTO, Sitback Solutions Imon.hoque@sitback.com.au www.sitback.com.au
Editor's Notes
- Welcome, everyone!! Today, I will discuss and present some topics that are essential to be aware of for anyone involved with the web industry. The content is not tech-heavy, as the presentation is not purely focused on developers. So, I am hoping both technical and non-technical audiences will benefit and take away some helpful information. Before I get started with the topics, I want to give a quick intro about myself I am Imon, I am currently working at Sitback Solutions as the CTO. I have been lucky enough to work across multiple platforms for the last 20 years, and half of that was with different Content Management Solutions across .NET and PHP tech stack. Out of all the different CMSs that I have worked with, Drupal is the one that I have used the most and is one of my favourites. So, I will bring my two passions together in this presentation today – A Quality Web Solution and Drupal! NEXT SLIDE
- So, to get started, the first thing I want you to consider is … Is building a website the most significant activity of an organisation’s digital presence & identity? In a broad context, yes! This represents your digital presence, allows access to your door to the whole internet world, but this is not the end of the journey, just the first step. Like you do not reach your destination in one step, only focusing on building a new website does not get you to your end goal. Why? NEXT SLIDE
- Think of buying a new car fresh from the showroom floor. If you don’t invest in maintaining it or taking it for servicing as per the recommended interval… … What will happen? It will start to have problems, and at some point, stop working. It is the same concept. You need to maintain your website. Depending on the technological changes happening and the changes within your business, you will need to keep tweaking it to keep it up to date, relevant and secure. Otherwise, you will end up with a site that does not work. Instead of adding value to your business, it will start to have a negative impact on your brand. But even then, maintaining your car in showroom condition is one thing. Wouldn’t it be even better to improve it further compared to when you bought it? Upgrade the in-car entertainment system, the wheels, the engine management system, extend the safety features… Again, it’s the same with your website. As your customer’s preferences change, your business requirements change, and search engine’s algorithms change, you should continue to optimise the performance of your website. Nowadays, even a restaurant with a poor website experience will likely lose out on drawing in new customers who haven’t been there before. Customers expect a great experience online and offline. So, what do you need to do? NEXT SLIDE
- Applying the upgrades and patches released for your software are the most obvious and required items. In this case, for Drupal, will be the Drupal core and the contributed modules. But besides those, you need to take into consideration a few other items. The technical items which are most important from a User Experience perspective are: Core Web Vital & SEO Accessibility Security Hosting Personalisation So, I will discuss each of these items briefly today, focusing on why they are essential and some potential activities that can be actioned. NEXT SLIDE
- Starting with Core Web Vitals & SEO … Core Web Vitals & SEO are important because these two combined covers the primary items that will have the most effect on the user experience of your website. These two ensure your website performs at its best and ranks well in the search engines so your customers can find you. NEXT SLIDE
- Web Vitals is a comparatively new concept; it is an initiative by Google to provide unified guidance for the quality of the website’s performance to deliver a great user experience. A subset of the web vitals has been identified as the core web vitals, which allows the site owners to understand the quality of experience they are delivering to their users without needing to be technical performance gurus. NEXT SLIDE
- The primary focus areas of the core web vitals are – page loading performance, ease of interaction and the visual stability of a page from a user’s perspective. The associated metrics are –
- Largest contentful paint – which is the render time of the largest blocks becoming visible to an audience. For LCP, the aim is to keep it under 2.5 seconds. First Input delay - the time it takes a page element to respond from a user’s input. FID ideally should be 100 milliseconds And Cumulative Layout Shift, a metric that measures visual stability, identifies links or buttons that shift after a web page has loaded and reflected the level of difficulty users will experience when trying to engage with elements on your site once a page renders. CLS should be less than 0.1 The combination of these three indicates the quality of experience of the users visiting the site. So, Google has now incorporated these as part of their SEO ranking algorithm. If the score of core web vital is low, it will have a negative impact on that site’s ranking in Google search results as it is not delivering a good user experience. So… talking about SEO … (GO TO NEXT SLIDE)
- It is important because it improves the appearance and positioning of web pages in organic search results. Organic search is the most prominent way for people to discover and access online content. The three main aspects of SEO that you need to be aware of are: Organic search results, which is the unpaid listings on a search engine results page that the search engine has determined are most relevant to the user’s query. Quality of organic traffic, that is how relevant the user and their search query are to the content that exists on your website. Quantity of organic traffic, which is the number of users who reach your site via organic search results. Now, how do you ensure SEO? NEXT SLIDE
- The three main aspects of SEO are – content, semantics and performance. Having the right content is a must, but it is similarly important to ensure the semantic and the performance. Semantic HTML is what tells the crawlers how your content is structured, and which part of the content is representing what information. For example, a keyword in the H1 tag will be prioritised compared to a word in the DIV tag. If you are writing a paragraph, use the P tag, and for an article put it in the ARTICLE tag. If the content is not presented semantically correctly, search engines won’t be able to interpret the content properly. And as I have mentioned previously focusing on user experience, core web vitals has now become an integral part, that is what covers the performance side of life. Now, what can you do in your Drupal solution for Core Web Vitals and SEO? NEXT SLIDE
- Obviously, the site will need to be built following Drupal and software engineering best practices. There are also some modules that will help with performance improvement as well. For example: Advanced CSS/JS Aggregation – it will improve the load time by aggregating and caching CSS and JS The combination of Image, Responsive Image and breakpoint module will allow you to serve images faster by optimising the image for the target device The WebP module - Whenever an image style derivative is created, this module will also create a WebP copy of the derivative to be served to supporting browsers. WebP is an image format introduced by Google with the aim of improving the size and performance of images on the web. You can also ensure gzip compression is configured to minimise the total size of the content transferred over the network. NEXT SLIDE
- You can check your site’s core web vitals via https://pagespeed.web.dev, or you can use the Google Lighthouse browser plugin. I would recommend using the Web Dev site as it gives you a more accurate representation of the end-user experience. Because the browser version’s result can be skewed due to local caching. If you are interested, you can also set up the command line interface of the lighthouse tool to use during the development phase to ensure the build is optimised. By the way, we will share the links of the websites and the modules I have mentioned here and in the following slides in a follow-up email, so don’t worry about writing them down Now for SEO (NEXT SLIDE)
- For SEO, the most important thing is well structured and Semantic HTML, and the content. Besides that, these are some Drupal modules that you can leverage: As I have mentioned, I will share the link to each of these modules in a follow-up email. I would want to highlight the SEO checklist and the Redirect module: NEXT SLIDE
- The Drupal SEO Checklist module will provide you with a functional to-do list of modules and tasks that you can action. It breaks the tasks down into functional needs like Title Tags, Paths, Content etc. Next to each task, it will provide you with a link to download the relevant modules and a link to the proper admin screen of your website so that you can configure the settings perfectly. The Redirect module will automatically create a redirect from an old URL to the new URL when the URL of a page is changed or updated. NEXT SLIDE
- You can also use the web.dev site to identify if there are any SEO issues on your site and the overall SEO quality. It will provide you with some useful insights that you will be able to implement and improve your site’s SEO NEXT SLIDE
- So, by focusing on Web Core Vitals and SEO, you are ensuring your target audience can find your website easily and get a good user experience when they visit your site. But does this apply to ALL of your customers? Well, it turns out, no. There is something else you can be doing that will both improve your organic SEO ranking AND increase your potential audience size. This brings me to the next topic… Accessibility NEXT SLIDE
- You might be thinking, Accessibility is only required for people with disabilities, and you anticipate the majority of your user base will most likely not have any disabilities… In Australia, as per the Australia Human Rights Commission, 20% of Australians have some kind of disability, that is one in every five users. Besides that, I will also explain to you how improving accessibility is not only helping people with disabilities, it also helps improve the user experience for everyone & SEO. And last but definitely not the least… The Australian government has a requirement for all public sites to ensure they meet the WCAG 2.1 AA standards. NEXT SLIDE
- Since they have similarities, accessibility is sometimes confused with usability. Both overlap and are vital parts of user experience (UX) design, but there are also key distinctions between them. Usability is concerned with whether designs are effective, efficient and satisfying to use. But the focus of accessibility is to ensure the service/product is usable by everyone regardless of ability. The Web Content Accessibility Group or also known as WCAG, guidelines are a series of recommendations aimed at making content on the Web more accessible. By adhering to the guidelines in this document, and with careful curation of content, your site should be much more usable for customers with disabilities. The guidelines do not guarantee to make your site 100% usable for absolutely everyone with a disability but are a set of recommendations that will allow the greatest number of people to experience your content without being limited by their differences. The guidelines accommodate blindness and low vision, deafness and hearing loss, limited movement, speech disabilities, photosensitivity, and some accommodation for learning disabilities and cognitive limitations. NEXT SLIDE
- I would like to share a video that will demonstrate how people with vision disability interacts with a website
- As I have mentioned earlier, the accessibility issue does not only affect people with disabilities but has a wider impact. Even if someone doesn’t have a disability, a site that is not accessible causes challenges - such as decreased performance, complexity in navigating information Accessibility standardises the page and content, improves rendering in the browser, improves performance, and improves user experience For example - Video captions that help people with hearing difficulties also help a person who is watching the video on mute (for example, in a social media feed). Or even it can be an often ignored disability such as colour blindness, in Australia, as per one statistic, 8% of males are colour blind. How often do we take into consideration the proper colour contrast… or even just the font size for people with eyesight issues. A larger font size will allow people to read with ease and can also keep the monitor or the devices at a safe distance. NEXT SLIDE
- There are some tools available that you can easily use to identify the most common accessibility issues and resolve them. The two that I would like to recommend are Accessibility Insights and Web Accessibility In Mind. We will share the links to these sites in a follow-up email. Both of them has browser plugins. The one from Web Accessibility In Mind is the easiest one to use to get some quick wins and the one from Accessibility Insights is good for a complete audit. NEXT SLIDE
- One of the essential parts of Accessibility is Semantic HTML. The screen readers need to understand your content by reading the text, and as such, your HTML needs to be semantically correct. It is similar to what I mentioned about SEO, as both have similar dependencies. In one case, you have your search engine’s crawlers reading your site’s content, and in this case, the screen readers. NEXT SLIDE
- Here I have shared links to a generic pattern library and the NSW’s digital systems component library. You can leverage these for your site’s components. NEXT SLIDE
- Now for Drupal itself, accessibility is an important part, and the core is designed to support the WCAG standards. Often we see websites that may have been accessible when they were first built, but then overtime, because content editors are not familiar with accessibility standards, they slowly become less and less accessible. Thankfully, with a well-built site, there are some basic and common principles that you just need to keep in mind to stay on top of things, for example: All non-text content has alternative text Links make sense out of context Media has captions and/or transcripts Non-HTML content is accessible - if you have an image ensure the image has a proper alt text Users can skip repetitive elements on the page Meaning is not conveyed through colour alone Users can access content from various devices and browsers For further details on the principles and more Drupal specific resources, I am going to share the relevant links in our follow-up email. NEXT SLIDE
- Some Drupal modules that can help you with Accessibility are: Civic Accessibility Toolbar It is Drupal 9 ready and gives the user a toolbar to switch between theme versions with higher colour contrast and change font sizes. High contrast Provides a quick solution to allow the user to switch between the active theme and a high contrast version of it. It has a stable release for D7 and a beta version for D8 Block aria This module adds additional elements to the block configuration forms that allow users to assign ARIA landmark role and ARIA labels to a block. It has stable versions for both D7 and D8 By the way, ARIA refers to Accessible Rich Internet Applications, is a set of attributes that define ways to make web content and web applications more accessible to people with disabilities. htmlLawed The htmLawed module can be used to set HTML policies and enforce it. NEXT SLIDE
- And finally the Auto Alter, is an interesting module, because it will automatically add the alt text for the images. It uses Azure cognitive services to interpret an image and add the appropriate alt text. NEXT SLIDE
- So, to summarise, by improving your site’s accessibility, you have the potential of increasing your user base by 20% as that is the percentage of Australian who has some sort of disabilities and therefore might otherwise struggle to use your website You will need to keep in mind your HTML should be semantically correct to allow screen readers and search engine crawlers to be able to read your site contents properly You should familiarise yourself with the Accessibility Guidelines and principles so that you can keep them in mind while working on your website, and help to keep it accessible And finally you can use the tools that I have shared to do an initial audit of your site to identify the quick wins that can be easily fixed to improve your site’s accessibility. And now that we have discussed about your site’s performance, reachability and accessibility, the next thing to focus is the security of the website. NEXT SLIDE