Introduction

Mobile performance optimization is a crucial aspect of modern web development. With the increasing reliance on mobile devices for browsing, shopping, and consuming content, ensuring a fast and smooth mobile experience is more important than ever. Users expect web pages to load quickly and interact seamlessly, and search engines prioritize fast-loading mobile-friendly sites in their rankings. Therefore, optimizing mobile performance is essential for both user satisfaction and SEO.

In this article, we will explore three key strategies for mobile performance optimization: AMP (Accelerated Mobile Pages), Adaptive vs. Responsive design, and Touch and Interactivity optimizations. Each strategy offers unique benefits and challenges, and understanding how to implement them effectively can significantly enhance your website’s mobile performance.

  1. AMP (Accelerated Mobile Pages): AMP is a framework developed by Google to create fast-loading mobile pages. It simplifies the HTML and CSS used on web pages, enabling quicker loading times and a smoother user experience. We will delve into the pros and cons of using AMP, how to implement it, and its impact on mobile performance.

  2. Adaptive vs. Responsive Design: Both adaptive and responsive design approaches aim to create mobile-friendly websites, but they do so in different ways. Adaptive design delivers tailored experiences for different devices by detecting the device type and loading the appropriate version of the website. Responsive design, on the other hand, uses flexible layouts and media queries to adjust the site’s appearance based on the screen size. We will compare these two approaches, discuss their advantages and disadvantages, and provide implementation techniques to help you choose the right strategy for your project.

  3. Touch and Interactivity Optimizations: Mobile devices rely heavily on touch interactions, and optimizing these interactions is crucial for providing a responsive and enjoyable user experience. We will explore best practices for touch optimization, techniques for improving touch event handling, and case studies demonstrating successful touch optimizations.

By the end of this article, you will have a comprehensive understanding of how to optimize your website for mobile performance, ensuring faster load times, better user engagement, and improved SEO rankings. Let’s dive in and explore these strategies in detail.

AMP (Accelerated Mobile Pages)

What is AMP?

Definition and Purpose

AMP, or Accelerated Mobile Pages, is an open-source framework developed by Google to enhance the speed and performance of web pages on mobile devices. The primary goal of AMP is to create web pages that load almost instantly, providing a smoother and more engaging user experience. AMP achieves this by enforcing strict guidelines on how HTML, JavaScript, and CSS can be used, essentially streamlining web pages for faster load times.

Key Components and Features

  1. AMP HTML: A subset of HTML that includes some custom tags and properties, focusing on performance. It removes certain elements that can slow down the rendering of pages, such as third-party JavaScript and forms.

  2. AMP JavaScript: A JavaScript library that ensures the fast rendering of AMP HTML pages. It manages the resource loading and provides custom tags for AMP elements.

  3. AMP Cache: A content delivery network (CDN) that caches AMP content and serves it from Google’s servers, ensuring faster load times. The cache also validates the AMP content to ensure it complies with the AMP HTML specification.

Pros of AMP

Faster Loading Times

AMP pages are designed to load almost instantly, significantly improving the user experience on mobile devices. By limiting the use of heavy JavaScript and optimizing the HTML and CSS, AMP ensures that pages are lightweight and quick to render.

Improved Mobile SEO

Google prioritizes fast-loading mobile pages in its search results, and AMP pages often receive a boost in rankings. This can lead to increased visibility and higher click-through rates from search engine results pages (SERPs).

Higher User Engagement

Faster load times lead to lower bounce rates and higher user engagement. Users are more likely to stay on a site and interact with its content if the pages load quickly and smoothly.

Better Ad Performance

AMP supports a variety of ad formats and networks, and the faster load times can lead to better ad viewability and click-through rates. Advertisers benefit from higher engagement, while publishers enjoy increased ad revenue.

Cons of AMP

Limited Design Flexibility

AMP enforces strict guidelines on how web pages can be structured and styled, which can limit creative freedom. Certain interactive elements and custom JavaScript may not be allowed, potentially reducing the richness of the user experience.

Dependency on Google’s Ecosystem

By adopting AMP, publishers and developers become more reliant on Google’s ecosystem, including its caching servers and validation tools. This can lead to concerns about data privacy and control over content.

Potential Issues with Analytics and Tracking

