1. How to minimise main thread work on blogger?
To minimize main thread work on Blogger and improve performance, you can follow these strategies:
1. Defer Non-Critical JavaScript:
Use the defer attribute on script tags for JavaScript files that are not critical for page load. This allows the browser to parse the HTML and load JavaScript in parallel.
<script src="script.js" defer></script>
2. Minify JavaScript and CSS:
Reduce the file size of JavaScript and CSS by removing unnecessary characters, such as spaces and comments, using online tools like Minify JS or a plugin.
3. Lazy Load Images:
Use loading="lazy" for images to delay the loading of offscreen images until the user scrolls near them.
<img src="image.jpg" loading="lazy" alt="Description">
4. Limit Third-Party Widgets:
Reduce the number of third-party widgets like social sharing buttons, trackers, or external comment systems as they can add extra work to the main thread.
5. Optimize Ads Loading:
If using AdSense or other ads, ensure the ads are properly optimized and loaded asynchronously to avoid blocking the main thread.
6. Reduce DOM Complexity:
Simplify the structure of your blog by reducing deeply nested elements and unnecessary divs or spans. A simpler DOM reduces the time spent on layout and rendering.
7. Use Browser Caching:
Leverage browser caching for static resources by adding cache headers. This allows returning visitors to load resources faster.
8. Asynchronous Google Analytics:
If you're using Google Analytics, ensure it is set up to load asynchronously.
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_TRACKING_ID"></script>
These optimizations can reduce the load on the main thread and improve your Blogger site's performance.
Points to consider
To optimize your Blogger template and remove unnecessary code, follow these steps. It’s important to keep a backup of your template before making changes to ensure you can restore it if needed.
Steps to Optimize and Clean a Blogger Template:
1. Backup Your Blogger Template
Go to Theme in your Blogger dashboard.
Click on the three dots (•••) in the top-right corner and select Backup.
Download the backup XML file of your template.
2. Remove Unnecessary JavaScript and CSS Files
If your template includes external JavaScript or CSS files that are not critical, consider removing them. You can open the template and look for script or link tags like these:
<link href="unnecessary-styles.css" rel="stylesheet">
<script src="unnecessary-script.js"></script>
Delete these lines for any widgets, analytics, or third-party services that are not essential.
3. Minimize Inline JavaScript and CSS
Inline JavaScript and CSS can block rendering. Look for large blocks of inline styles and scripts, and move them to external files if possible. Add the defer or async attributes to scripts to load them after the page has finished loading.
<script async src="external-script.js"></script>
4. Remove Unused Blogger Widgets
Go to Layout in the Blogger dashboard, and remove any unused widgets (such as labels, popular posts, or archives) that you don’t need. Removing them from the layout will also remove them from the template code.
5. Remove Unnecessary Meta Tags
Some templates come with many meta tags, such as for SEO or social media. Evaluate if they are all necessary. If you don’t need certain meta tags, you can delete them. For example:
<meta name="author" content="Name">
<meta name="keywords" content="List of keywords">
Keep only essential ones like the description, viewport, and charset.
6. Optimize Google Fonts
If your template uses Google Fonts, reduce the number of font styles and weights you load. Instead of multiple fonts, try to stick with one or two. Replace multiple font imports like this:
<link href="https://fonts.googleapis.com/css?family=Roboto|Open+Sans|Lato" rel="stylesheet">
With a single font family:
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
7. Remove Blogger's Default Attribution
If your template includes the default Blogger attribution widget, you can safely remove it. Find and delete this block of code:
<b:widget id='Attribution1' locked='true' title='Attribution' type='Attribution'>
<b:includable id='main'>
<p>Powered by Blogger.</p>
</b:includable>
</b:widget>
8. Enable Lazy Loading for Images
Add the loading="lazy" attribute to image tags for lazy loading. You can search for <img> tags in your template and add this:
<img src="image.jpg" loading="lazy" alt="Image description">
9. Asynchronous Loading for AdSense
If you use Google AdSense, ensure it's loaded asynchronously to prevent it from blocking the page load:
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
10. Minify HTML, CSS, and JavaScript
Use an online tool like HTMLMinifier or Minify JS/CSS to minify your template’s HTML, CSS, and JavaScript. This removes unnecessary spaces and comments, reducing the overall file size.
11. Remove Unused CSS Classes and IDs
Many Blogger templates come with extra CSS rules for styles you may not use (e.g., different layout options or color schemes). Search for CSS rules in the <style> sections that aren’t being applied and remove them.
12. Optimize Blogger's XML Tags
Blogger uses many XML tags (such as <b:widget> and <b:if>) to structure its content. Ensure that conditional elements, like b:if, are used efficiently to avoid unnecessary rendering. Example of inefficient use:
<b:if cond='data:blog.pageType == "item"'>
<!-- Show code only for posts -->
</b:if>
Keep only the essential XML tags and remove those that do not contribute to the functionality you need.
Example of Removing Unnecessary Code:
Before:
<script src="social-media-widget.js"></script>
<link href="extra-fonts.css" rel="stylesheet">
<meta name="keywords" content="a,b,c,d,e,f,g,h">
After:
<!-- Removed unnecessary widgets and meta tags -->
After completing these steps, your Blogger template will be leaner and should load faster by minimizing unnecessary code. Remember to test your site after each change to ensure that nothing critical is removed or broken.
Post a Comment