Create a website and publish your own articles as a part-time job. This won't affect your other work. If you dedicate some time each day to writing articles, you'll see the same growth as any other job. However, writing articles requires patience and a long wait. Below are some tips for building a website.

Today, I'll discuss in depth the technical optimization of AdSense websites. These are the pitfalls I've encountered and the lessons I've learned over the past six years.

Why technical optimization is more important than you think.

Many people may think of technical optimization as something nice to have, but not necessary. However, it actually directly impacts your revenue.

Let me show you a data comparison. I have two similar tech blogs with similar content quality, but one of them underwent a deep technical optimization:

The pre-optimization site had a page load time of 4.2 seconds, a bounce rate of 73%, and an RPM of $2.8.

The post-optimization site had a page load time of 1.7 seconds, a bounce rate of 41%, and an RPM of $6.5.

Isn't the difference significant? And this isn't an isolated case. Of the 12 AdSense sites I manage, those that have undergone deep technical optimization have RPMs 2-3 times higher than those without.

The reason is simple:

user experience directly impacts dwell time. If a page loads slowly, users will simply close it, so how can ads be displayed?

Search engines consider page speed a key ranking factor. No matter how good your content is, it won't rank high if it loads slowly.

The mobile experience is even more crucial. Mobile traffic now accounts for over 70%, and mobile users are even more sensitive to speed.

The core strategies for page speed optimization:

1. Server and CDN configuration.

This is the most basic and most important step. I currently use this architecture for all my sites:

Primary server selection:

I use Cloudflare's hosting servers, which are affordable and offer stable performance.

For English sites, I recommend choosing servers on the West Coast of the US or in Europe.

Always use SSD drives; the days of mechanical hard drives are truly over.

CDN configuration:

• Connect your entire site to Cloudflare's CDN. This is essential.
• Enable Brotli compression, which is more effective than Gzip.
• Enable Cloudflare's Rocket Loader feature, which asynchronously loads JavaScript.

With this configuration, my site can access within 2 seconds from anywhere in the world.

2. Image Optimization Strategy:

Images are often the biggest performance bottleneck for web pages. I've put a lot of effort into this area:

Format Selection:

• Use WebP whenever possible, which can reduce file size by 30-50%.
• Automatically fallback to JPG for browsers that don't support WebP.
• PNG is only used when a transparent background is needed.

Compression and Size:

• All images are compressed using TinyPNG, with a quality setting of 85% sufficient.
• Prepare multiple versions based on display size, such as thumbnails, medium, and large images.
• Use images of different sizes for mobile and desktop.

Lazy Loading:

• Use the Intersection Observer API for native lazy loading.
• Load the first screen image directly, and load other images when scrolling.
• Set appropriate placeholders for lazy loaded images.

After completing these optimizations, my site's image loading speed increased by over 60%.

3. Code-level optimization

Many people overlook code optimization, but this can actually lead to significant performance improvements:

CSS optimization:

• Combine all CSS files into one to reduce HTTP requests.
• Use CSS compression tools to remove spaces and comments.
• Inline critical CSS into HTML to avoid render-blocking.
• Non-critical CSS is loaded asynchronously.

JavaScript optimization:

• All JS files are compressed and obfuscated.
• Non-essential JS is delayed until the page is loaded.
• Use Web Workers to handle time-consuming computational tasks.
• Avoid excessive DOM operations in the main thread.

HTML structure optimization:

• Reduce the number of DOM nodes, with nesting levels not exceeding 10 levels.
• Use semantic tags to improve search engine understanding.
• Use preload and preconnect directives appropriately.

I have a site that has seen a significant improvement in its Lighthouse performance score from 45 to 92 through code optimization.

Mobile experience optimization

Mobile traffic now accounts for the majority, so mobile optimization is absolutely essential. My experience in this area:

1. Refining responsive design requires more than simply being responsive;

it requires specialized optimization for mobile devices:

Layout adaptation:

• Use flex layout, which performs better than traditional float layouts.
• Font size at least 16px to prevent users from needing to zoom.
• Touch areas for buttons and links at least 48px by 48px.
• Content width adapts to avoid horizontal scrolling.

Interaction optimization:

• Reduce interactions that require hovering, as mobile devices don't have hover.
• Use native scrolling and inertial scrolling.
• Avoid using large, fixed-positioned elements.
• Utilize the vibration feedback API appropriately.

2. Mobile performance optimization:

Mobile devices have limited CPU and memory, requiring special attention:

Resource loading:

• Mobile image sizes should be more strictly controlled.
• Use Service Workers to cache critical resources.
• Preload the next page a user might visit.
• Reduce the size and number of font files.

Rendering optimization:

Avoid complex CSS animations, prioritize transform and opacity to reduce repaints and reflows, and use the will-change property to effectively utilize GPU acceleration.