AMP’s streamlined approach can complicate analytics and tracking implementations. Some tracking scripts and tags may not be supported, and integrating third-party analytics tools can require additional configuration and workarounds.

Implementing AMP

Step-by-Step Guide with Code Snippets

  1. Create an AMP HTML Document

    <!DOCTYPE html>
<html ⚡>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width,minimum-scale=1,initial-scale=1"
    />
    <link rel="canonical" href="self.html" />
    <style amp-boilerplate>
      body {
        visibility: hidden;
      }
    </style>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>AMP Example</title>
  </head>
  <body>
    <h1>Welcome to AMP</h1>
    <p>This is an example of an AMP page.</p>
  </body>
</html>

  2. Add AMP Components

    <amp-img
  src="https://example.com/image.jpg"
  width="600"
  height="400"
  layout="responsive"
></amp-img>
<amp-carousel width="400" height="300" layout="responsive" type="slides">
  <amp-img
    src="https://example.com/slide1.jpg"
    width="400"
    height="300"
    layout="responsive"
  ></amp-img>
  <amp-img
    src="https://example.com/slide2.jpg"
    width="400"
    height="300"
    layout="responsive"
  ></amp-img>
</amp-carousel>

  3. Include AMP Analytics

    <amp-analytics type="googleanalytics">
  <script type="application/json">
    {
      "vars": {
        "account": "UA-XXXXX-Y"
      },
      "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "pageview"
        }
      }
    }
  </script>
</amp-analytics>

Common Challenges and How to Overcome Them

  1. Validating AMP Pages

    Use the AMP Validator tool to ensure your AMP pages comply with the specifications. Any issues found should be resolved to avoid rendering problems and to ensure the pages are eligible for AMP Cache.

  2. Handling Analytics

    Integrate AMP Analytics components properly and test to ensure accurate tracking. Use Google Tag Manager or other supported analytics tools to streamline the process.

  3. Design Limitations

    Work within the constraints of AMP HTML by using AMP-approved components and ensuring that the user experience remains engaging despite the limitations. Creative use of AMP components can often replicate the desired effects.

Case Studies

Example 1: The Washington Post

The Washington Post implemented AMP to improve the load times of their news articles. They observed a significant reduction in page load times, leading to a 23% increase in mobile search users who return within 7 days.

Example 2: Gizmodo

Gizmodo adopted AMP to enhance their mobile user experience. The implementation led to faster load times and improved user engagement, with a notable increase in page views and time spent on the site.

Example 3: eBay

eBay used AMP for their product pages, resulting in quicker load times and a better user experience for mobile shoppers. This helped reduce bounce rates and increase conversions.

By implementing AMP, websites can significantly enhance their mobile performance, leading to better SEO, higher user engagement, and improved ad performance. However, it is important to weigh the pros and cons and consider the specific needs and goals of your website before adopting AMP.

Adaptive vs. Responsive Design for Mobile

Definitions

What is Adaptive Design?

Adaptive design is a design strategy where different layouts are created for multiple screen sizes. In an adaptive design, distinct templates are tailored for various devices, such as desktops, tablets, and smartphones. The server detects the user’s device and delivers the corresponding pre-defined layout, ensuring that the content is optimized for the specific screen size.

What is Responsive Design?

Responsive design is a flexible approach to web design that uses fluid grids, flexible images, and CSS media queries to adjust the layout of a website dynamically. Instead of creating separate layouts for different devices, responsive design allows a single layout to adapt to any screen size, providing a consistent user experience across all devices.

Pros and Cons

Pros of Adaptive Design

  • Custom Experience: Offers tailored user experiences for different devices, optimizing usability and performance for each screen size.

  • Performance Optimization: Allows designers to optimize content and features for specific devices, potentially improving load times and performance.

  • Targeted Design: Provides the ability to create highly specialized designs that cater to the unique capabilities and constraints of each device.

Cons of Adaptive Design

  • Maintenance Complexity: Requires the creation and maintenance of multiple layouts, increasing development time and resources.

  • Higher Costs: Developing and managing multiple templates can be more expensive compared to a single responsive design.

  • Limited Flexibility: May not accommodate new device sizes and resolutions without additional updates.

Pros of Responsive Design

  • Consistency: Ensures a uniform user experience across all devices, maintaining brand consistency and usability.

  • Flexibility: Adapts to any screen size, including future devices, without requiring additional updates.

  • Efficiency: Reduces development and maintenance costs by using a single layout that adjusts to different screen sizes.

