fix(performance-and-seo): formatting of responsiveness and google sec…

…tions (#458)

build.washingtonpost.com/docs/resources/guides/performance-and-seo.mdx

@@ -34,46 +34,62 @@ Web performance and SEO are vital for providing a positive user experience, incr
 ## Web Performance
 
 1. Loading performance:
-   - Optimize images by compressing them, using responsive images for different screen sizes, and implementing lazy loading to defer the loading of off-screen images until they are needed.
-   - Minify and compress CSS, JavaScript, and HTML files to reduce their size and improve load times.
-   - Use Content Delivery Networks (CDNs) to distribute static assets across a network of servers, reducing latency and improving load times for users around the world.
+
+- Optimize images by compressing them, using responsive images for different screen sizes, and implementing lazy loading to defer the loading of off-screen images until they are needed.
+- Minify and compress CSS, JavaScript, and HTML files to reduce their size and improve load times.
+- Use Content Delivery Networks (CDNs) to distribute static assets across a network of servers, reducing latency and improving load times for users around the world.
+
 2. Rendering performance:
-   - Optimize the critical rendering path by minimizing the number of critical resources and prioritizing the loading of above-the-fold content. This helps ensure that users see content faster.
-   - Use efficient CSS selectors to minimize browser work during the rendering process, and avoid layout thrashing by batching DOM updates and minimizing forced reflows.
-   - Optimize JavaScript execution by deferring or asynchronously loading non-critical scripts, profiling and optimizing JavaScript performance, and using requestAnimationFrame for animations.
-3. Responsiveness: - Design websites for various screen sizes and devices to ensure a consistent and enjoyable user experience across different contexts. - Implement responsive design techniques, such as fluid grids, flexible images, CSS Flexbox, and Grid Layout, to create adaptable layouts that adjust to different screen sizes and orientations. - While JavaScript can be used for certain aspects of responsive design, it's generally recommended to prioritize CSS for controlling the layout and visual presentation of the page at different viewport sizes. CSS-based solutions typically perform better, require less code, and can be managed within stylesheets, keeping the separation of concerns between style and functionality. - JavaScript should ideally be used for interactivity and enhancing the user experience, not for managing core layout changes wherever possible. In some complex scenarios, JavaScript might be required to achieve advanced responsive behaviors that CSS alone can't handle. In these cases, care should be taken to ensure performance and accessibility are not negatively impacted.
+
+- Optimize the critical rendering path by minimizing the number of critical resources and prioritizing the loading of above-the-fold content. This helps ensure that users see content faster.
+- Use efficient CSS selectors to minimize browser work during the rendering process, and avoid layout thrashing by batching DOM updates and minimizing forced reflows.
+- Optimize JavaScript execution by deferring or asynchronously loading non-critical scripts, profiling and optimizing JavaScript performance, and using requestAnimationFrame for animations.
+
+3. Responsiveness:
+
+- Design websites for various screen sizes and devices to ensure a consistent and enjoyable user experience across different contexts.
+- Implement responsive design techniques, such as fluid grids, flexible images, CSS Flexbox, and Grid Layout, to create adaptable layouts that adjust to different screen sizes and orientations.
+- While JavaScript can be used for certain aspects of responsive design, it's generally recommended to prioritize CSS for controlling the layout and visual presentation of the page at different viewport sizes. CSS-based solutions typically perform better, require less code, and can be managed within stylesheets, keeping the separation of concerns between style and functionality.
+- JavaScript should ideally be used for interactivity and enhancing the user experience, not for managing core layout changes wherever possible. In some complex scenarios, JavaScript might be required to achieve advanced responsive behaviors that CSS alone can't handle. In these cases, care should be taken to ensure performance and accessibility are not negatively impacted.
 
 ---
 
 ## SEO (Search Engine Optimization)
 
 1. On-page SEO:
-   - Use descriptive and concise title tags to accurately represent the content of each page, helping search engines understand its purpose and relevance.
-   - Optimize meta tags for both users and search engines:
-     - Write informative and unique `meta description` tags to give users a preview of the page content, improving click-through rates from search results.
-     - Utilize `meta lang` tags to specify the language of the site's content for better search engine understanding and accessibility.
-     - Implement `Open Graph` meta tags to enhance how the pages appear in social media shares, providing richer snippets that attract more engagement.
-     - Use `meta robots` tags to guide search engines on what to do with the site's pages. For instance, you can instruct them not to index a page, or not to follow any links on a page.
-     - Remember, each meta tag serves a distinct purpose, so ensure they are used appropriately and are relevant to the page's content.
-   - Use header tags (H1, H2, H3) effectively to structure content and provide hierarchy, making it easier for search engines to understand the content's importance.
-   - Optimize URL structures by making them readable, descriptive, and concise, helping both users and search engines understand the page's content.
+
+- Use descriptive and concise title tags to accurately represent the content of each page, helping search engines understand its purpose and relevance.
+- Optimize meta tags for both users and search engines:
+  - Write informative and unique `meta description` tags to give users a preview of the page content, improving click-through rates from search results.
+  - Utilize `meta lang` tags to specify the language of the site's content for better search engine understanding and accessibility.
+  - Implement `Open Graph` meta tags to enhance how the pages appear in social media shares, providing richer snippets that attract more engagement.
+  - Use `meta robots` tags to guide search engines on what to do with the site's pages. For instance, you can instruct them not to index a page, or not to follow any links on a page.
+  - Remember, each meta tag serves a distinct purpose, so ensure they are used appropriately and are relevant to the page's content.
+- Use header tags (H1, H2, H3) effectively to structure content and provide hierarchy, making it easier for search engines to understand the content's importance.
+- Optimize URL structures by making them readable, descriptive, and concise, helping both users and search engines understand the page's content.
+
 2. Content optimization:
-   - Write high-quality, unique, and engaging content to satisfy user intent and increase the likelihood of ranking higher in search results.
-   - Use proper keyword targeting by including relevant keywords naturally within the content and avoiding keyword stuffing, which can harm rankings.
-   - Optimize images by using descriptive alt text, relevant file names, and compressing images to reduce file sizes, improving page load times.
+
+- Write high-quality, unique, and engaging content to satisfy user intent and increase the likelihood of ranking higher in search results.
+- Use proper keyword targeting by including relevant keywords naturally within the content and avoiding keyword stuffing, which can harm rankings.
+- Optimize images by using descriptive alt text, relevant file names, and compressing images to reduce file sizes, improving page load times.
+
 3. Technical SEO:
-   - Improve site speed by optimizing page load times, as faster-loading pages are more likely to rank higher in search results.
-   - Implement structured data (schema markup) using JSON-LD to provide additional context for search engines, potentially improving search result appearance and click-through rates. Here are some resources to delve deeper:
-     - Understand how to structure data in JSON-LD format. You might use schemas such as `NewsArticle`, `LiveBlogPosting`, and more depending on the content (here is an [example](https://validator.schema.org/#url=https%3A%2F%2Fwww.washingtonpost.com%2Flifestyle%2F2023%2F03%2F15%2Fdog-adoption-potcake-turks-caicos%2F)). Check the JSON-LD website and the Google's guide for further learning.
-     - Always validate the schema markups for correctness. Use tools like the Google's Structured Data Testing Tool or Schema Validator to ensure the JSON-LD is error-free and up to standard.
-     - Remember, a well-structured schema markup can enhance visibility in search engine results, improve click-through rates, and provide a better understanding of the page content to search engines.
-   - Ensure crawlability and indexability by properly configuring robots.txt and creating XML sitemaps, helping search engines discover and index the site's content.
-   - Use canonical tags to avoid duplicate content issues and signal to search engines which version of a page should be considered the original.
-   - Implement HTTPS and secure the site to protect user data and improve trust with both users and search engines.
+
+- Improve site speed by optimizing page load times, as faster-loading pages are more likely to rank higher in search results.
+- Implement structured data (schema markup) using JSON-LD to provide additional context for search engines, potentially improving search result appearance and click-through rates. Here are some resources to delve deeper:
+  - Understand how to structure data in JSON-LD format. You might use schemas such as `NewsArticle`, `LiveBlogPosting`, and more depending on the content (here is an [example](https://validator.schema.org/#url=https%3A%2F%2Fwww.washingtonpost.com%2Flifestyle%2F2023%2F03%2F15%2Fdog-adoption-potcake-turks-caicos%2F)). Check the JSON-LD website and the Google's guide for further learning.
+  - Always validate the schema markups for correctness. Use tools like the Google's Structured Data Testing Tool or Schema Validator to ensure the JSON-LD is error-free and up to standard.
+  - Remember, a well-structured schema markup can enhance visibility in search engine results, improve click-through rates, and provide a better understanding of the page content to search engines.
+- Ensure crawlability and indexability by properly configuring robots.txt and creating XML sitemaps, helping search engines discover and index the site's content.
+- Use canonical tags to avoid duplicate content issues and signal to search engines which version of a page should be considered the original.
+- Implement HTTPS and secure the site to protect user data and improve trust with both users and search engines.
+
 4. Off-page SEO:
-   - Build high-quality and relevant backlinks from authoritative websites, as they serve as signals of the site's credibility and trustworthiness.
-   - Utilize social media for content promotion, expanding the content's reach and potentially attracting more backlinks and organic traffic.
-   - Consider guest posting and content outreach to build relationships with other websites and influencers, increasing the site's visibility and authority.
+
+- Build high-quality and relevant backlinks from authoritative websites, as they serve as signals of the site's credibility and trustworthiness.
+- Utilize social media for content promotion, expanding the content's reach and potentially attracting more backlinks and organic traffic.
+- Consider guest posting and content outreach to build relationships with other websites and influencers, increasing the site's visibility and authority.
 
 ---
 
@@ -84,7 +100,9 @@ Web performance and SEO are vital for providing a positive user experience, incr
   - WebPageTest: A free web performance tool that allows you to run tests from multiple locations and browsers, providing detailed information on load times, rendering, and other performance metrics.
   - Catchpoint (RUM): Real User Monitoring tools like Catchpoint help track real user interactions with the site, giving you an accurate picture of actual user experiences across various devices and network conditions. While synthetic tests are useful for simulating specific scenarios or devices, RUM data offers real-world insights that can inform optimization efforts.
   - Track Core Web Vitals (CWV) trends: Collaborate with the analytics team to request a report highlighting CWV improvements over a specific time range, or verify the trend directly in the Google Analytics CWV Dashboard, which allows for filtering by page type, date range, mobile versus desktop, and more. Verify trends in the Catchpoint RUM Web Vitals dashboard for the same time range. Although synthetic tests, like Lighthouse or Chrome extensions, can provide useful instant feedback, they are not sufficient to confirm impact at scale. Therefore, make sure to use a combination of these resources to gather comprehensive insights about the site's performance over time.
-- Set up SEO tracking and reporting: Implement tools like Google Search Console and Google Analytics to track and report on the site's SEO performance. These tools offer insights into organic traffic, search queries, click-through rates, and other valuable SEO-related data. - Google Search Console: A free service offered by Google that helps you monitor, maintain, and troubleshoot the site's presence in Google Search results. It provides information on indexing status, search queries, and any issues that might be affecting the site's visibility. - Google Analytics: A comprehensive web analytics service that provides insights into website traffic, user behavior, and other performance metrics. With Google Analytics, you can track organic traffic, user engagement, and the effectiveness of the SEO efforts. Integrating Google Analytics with Google Search Console can provide more in-depth data on the site's SEO performance.
+- Set up SEO tracking and reporting: Implement tools like Google Search Console and Google Analytics to track and report on the site's SEO performance. These tools offer insights into organic traffic, search queries, click-through rates, and other valuable SEO-related data.
+  - Google Search Console: A free service offered by Google that helps you monitor, maintain, and troubleshoot the site's presence in Google Search results. It provides information on indexing status, search queries, and any issues that might be affecting the site's visibility.
+  - Google Analytics: A comprehensive web analytics service that provides insights into website traffic, user behavior, and other performance metrics. With Google Analytics, you can track organic traffic, user engagement, and the effectiveness of the SEO efforts. Integrating Google Analytics with Google Search Console can provide more in-depth data on the site's SEO performance.
 
 ---