Through mobile optimization, my English technology website saw a significant increase in mobile traffic RPM from $2.1 to $4.8.

Specific measures for improving user experience:

Ultimately, technical optimization should serve the user experience. Some of my practices in this area:

1. Navigation and Page Structure

Navigation Design:

• Main navigation should not exceed 7 items, in line with cognitive psychology principles.
• Use breadcrumbs to let users know where they are.
• Search functions should be obvious and easy to use, supporting auto-completion.
• Use a hamburger menu or bottom navigation on mobile devices.

Content Layout:

• Adopt an inverted pyramid structure, placing important information first.
• Paragraph length should be limited to 3-4 lines to improve readability.
• Use subheadings to segment content for easier scanning and reading.
• Use white space wisely to avoid overcrowding the page.

2. Loading Status and Error Handling.

Loading Feedback:

• Display a progress bar or skeleton screen while the page is loading.
• Display a placeholder image when images fail to load.
• Prolonged operations should include a loading animation.
• Provide clear prompts and solutions for network errors.

Error Page:

• 404 pages should be designed to be engaging and include a link back to the homepage.
• 50x errors should provide detailed error descriptions.
• Provide a search box to help users find the content they are looking for.

3. Personalization and interaction design.

User preferences:

• Remember user preferences, such as dark mode.
• Recommend relevant content based on browsing history.
• Support user-customizable interface layout.

Interaction details:

• Links should have obvious visual feedback.
• Form validation should be real-time and user-friendly.
• Use micro-animations to enhance the interactive experience.
• Support keyboard operation to improve accessibility.

AdSense ad performance optimization.

Since it is an AdSense website, ad optimization is also a key focus:

1. Ad position and size.

Position strategy:

• Place a banner ad at the top of the content, but don't make it too obtrusive.
• Insert a square ad in the middle of the article.
• Place vertical ads in the sidebar.
• Place related content at the bottom of the article.

Recommended ad size selection:

• Prioritize responsive ads and let the system automatically select the optimal size.
• Mobile devices mainly use 320x50 and 300x250.
• Desktop devices can use 728x90 and 336x280.
• Avoid using too small ad sizes.

2. Ad loading optimization

Asynchronous loading:

• All Adsense codes are loaded asynchronously and do not block page rendering.
• Lazy loading technology is used, and ads are loaded only when they appear in the viewport.
• A reasonable timeout is set to avoid ad loading failure affecting the user experience.

Performance monitoring:

Regularly check ad loading time Monitor ad error rates Analyze revenue performance of different ad positions

Data monitoring and continuous optimization

Technical optimization is not a one-time job and requires continuous monitoring and improvement:

1. Performance monitoring tools

Core tools:

• Google PageSpeed Insights: free and authoritative
• GTmetrix: provides detailed performance analysis
• WebPageTest: can test performance in real network environments
• Chrome DevTools: the best partner during development

Key indicators:

• FCP (First Contentful Paint): first contentful paint time
• LCP (Largest Contentful Paint): maximum contentful paint time
• CLS (Cumulative Layout Shift): cumulative layout offset
• FID (First Input Delay): first input delay

2. User behavior analysis

Google Analytics Configuration:

• Set up custom events for page load time to monitor bounce rates and session durations.
• Analyze performance differences across devices and browsers, and track user conversion paths.

A/B Testing:

• A/B test key pages.
• Test different ad placements and sizes to compare the user experience of different design options. Make optimization decisions based on data.

I've made some pitfalls over the years, and I've certainly made many.

Here are a few typical ones:

Over-optimization: I once compressed all assets to the utmost, which made debugging extremely difficult and hindered development efficiency.

Ignoring compatibility: Using some new web APIs resulted in issues on older browsers, causing significant traffic loss.

Ads impacting performance: To increase revenue, I placed too many ads, resulting in slower page loads and a poor user experience, ultimately outweighing the benefits.

Insufficient mobile testing: Testing only on new iPhones, ignoring performance issues on lower-end Android devices.

In conclusion

technical optimization is a key factor in the success of an AdSense website. While it requires time and effort, the rewards are enormous. My site now consistently loads in under two seconds, providing a positive user experience and stable revenue.

The key is to develop a systematic approach to optimization, not just focusing on a single metric. Page speed, user experience, and ad revenue all need to be comprehensively considered to find the optimal balance.

Furthermore, technical optimization is an ongoing process and can't be a one-time effort. I now check site performance monthly and adjust optimization strategies based on the data. After all, technology is constantly evolving, and user habits are changing, so we must keep pace.

Most importantly, don't pursue technology for its own sake; always prioritize user experience. Only when users are satisfied will search engines rank you well, and ad revenue will continue to grow.

I hope these experiences are helpful. If you encounter specific technical issues during the optimization process, please feel free to discuss them.