Cons of Responsive Design

  • Performance Trade-offs: May result in larger file sizes and slower load times on mobile devices if not optimized properly.

  • Design Limitations: Can be challenging to create highly customized designs for specific devices, potentially compromising the user experience.

  • Complexity: Requires careful planning and testing to ensure that the design works well on all screen sizes and resolutions.

Comparison and Use Cases

When to Use Adaptive Design

Adaptive design is ideal for projects where:

  • There is a need to provide highly optimized and tailored user experiences for specific devices.

  • The target audience uses a limited number of device types, making it feasible to create and maintain multiple layouts.

  • Performance optimization is critical, and the design must leverage the unique capabilities of different devices.

When to Use Responsive Design

Responsive design is best suited for projects where:

  • A consistent user experience across all devices is a priority.

  • The target audience uses a wide range of devices with varying screen sizes and resolutions.

  • Development and maintenance resources are limited, making it more practical to manage a single adaptable layout.

Implementation Techniques

Code Snippets for Adaptive Design

To implement adaptive design, you can use server-side scripting to detect the user’s device and serve the appropriate layout. Here’s a basic example using PHP:

<?php
$userAgent = $_SERVER['HTTP_USER_AGENT'];

if (preg_match('/mobile/i', $userAgent)) {
    include('mobile-layout.php');
} elseif (preg_match('/tablet/i', $userAgent)) {
    include('tablet-layout.php');
} else {
    include('desktop-layout.php');
}
?>

In each included file (mobile-layout.php, tablet-layout.php, desktop-layout.php), you can define the specific layout for that device type.

Code Snippets for Responsive Design

To implement responsive design, you can use CSS media queries to adjust the layout based on the screen size. Here’s an example:

/* Base styles for all devices */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

/* Styles for tablets */
@media (min-width: 600px) {
  body {
    font-size: 18px;
  }

  .container {
    width: 80%;
    margin: auto;
  }
}

/* Styles for desktops */
@media (min-width: 1024px) {
  body {
    font-size: 20px;
  }

  .container {
    width: 70%;
    margin: auto;
  }
}

In this example, the font size and container width adjust based on the screen width, ensuring that the layout is optimized for tablets and desktops.

Performance Considerations

How Each Approach Affects Mobile Performance

Adaptive Design

  • Faster Load Times: Because adaptive design serves optimized content for specific devices, it can result in faster load times.

  • Reduced Resource Usage: By tailoring content and features for each device, adaptive design can minimize resource usage, improving performance.

Responsive Design

  • Potential for Larger File Sizes: If not optimized, responsive designs may include unnecessary resources, leading to larger file sizes and slower load times on mobile devices.

  • Flexibility and Future-Proofing: Responsive design’s adaptability ensures that it works well on new devices, potentially reducing the need for frequent updates.

Best Practices for Optimizing Both Designs

For Adaptive Design:

  • Use device detection libraries to accurately identify user devices.

  • Optimize images and other media for specific screen sizes.

  • Minimize the use of heavy JavaScript and CSS files.

For Responsive Design:

  • Use responsive images (srcset and sizes attributes) to serve appropriately sized images for different devices.

  • Employ CSS media queries to load only the necessary styles for each screen size.

  • Leverage lazy loading to defer the loading of off-screen content.

By understanding the differences between adaptive and responsive design, developers can choose the best approach for their projects, optimizing for both performance and user experience.

Touch and Interactivity Optimizations

Importance of Touch Optimization

Enhancing User Experience on Touch Devices

In today’s mobile-first world, optimizing for touch is crucial. Touchscreen devices like smartphones and tablets dominate web traffic, making it essential to ensure that interactions on these devices are smooth and intuitive. A well-optimized touch experience can lead to higher user engagement, increased satisfaction, and better overall usability.

Touch optimization involves designing and coding interfaces that respond quickly and accurately to user inputs. This not only improves the user experience but also helps in reducing frustration, increasing the likelihood of users returning to the site.

Reducing Latency and Improving Responsiveness

Latency in touch interactions can significantly degrade the user experience. When users tap on a screen, they expect an immediate response. Any delay can make the interface feel sluggish and unresponsive. Reducing touch latency involves optimizing both the hardware and software aspects of a website or application to ensure that touch inputs are processed as quickly as possible.

