diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 59d9ae81ea6e..279e6bfeeb14 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -19,11 +19,15 @@
     "@sentry/browser": "7.11.1",
     "@sentry/types": "7.11.1",
     "@sentry/utils": "7.11.1",
+    "magic-string": "^0.26.2",
     "tslib": "^1.9.3"
   },
   "peerDependencies": {
     "svelte": "3.x"
   },
+  "devDependencies": {
+    "svelte": "3.49.0"
+  },
   "scripts": {
     "build": "run-p build:rollup build:types",
     "build:dev": "run-s build",
diff --git a/packages/svelte/rollup.npm.config.js b/packages/svelte/rollup.npm.config.js
index 5a62b528ef44..ae3c7a9a5b8a 100644
--- a/packages/svelte/rollup.npm.config.js
+++ b/packages/svelte/rollup.npm.config.js
@@ -1,3 +1,8 @@
 import { makeBaseNPMConfig, makeNPMConfigVariants } from '../../rollup/index.js';
 
-export default makeNPMConfigVariants(makeBaseNPMConfig());
+export default makeNPMConfigVariants(
+  makeBaseNPMConfig({
+    // Prevent 'svelte/internal' stuff from being included in the built JS
+    packageSpecificConfig: { external: ['svelte/internal'] },
+  }),
+);
diff --git a/packages/svelte/src/constants.ts b/packages/svelte/src/constants.ts
new file mode 100644
index 000000000000..cb8255040c03
--- /dev/null
+++ b/packages/svelte/src/constants.ts
@@ -0,0 +1,5 @@
+export const UI_SVELTE_INIT = 'ui.svelte.init';
+
+export const UI_SVELTE_UPDATE = 'ui.svelte.update';
+
+export const DEFAULT_COMPONENT_NAME = 'Svelte Component';
diff --git a/packages/svelte/src/index.ts b/packages/svelte/src/index.ts
index 8e25b84c4a0c..40f648a46286 100644
--- a/packages/svelte/src/index.ts
+++ b/packages/svelte/src/index.ts
@@ -1,3 +1,11 @@
+export type {
+  ComponentTrackingInitOptions as ComponentTrackingOptions,
+  TrackComponentOptions as TrackingOptions,
+} from './types';
+
 export * from '@sentry/browser';
 
 export { init } from './sdk';
+
+export { componentTrackingPreprocessor } from './preprocessors';
+export { trackComponent } from './performance';
diff --git a/packages/svelte/src/performance.ts b/packages/svelte/src/performance.ts
new file mode 100644
index 000000000000..359950e41264
--- /dev/null
+++ b/packages/svelte/src/performance.ts
@@ -0,0 +1,96 @@
+import { getCurrentHub } from '@sentry/browser';
+import { Span, Transaction } from '@sentry/types';
+import { afterUpdate, beforeUpdate, onMount } from 'svelte';
+import { current_component } from 'svelte/internal';
+
+import { DEFAULT_COMPONENT_NAME, UI_SVELTE_INIT, UI_SVELTE_UPDATE } from './constants';
+import { TrackComponentOptions } from './types';
+
+const defaultTrackComponentOptions: {
+  trackInit: boolean;
+  trackUpdates: boolean;
+  componentName?: string;
+} = {
+  trackInit: true,
+  trackUpdates: true,
+};
+
+/**
+ * Tracks the Svelte component's intialization and mounting operation as well as
+ * updates and records them as spans.
+ * This function is injected automatically into your Svelte components' code
+ * if you are using the Sentry componentTrackingPreprocessor.
+ * Alternatively, you can call it yourself if you don't want to use the preprocessor.
+ */
+export function trackComponent(options?: TrackComponentOptions): void {
+  const mergedOptions = { ...defaultTrackComponentOptions, ...options };
+
+  const transaction = getActiveTransaction();
+  if (!transaction) {
+    return;
+  }
+
+  const customComponentName = mergedOptions.componentName;
+
+  // current_component.ctor.name is likely to give us the component's name automatically
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+  const componentName = `<${customComponentName || current_component.constructor.name || DEFAULT_COMPONENT_NAME}>`;
+
+  let initSpan: Span | undefined = undefined;
+  if (mergedOptions.trackInit) {
+    initSpan = recordInitSpan(transaction, componentName);
+  }
+
+  if (mergedOptions.trackUpdates) {
+    recordUpdateSpans(componentName, initSpan);
+  }
+}
+
+function recordInitSpan(transaction: Transaction, componentName: string): Span {
+  const initSpan = transaction.startChild({
+    op: UI_SVELTE_INIT,
+    description: componentName,
+  });
+
+  onMount(() => {
+    initSpan.finish();
+  });
+
+  return initSpan;
+}
+
+function recordUpdateSpans(componentName: string, initSpan?: Span): void {
+  let updateSpan: Span | undefined;
+  beforeUpdate(() => {
+    // We need to get the active transaction again because the initial one could
+    // already be finished or there is currently no transaction going on.
+    const transaction = getActiveTransaction();
+    if (!transaction) {
+      return;
+    }
+
+    // If we are initializing the component when the update span is started, we start it as child
+    // of the init span. Else, we start it as a child of the transaction.
+    const parentSpan =
+      initSpan && !initSpan.endTimestamp && initSpan.transaction === transaction ? initSpan : transaction;
+
+    updateSpan = parentSpan.startChild({
+      op: UI_SVELTE_UPDATE,
+      description: componentName,
+    });
+  });
+
+  afterUpdate(() => {
+    if (!updateSpan) {
+      return;
+    }
+    updateSpan.finish();
+    updateSpan = undefined;
+  });
+}
+
+function getActiveTransaction(): Transaction | undefined {
+  const currentHub = getCurrentHub();
+  const scope = currentHub && currentHub.getScope();
+  return scope && scope.getTransaction();
+}
diff --git a/packages/svelte/src/preprocessors.ts b/packages/svelte/src/preprocessors.ts
new file mode 100644
index 000000000000..9102636c045f
--- /dev/null
+++ b/packages/svelte/src/preprocessors.ts
@@ -0,0 +1,89 @@
+import MagicString from 'magic-string';
+
+import { ComponentTrackingInitOptions, PreprocessorGroup, TrackComponentOptions } from './types';
+
+export const defaultComponentTrackingOptions: Required<ComponentTrackingInitOptions> = {
+  trackComponents: true,
+  trackInit: true,
+  trackUpdates: true,
+};
+
+/**
+ * Svelte Preprocessor to inject Sentry performance monitoring related code
+ * into Svelte components.
+ */
+export function componentTrackingPreprocessor(options?: ComponentTrackingInitOptions): PreprocessorGroup {
+  const mergedOptions = { ...defaultComponentTrackingOptions, ...options };
+
+  const visitedFiles = new Set<string>();
+
+  return {
+    // This script hook is called whenever a Svelte component's <script>
+    // content is preprocessed.
+    // `content` contains the script code as a string
+    script: ({ content, filename, attributes }) => {
+      // TODO: Not sure when a filename could be undefined. Using this 'unknown' fallback for the time being
+      const finalFilename = filename || 'unknown';
+
+      if (!shouldInjectFunction(mergedOptions.trackComponents, finalFilename, attributes, visitedFiles)) {
+        return { code: content };
+      }
+
+      const { trackInit, trackUpdates } = mergedOptions;
+      const trackComponentOptions: TrackComponentOptions = {
+        trackInit,
+        trackUpdates,
+        componentName: getBaseName(finalFilename),
+      };
+
+      const importStmt = 'import { trackComponent } from "@sentry/svelte";\n';
+      const functionCall = `trackComponent(${JSON.stringify(trackComponentOptions)});\n`;
+
+      const s = new MagicString(content);
+      s.prepend(functionCall).prepend(importStmt);
+
+      const updatedCode = s.toString();
+      const updatedSourceMap = s.generateMap().toString();
+
+      return { code: updatedCode, map: updatedSourceMap };
+    },
+  };
+}
+
+function shouldInjectFunction(
+  trackComponents: Required<ComponentTrackingInitOptions['trackComponents']>,
+  filename: string,
+  attributes: Record<string, string | boolean>,
+  visitedFiles: Set<string>,
+): boolean {
+  // We do cannot inject our function multiple times into the same component
+  // This can happen when a component has multiple <script> blocks
+  if (visitedFiles.has(filename)) {
+    return false;
+  }
+  visitedFiles.add(filename);
+
+  // We can't inject our function call into <script context="module"> blocks
+  // because the code inside is not executed when the component is instantiated but
+  // when the module is first imported.
+  // see: https://svelte.dev/docs#component-format-script-context-module
+  if (attributes.context === 'module') {
+    return false;
+  }
+
+  if (!trackComponents) {
+    return false;
+  }
+
+  if (Array.isArray(trackComponents)) {
+    const componentName = getBaseName(filename);
+    return trackComponents.some(allowed => allowed === componentName);
+  }
+
+  return true;
+}
+
+function getBaseName(filename: string): string {
+  const segments = filename.split('/');
+  return segments[segments.length - 1].replace('.svelte', '');
+}
diff --git a/packages/svelte/src/types.ts b/packages/svelte/src/types.ts
new file mode 100644
index 000000000000..d32051ec6a44
--- /dev/null
+++ b/packages/svelte/src/types.ts
@@ -0,0 +1,77 @@
+// The following types were copied from 'svelte/compiler'-internal
+// type definitions
+// see: https://github.com/sveltejs/svelte/blob/master/src/compiler/preprocess/types.ts
+interface Processed {
+  code: string;
+  map?: string | Record<string, unknown>;
+  dependencies?: string[];
+  toString?: () => string;
+}
+
+type MarkupPreprocessor = (options: {
+  content: string;
+  filename?: string;
+}) => Processed | void | Promise<Processed | void>;
+
+type Preprocessor = (options: {
+  /**
+   * The script/style tag content
+   */
+  content: string;
+  attributes: Record<string, string | boolean>;
+  /**
+   * The whole Svelte file content
+   */
+  markup: string;
+  filename?: string;
+}) => Processed | void | Promise<Processed | void>;
+
+export interface PreprocessorGroup {
+  markup?: MarkupPreprocessor;
+  style?: Preprocessor;
+  script?: Preprocessor;
+}
+
+// Alternatively, we could use a direct from svelte/compiler/preprocess
+// TODO: figure out what's better and roll with that
+// import { PreprocessorGroup } from 'svelte/types/compiler/preprocess';
+
+export type SpanOptions = {
+  /**
+   * If true, a span is recorded between a component's intialization and its
+   * onMount lifecycle hook. This span tells how long it takes a component
+   * to be created and inserted into the DOM.
+   *
+   * Defaults to true if component tracking is enabled
+   */
+  trackInit?: boolean;
+
+  /**
+   * If true, a span is recorded between a component's beforeUpdate and afterUpdate
+   * lifecycle hooks.
+   *
+   * Defaults to true if component tracking is enabled
+   */
+  trackUpdates?: boolean;
+};
+
+/**
+ * Control which components and which operations should be tracked
+ * and recorded as spans
+ */
+export type ComponentTrackingInitOptions = {
+  /**
+   * Control if all your Svelte components should be tracked or only a specified list
+   * of components.
+   * If set to true, all components will be tracked.
+   * If you only want to track a selection of components, specify the component names
+   * as an array.
+   *
+   * Defaults to true if the preprocessor is used
+   */
+  trackComponents?: boolean | string[];
+} & SpanOptions;
+
+export type TrackComponentOptions = {
+  componentName?: string;
+} & SpanOptions;
diff --git a/packages/svelte/test/preprocessors.test.ts b/packages/svelte/test/preprocessors.test.ts
new file mode 100644
index 000000000000..afa100c63cac
--- /dev/null
+++ b/packages/svelte/test/preprocessors.test.ts
@@ -0,0 +1,174 @@
+import { componentTrackingPreprocessor, defaultComponentTrackingOptions } from '../src/preprocessors';
+
+function expectComponentCodeToBeModified(
+  preprocessedComponents: {
+    originalCode: string;
+    filename: string;
+    name: string;
+    newCode: string;
+    map: any;
+  }[],
+  options: any,
+) {
+  const expectedImportStmt = 'import { trackComponent } from "@sentry/svelte";\n';
+
+  preprocessedComponents.forEach(cmp => {
+    const expectedFunctionCallOptions = {
+      trackInit: options?.trackInit ?? true,
+      trackUpdates: options?.trackUpdates ?? true,
+      componentName: cmp.name,
+    };
+    const expectedFunctionCall = `trackComponent(${JSON.stringify(expectedFunctionCallOptions)});\n`;
+    expect(cmp.newCode).toBeDefined();
+    expect(cmp.map).toBeDefined();
+    expect(cmp.newCode).toEqual(`${expectedImportStmt}${expectedFunctionCall}${cmp.originalCode}`);
+  });
+}
+
+describe('componentTrackingPreprocessor', () => {
+  it('correctly inits the script preprocessor', () => {
+    const preProc = componentTrackingPreprocessor();
+    expect(preProc.script).toBeDefined();
+    expect(preProc.markup).toBeUndefined();
+    expect(preProc.style).toBeUndefined();
+  });
+
+  it.each([
+    ['no options', undefined],
+    ['default options', defaultComponentTrackingOptions],
+    ['custom options (init 0, updates 0)', { trackInit: false, trackUpdates: false }],
+    ['custom options (init 0, updates 1)', { trackInit: false, trackUpdates: true }],
+    ['custom options (init 1, updates 0)', { trackInit: true, trackUpdates: false }],
+    ['custom options (init 1, updates 1)', { trackInit: true, trackUpdates: true }],
+  ])('adds the function call to all components if %s are set', (_, options) => {
+    const preProc = componentTrackingPreprocessor(options);
+    const components = [
+      { originalCode: 'console.log(cmp1);', filename: 'components/Cmp1.svelte', name: 'Cmp1' },
+      { originalCode: 'console.log(cmp2);', filename: 'components/Cmp2.svelte', name: 'Cmp2' },
+      { originalCode: 'console.log(cmp3);', filename: 'components/Cmp3.svelte', name: 'Cmp3' },
+    ];
+
+    const preprocessedComponents = components.map(cmp => {
+      const res: any =
+        preProc.script &&
+        preProc.script({
+          content: cmp.originalCode,
+          filename: cmp.filename,
+          attributes: {},
+          markup: '',
+        });
+      return { ...cmp, newCode: res.code, map: res.map };
+    });
+
+    expectComponentCodeToBeModified(preprocessedComponents, options);
+  });
+
+  it('does not add the function call to any component if `trackComponents` is set to `false`', () => {
+    const preProc = componentTrackingPreprocessor({ trackComponents: false });
+    const components = [
+      { originalCode: 'console.log(cmp1)', filename: 'components/Cmp1.svelte', name: 'Cmp1' },
+      { originalCode: 'console.log(cmp2)', filename: 'components/Cmp2.svelte', name: 'Cmp2' },
+      { originalCode: 'console.log(cmp3)', filename: 'components/Cmp3.svelte', name: 'Cmp3' },
+    ];
+
+    const preprocessedComponents = components.map(cmp => {
+      const res: any =
+        preProc.script &&
+        preProc.script({
+          content: cmp.originalCode,
+          filename: cmp.filename,
+          attributes: {},
+          markup: '',
+        });
+      return { ...cmp, newCode: res.code, map: res.map };
+    });
+
+    preprocessedComponents.forEach(cmp => {
+      expect(cmp.newCode).toEqual(cmp.originalCode);
+    });
+  });
+
+  it('adds the function call to specific components if specified in `trackComponents`', () => {
+    const preProc = componentTrackingPreprocessor({ trackComponents: ['Cmp1', 'Cmp3'] });
+    const components = [
+      { originalCode: 'console.log(cmp1)', filename: 'components/Cmp1.svelte', name: 'Cmp1' },
+      { originalCode: 'console.log(cmp2)', filename: 'lib/Cmp2.svelte', name: 'Cmp2' },
+      { originalCode: 'console.log(cmp3)', filename: 'lib/subdir/sub/Cmp3.svelte', name: 'Cmp3' },
+    ];
+
+    const [cmp1, cmp2, cmp3] = components.map(cmp => {
+      const res: any =
+        preProc.script &&
+        preProc.script({
+          content: cmp.originalCode,
+          filename: cmp.filename,
+          attributes: {},
+          markup: '',
+        });
+      return { ...cmp, newCode: res.code, map: res.map };
+    });
+
+    expect(cmp2.newCode).toEqual(cmp2.originalCode);
+
+    expectComponentCodeToBeModified([cmp1, cmp3], { trackInit: true, trackUpdates: true });
+  });
+
+  it('doesnt inject the function call to the same component more than once', () => {
+    const preProc = componentTrackingPreprocessor();
+    const components = [
+      {
+        originalCode: 'console.log(cmp1)',
+        filename: 'components/Cmp1.svelte',
+        name: 'Cmp1',
+      },
+      {
+        originalCode:
+          'import { trackComponent } from "@sentry/svelte";\ntrackComponent({"trackInit":true,"trackUpdates":true,"componentName":"Cmp1"});\nconsole.log(cmp1)',
+        filename: 'components/Cmp1.svelte',
+        name: 'Cmp1',
+      },
+      {
+        originalCode: 'console.log(cmp2)',
+        filename: 'lib/Cmp2.svelte',
+        name: 'Cmp2',
+      },
+    ];
+
+    const [cmp11, cmp12, cmp2] = components.map(cmp => {
+      const res: any =
+        preProc.script &&
+        preProc.script({
+          content: cmp.originalCode,
+          filename: cmp.filename,
+          attributes: {},
+          markup: '',
+        });
+      return { ...cmp, newCode: res.code, map: res.map };
+    });
+
+    expectComponentCodeToBeModified([cmp11, cmp2], { trackInit: true, trackUpdates: true });
+    expect(cmp12.newCode).toEqual(cmp12.originalCode);
+  });
+
+  it('doesnt inject the function call to a module context script block', () => {
+    const preProc = componentTrackingPreprocessor();
+    const component = {
+      originalCode: 'console.log(cmp2)',
+      filename: 'lib/Cmp2.svelte',
+      name: 'Cmp2',
+    };
+
+    const res: any =
+      preProc.script &&
+      preProc.script({
+        content: component.originalCode,
+        filename: component.filename,
+        attributes: { context: 'module' },
+        markup: '',
+      });
+
+    const processedComponent = { ...component, newCode: res.code, map: res.map };
+
+    expect(processedComponent.newCode).toEqual(processedComponent.originalCode);
+  });
+});
diff --git a/yarn.lock b/yarn.lock
index b1ffb4ea488c..a92d648e72c2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -24837,6 +24837,11 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+svelte@3.49.0:
+  version "3.49.0"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.49.0.tgz#5baee3c672306de1070c3b7888fc2204e36a4029"
+  integrity sha512-+lmjic1pApJWDfPCpUUTc1m8azDqYCG1JN9YEngrx/hUyIcFJo6VZhj0A1Ai0wqoHcEIuQy+e9tk+4uDgdtsFA==
+
 svgo@^1.0.0:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167"