Best Practices

Use of Touch-Specific CSS Properties

CSS offers properties that can enhance the touch experience on mobile devices. For instance, the touch-action property allows you to control the default touch behaviors of an element. By setting appropriate values, you can prevent unwanted scrolling, zooming, or other touch behaviors.

/* Prevents default touch actions on the element */
.element {
  touch-action: none;
}

Optimizing Touch Event Handlers in JavaScript

JavaScript event handlers for touch events should be optimized for performance. Avoid using heavy computations or complex logic inside touch event handlers. Instead, delegate tasks to requestAnimationFrame or debounce/throttle the events to prevent performance bottlenecks.

// Example of throttling touch events
let lastTouchTime = 0;
const throttleTime = 100; // milliseconds

function handleTouch(event) {
  const currentTime = new Date().getTime();
  if (currentTime - lastTouchTime >= throttleTime) {
    // Handle touch event
    console.log("Touch event processed");
    lastTouchTime = currentTime;
  }
}

document.addEventListener("touchstart", handleTouch);

Techniques

Debouncing and Throttling Touch Events

Debouncing and throttling are techniques used to limit the number of times a function is executed. In the context of touch events, these techniques can help improve performance by preventing excessive function calls.

  • Debouncing ensures that a function is executed only after a specified time has elapsed since the last call.

  • Throttling ensures that a function is executed at most once in a specified period.

// Debounce function
function debounce(func, wait) {
  let timeout;
  return function () {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, arguments), wait);
  };
}

// Throttle function
function throttle(func, limit) {
  let lastFunc;
  let lastRan;
  return function () {
    const context = this;
    const args = arguments;
    if (!lastRan) {
      func.apply(context, args);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(function () {
        if (Date.now() - lastRan >= limit) {
          func.apply(context, args);
          lastRan = Date.now();
        }
      }, limit - (Date.now() - lastRan));
    }
  };
}

Avoiding Complex Gestures and Animations

Complex gestures and animations can cause performance issues on touch devices. It’s best to avoid using intricate gestures that require multiple touch points or complex animations that involve significant calculations. Instead, opt for simpler interactions that are easy to implement and process.

Code Snippets for Common Touch Interactions

Here’s a simple example of handling touch interactions using JavaScript:

const element = document.querySelector(".touch-element");

// Handle touchstart event
element.addEventListener("touchstart", (event) => {
  console.log(
    "Touch started:",
    event.touches[0].clientX,
    event.touches[0].clientY
  );
});

// Handle touchmove event
element.addEventListener("touchmove", (event) => {
  console.log(
    "Touch moved:",
    event.touches[0].clientX,
    event.touches[0].clientY
  );
});

// Handle touchend event
element.addEventListener("touchend", (event) => {
  console.log("Touch ended");
});

Case Studies

Examples of Successful Touch Optimizations

  1. Google Maps

    • Google Maps is a prime example of touch optimization. The app handles complex gestures like pinching to zoom and swiping to pan seamlessly. By optimizing touch event handlers and minimizing latency, Google ensures a smooth and responsive user experience.

  2. Instagram

    • Instagram’s touch interactions are highly optimized for mobile devices. Swiping through stories, liking posts with double-tap gestures, and scrolling through feeds are all designed to respond instantly to user inputs, enhancing the overall user experience.

Analysis of Performance Improvements

By implementing touch optimizations, websites and applications can see significant improvements in performance metrics such as:

  • Reduced Touch Latency: Faster response times to touch inputs.

  • Increased User Engagement: Higher user satisfaction and interaction rates.

  • Improved User Retention: Users are more likely to return to a site or app that feels smooth and responsive.

In conclusion, optimizing touch and interactivity is crucial for enhancing the user experience on mobile devices. By following best practices, using appropriate techniques, and learning from successful case studies, developers can create interfaces that are not only functional but also delightful to use.

Tools and Resources for Mobile Performance Optimization

Optimizing mobile performance is a multi-faceted task that involves various tools and resources. In this section, we will explore performance testing tools, optimization libraries and frameworks, and valuable learning resources to help you master mobile performance optimization.

Performance Testing Tools

Lighthouse

Lighthouse is an open-source, automated tool developed by Google to audit web pages for performance, accessibility, SEO, and more. It provides detailed reports on how well your site performs and offers actionable insights to improve it.

  • How to Use Lighthouse: You can run Lighthouse in Chrome DevTools, from the command line, or as a Node module.
# Install Lighthouse globally
npm install -g lighthouse

# Run Lighthouse on a URL
lighthouse https://example.com --output html --output-path ./report.html
  • Key Metrics: Lighthouse evaluates metrics such as First Contentful Paint (FCP), Speed Index, Time to Interactive (TTI), and Total Blocking Time (TBT).

WebPageTest

WebPageTest is another powerful tool for analyzing web performance. It provides in-depth performance metrics and waterfall charts to visualize resource loading times.

  • Using WebPageTest: You can run tests on different devices and network conditions to simulate real-world scenarios.
# Example command to run WebPageTest using Node.js
const webpagetest = require('webpagetest');
const wpt = new webpagetest('https://www.webpagetest.org/', 'YOUR_API_KEY');

wpt.runTest('https://example.com', { location: 'Dulles:Chrome', connectivity: '3G' }, (err, result) => {
    if (err) {
        console.error(err);
    } else {
        console.log(result.data);
    }
});
  • Features: WebPageTest offers features like video capture of the loading process, performance comparison between multiple URLs, and detailed request/response headers.

Mobile-Specific Performance Testing Tools

Several tools are specifically designed to test mobile performance, providing insights tailored to mobile devices.

  • Google Mobile-Friendly Test: This tool checks whether your website is mobile-friendly and provides suggestions for improvement.

    Google Mobile-Friendly Test

  • Calibre: A comprehensive performance monitoring tool that allows you to run tests on real devices, providing accurate performance data.

    # Example usage of Calibre CLI
calibre site test --site https://example.com --location 'Dulles:Chrome' --device 'Moto G4'

Optimization Libraries and Frameworks

Overview of Helpful Libraries for Optimizing Mobile Performance

  1. React Native: A popular framework for building mobile apps using React. It allows for creating high-performance mobile applications that run natively on both iOS and Android.

    import React from "react";
import { Text, View } from "react-native";

const App = () => (
  <View>
    <Text>Hello, world!</Text>
  </View>
);

export default App;

  2. Progressive Web Apps (PWAs): PWAs use modern web capabilities to deliver app-like experiences on mobile devices. Libraries like Workbox can help implement PWAs efficiently.

    // Example using Workbox for PWA
import { registerRoute } from "workbox-routing";
import { StaleWhileRevalidate } from "workbox-strategies";

registerRoute(
  ({ request }) => request.destination === "document",
  new StaleWhileRevalidate()
);

  3. AMP (Accelerated Mobile Pages): As discussed earlier, AMP provides a framework for creating fast-loading mobile pages.

    <!DOCTYPE html>
<html amp>
  <head>
    <meta charset="utf-8" />
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <link
      rel="stylesheet"
      href="https://cdn.ampproject.org/v0/amp-story-1.0.css"
    />
  </head>
  <body>
    <amp-story standalone>
      <!-- AMP content -->
    </amp-story>
  </body>
</html>

  4. Gatsby: A React-based static site generator that is optimized for performance, often used to create fast-loading websites.

    import React from "react";
import { graphql } from "gatsby";

const BlogPost = ({ data }) => (
  <div>
    <h1>{data.markdownRemark.frontmatter.title}</h1>
    <div dangerouslySetInnerHTML= />
  </div>
);

export const query = graphql`
  query ($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      frontmatter {
        title
      }
      html
    }
  }
`;

export default BlogPost;

Learning Resources

Books, Courses, and Articles on Mobile Performance Optimization

  1. Books

    • High Performance Mobile Web by Maximiliano Firtman: This book covers techniques to optimize mobile web performance, including networking, JavaScript optimization, and best practices.

    • Learning Progressive Web Apps by John M. Wargo: This book provides a comprehensive guide to building fast, reliable, and engaging web apps.

  2. Courses

    • Udacity’s Mobile Web Specialist Nanodegree: This course focuses on advanced topics in mobile web development, including performance optimization.

    • Frontend Masters’ Web Performance Workshop: This workshop covers various aspects of web performance, including mobile-specific optimizations.

  3. Articles

    • Web Fundamentals by Google: A comprehensive resource with articles and tutorials on web performance, including mobile optimization.
    • Smashing Magazine: Regularly publishes articles on web performance and optimization techniques.

In conclusion, optimizing mobile performance is a continuous process that involves using the right tools and resources. By leveraging performance testing tools, adopting optimization libraries and frameworks, and continuously learning from reputable resources, developers can ensure their mobile websites and applications are fast, responsive, and provide a superior user experience.

Conclusion

Recap of the Importance of Mobile Performance Optimization

Mobile performance optimization is crucial in today’s digital landscape, where the majority of users access the web through their mobile devices. Ensuring that your website or application loads quickly and functions smoothly on mobile devices can significantly impact user experience, engagement, and conversion rates. Optimizing mobile performance involves various strategies, including implementing AMP (Accelerated Mobile Pages), choosing between adaptive and responsive design, and optimizing touch and interactivity. Each of these strategies plays a vital role in enhancing the overall performance of your mobile site.

  1. AMP (Accelerated Mobile Pages): By leveraging AMP, you can significantly improve page load times, enhance mobile SEO, and boost user engagement. However, it’s essential to weigh the pros and cons and consider how AMP fits into your overall web strategy.

  2. Adaptive vs. Responsive Design: Choosing the right design approach is crucial for optimizing mobile performance. Adaptive design offers tailored experiences for different devices, while responsive design provides flexibility across various screen sizes. Understanding the strengths and limitations of each approach helps in making informed decisions based on your project’s requirements.

  3. Touch and Interactivity Optimizations: Enhancing touch responsiveness and reducing latency is key to delivering a seamless user experience on mobile devices. By implementing best practices such as debouncing and throttling touch events and using touch-specific CSS properties, you can create a more interactive and responsive mobile site.

Encouragement to Implement Discussed Strategies

Implementing the strategies discussed in this article can lead to significant improvements in mobile performance, ultimately enhancing user satisfaction and retention. Here are some actionable steps to get started:

  1. Evaluate Your Current Mobile Performance: Use performance testing tools like Lighthouse and WebPageTest to assess your mobile site’s performance and identify areas for improvement.

  2. Implement AMP Where Appropriate: Consider adopting AMP for pages where fast loading times are critical, such as landing pages or content-heavy articles.

  3. Choose the Right Design Approach: Decide between adaptive and responsive design based on your audience’s needs and your site’s requirements. Implement the chosen design approach using the provided code snippets and best practices.

  4. Optimize Touch and Interactivity: Apply the discussed techniques to enhance touch responsiveness and reduce latency on your mobile site.

Teaser for the Next Article in the Series

Stay tuned for the next article in our series, where we will delve deeper into Progressive Web Apps (PWAs). PWAs combine the best of web and mobile apps, offering a reliable, fast, and engaging user experience. In the upcoming article, we will explore:

  • Introduction to PWAs: Understanding the core concepts and benefits of PWAs.

  • Key Features of PWAs: Offline functionality, push notifications, and home screen installation.

  • Building Your First PWA: A step-by-step guide with code examples to help you create and deploy a PWA.

By continuing to optimize and innovate, you can stay ahead in the competitive digital landscape and provide an exceptional user experience across all devices. Stay tuned for more insights and practical tips in our next installment!

Hi there, I’m Darshan Jitendra Chobarkar, a freelance web developer who’s managed to survive the caffeine-fueled world of coding from the comfort of Pune. If you found the article you just read intriguing (or even if you’re just here to silently judge my coding style), why not dive deeper into my digital world? Check out my portfolio at https://darshanwebdev.com/ – it’s where I showcase my projects, minus the late-night bug fixing drama.

For a more ‘professional’ glimpse of me (yes, I clean up nice in a LinkedIn profile), connect with me at https://www.linkedin.com/in/dchobarkar/. Or if you’re brave enough to see where the coding magic happens (spoiler: lots of Googling), my GitHub is your destination at https://github.com/dchobarkar. And, for those who’ve enjoyed my take on this blog article, there’s more where that came from at https://dchobarkar.github.io/. Dive in, leave a comment, or just enjoy the ride – looking forward to hearing from you!

<
Previous Post
Web Boost - 10: Web Fonts Optimization
>
Next Post
Web Boost - 12: Assessing Performance with Tools