H5游戏性能优化与广告接入踩坑记录

2018-10-25

做了不少H5游戏项目，这里整理一下性能优化和广告接入过程中踩过的坑。

H5游戏性能优化

图片资源优化

H5游戏对加载速度要求高，图片优化是第一步。

压缩工具对比

工具	压缩比	效果	适用场景
FireWorks PNG8	高	有明显纹路	非精细图像
TinyPNG	中高	效果好	推荐首选
ImageOptim	中	无损压缩	Mac开发

TinyPNG使用

操作步骤：

访问 https://tinypng.com/
将图片拖拽到网页中（支持批量上传）
等待自动压缩完成
打包下载所有压缩后的图片

压缩效果示例：

1
2
3

原图: background.png (2.5MB)
压缩后: background.png (580KB)
压缩率: 76.8%

图片格式选择

格式	特点	适用场景
PNG	无损，支持透明	UI元素、图标
JPG	有损，压缩率高	背景图、照片
WebP	高压缩率	现代浏览器首选

资源打包优化

单HTML打包方案

将游戏打包成单个HTML文件，减少HTTP请求：

┌─────────────────────────────────────────────┐
│              单文件HTML结构                 │
├─────────────────────────────────────────────┤
│                                             │
│  ┌──────────────────────────────────────┐  │
│  │           HTML Head                   │  │
│  │  - Meta标签                          │  │
│  │  - CSS样式（内联）                   │  │
│  └──────────────────────────────────────┘  │
│                                             │
│  ┌──────────────────────────────────────┐  │
│  │         Base64资源区                  │  │
│  │  - window.resMap = {                 │  │
│  │      "res/bg.png": "data:image/...", │  │
│  │      "res/bgm.mp3": "data:audio/..." │  │
│  │    }                                 │  │
│  └──────────────────────────────────────┘  │
│                                             │
│  ┌──────────────────────────────────────┐  │
│  │         JavaScript代码                │  │
│  │  - 引擎代码                          │  │
│  │  - 游戏逻辑                          │  │
│  │  - 启动脚本                          │  │
│  └──────────────────────────────────────┘  │
│                                             │
└─────────────────────────────────────────────┘

Python打包脚本：

#!/usr/bin/env python
# -*- coding: utf-8 -*-

import os
import json
import base64

class H5Packer:
    def __init__(self):
        self.file_types = {
            '.png': 'data:image/png;base64,',
            '.jpg': 'data:image/jpeg;base64,',
            '.jpeg': 'data:image/jpeg;base64,',
            '.mp3': 'data:audio/mpeg;base64,',
            '.ogg': 'data:audio/ogg;base64,'
        }
        self.res_map = {}

    def encode_file(self, file_path):
        """文件转Base64"""
        ext = os.path.splitext(file_path)[1].lower()
        if ext not in self.file_types:
            return None

        with open(file_path, 'rb') as f:
            encoded = base64.b64encode(f.read()).decode('utf-8')
            return self.file_types[ext] + encoded

    def scan_resources(self, res_dir):
        """扫描资源目录"""
        for root, dirs, files in os.walk(res_dir):
            for file in files:
                file_path = os.path.join(root, file)
                rel_path = os.path.relpath(file_path, res_dir)
                rel_path = 'res/' + rel_path.replace('\\', '/')

                data = self.encode_file(file_path)
                if data:
                    self.res_map[rel_path] = data
                    print(f"Encoded: {rel_path}")

    def generate_html(self, template_path, output_path):
        """生成打包后的HTML"""
        with open(template_path, 'r', encoding='utf-8') as f:
            html = f.read()

        # 注入资源映射
        res_script = f"window.resMap = {json.dumps(self.res_map)};"
        html = html.replace('{#resMap}', res_script)

        # 注入其他脚本...

        with open(output_path, 'w', encoding='utf-8') as f:
            f.write(html)

        print(f"Packaged: {output_path}")

# 使用示例
if __name__ == '__main__':
    packer = H5Packer()
    packer.scan_resources('./build/web-mobile/res')
    packer.generate_html('./index_template.html', './output/game.html')

音频资源优化

格式选择

// 根据平台选择音频格式
function getAudioUrl(baseName) {
    if (cc.sys.os === cc.sys.OS_IOS) {
        return `res/audio/${baseName}.mp3`;  // iOS用MP3
    } else {
        return `res/audio/${baseName}.ogg`;  // 其他用OGG
    }
}

音频预加载策略

// 动态加载音频资源
cc.loader.loadResDir('audio', cc.AudioClip, (err, clips) => {
    if (err) {
        cc.error('Audio load error:', err);
        return;
    }

    // 缓存音频资源
    clips.forEach(clip => {
        this.audioCache[clip.name] = clip;
    });
});

Facebook Playable广告

Playable广告简介

Facebook Playable广告是交互式试玩广告，用户可以直接在广告里体验游戏。

技术要求：

单个HTML文件
不超过2MB
不能有外部网络请求

打包流程

┌─────────────────────────────────────────────────┐
│           Playable广告打包流程                  │
├─────────────────────────────────────────────────┤
│                                                 │
│  1. Cocos Creator构建                            │
│     └── 构建web-mobile平台                      │
│                                                 │
│  2. 资源Base64编码                              │
│     ├── 图片 -> data:image/png;base64,...       │
│     ├── 音频 -> data:audio/mp3;base64,...       │
│     └── 生成resMap对象                          │
│                                                 │
│  3. 合并HTML文件                                │
│     ├── index.html                              │
│     ├── cocos2d-js-min.js                       │
│     ├── main.js（修改加载器）                   │
│     └── project.js                              │
│                                                 │
│  4. 添加CTA回调                                 │
│     └── FbPlayableAd.onCTAClick()              │
│                                                 │
└─────────────────────────────────────────────────┘

自定义资源加载器

修改main.js实现Base64资源加载：

(function () {
    function boot() {
        // ... 原有初始化代码

        // Base64转Blob
        function base64toBlob(base64, type) {
            var bstr = atob(base64);
            var n = bstr.length;
            var u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], { type: type });
        }

        // Base64转ArrayBuffer
        function base64toArray(base64) {
            var bstr = atob(base64);
            var n = bstr.length;
            var u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return u8arr;
        }

        // 加载DOM音频
        function loadDomAudio(item, callback) {
            var dom = document.createElement('audio');
            dom.muted = true;
            dom.muted = false;

            var data = window.resMap[item.url.split("?")[0]];
            data = base64toBlob(data, "audio/mpeg");

            if (window.URL) {
                dom.src = window.URL.createObjectURL(data);
            } else {
                dom.src = data;
            }

            var timer = setTimeout(function () {
                if (dom.readyState === 0)
                    callback('load timeout', item.url);
                else
                    callback(null, item.url);
            }, 8000);

            dom.addEventListener("canplaythrough", function () {
                clearTimeout(timer);
                item.element = dom;
                callback(null, item.url);
            }, false);

            dom.addEventListener("error", function () {
                clearTimeout(timer);
                callback('load error', item.url);
            }, false);
        }

        // 加载Web音频
        function loadWebAudio(item, callback) {
            var context = cc.sys.__audioSupport.context;
            if (!context) {
                callback(new Error('No web audio context'));
                return;
            }

            var data = window.resMap[item.url];
            var arrayBuffer = base64toArray(data).buffer;

            context.decodeAudioData(arrayBuffer,
                function(buffer) {
                    item.buffer = buffer;
                    callback(null, buffer);
                },
                function() {
                    callback('decode error', item.url);
                }
            );
        }

        // 图片加载器
        var imageBufferHandler = (item, callback) => {
            var data = window.resMap[item.url];
            var img = new Image();

            img.onload = function () {
                callback(null, img);
            };

            img.onerror = function () {
                callback(new Error('Load image failed: ' + item.url));
            };

            img.src = data;
        };

        // JSON加载器
        var jsonBufferHandler = (item, callback) => {
            var str = window.resMap[item.url];
            callback(null, JSON.parse(str));
        };

        // 音频加载器
        var audioBufferHandler = (item, callback) => {
            var formatSupport = cc.sys.__audioSupport.format;
            if (formatSupport.length === 0) {
                return new Error('Audio not supported');
            }

            if (!cc.sys.__audioSupport.WEB_AUDIO) {
                loadDomAudio(item, callback);
            } else {
                loadWebAudio(item, callback);
            }
        };

        // 注册自定义加载器
        cc.loader.addDownloadHandlers({
            'png': imageBufferHandler,
            'jpg': imageBufferHandler,
            'jpeg': imageBufferHandler
        });

        cc.loader.addDownloadHandlers({
            'json': jsonBufferHandler
        });

        cc.loader.addDownloadHandlers({
            'mp3': audioBufferHandler,
            'ogg': audioBufferHandler,
            'wav': audioBufferHandler
        });

        // 启动游戏
        boot();
    }

    if (window.document) {
        boot();
    }
})();

CTA按钮集成

Playable广告必须调用Facebook的CTA回调：

// 游戏结束界面显示"Play More"按钮
onGameOver() {
    this.showPlayMoreButton();
},

onPlayMoreClicked() {
    // 调用Facebook CTA
    if (typeof FbPlayableAd !== 'undefined') {
        FbPlayableAd.onCTAClick();
    }
}

CTA按钮实践建议：

按钮文案使用”Play Now”、”Play More”等行动号召
按钮放在游戏完成后的结算界面
确保按钮清晰可见，易于点击

Google AdSense接入

申请流程

申请步骤：

准备网站
- 拥有完整内容的网站
- 遵守AdSense内容政策
- 网站运行稳定
提交申请
- 访问 Google AdSense
- 填写网站信息和联系方式
- 提交申请等待审核
添加广告代码
- 获取AdSense提供的广告代码
- 将代码添加到网站页面
等待审核
- 通常需要1-2周
- 期间持续更新网站内容
- 确保网站有稳定访问量

注意事项

规则	说明
禁止自动刷新	用户未要求不得自动刷新广告
禁止新窗口	不得在新窗口打开广告
位置规范	不能压在游戏内容上，应放在屏幕底部

正确放置：

┌─────────────────────────────────┐
│                                 │
│         游戏区域                 │
│                                 │
│    ┌─────────────┐              │
│    │   游戏内容   │              │
│    │             │              │
│    └─────────────┘              │
│                                 │
├─────────────────────────────────┤
│      Banner广告区域             │ ← 底部固定
└─────────────────────────────────┘

激励视频广告

注意： H5游戏暂不支持AdSense的激励视频形式，用现有激励位置可能违规。

插屏广告

ad_type参数：

ad_type值	说明
video_text_image	允许所有形式（推荐）
text	仅文字广告
image	仅图片广告

推荐配置：

1 2	// 允许所有广告形式，价高者得 ad_type: 'video_text_image'

防止无效流量

关键措施：

禁止自动刷新
- 不得在用户未操作的情况下刷新广告
- 不得设置定时器自动刷新
禁止激励点击
- 不得鼓励用户点击广告
- 不得将点击广告作为游戏奖励条件
内容合规
- 确保网站内容符合AdSense政策
- 定期检查和更新内容

申请通过心得

成功经验：

准备充分
- 按照官网要求填写申请
- 确保网站内容丰富、原创
遵守规则
- 仔细阅读AdSense政策
- 主动剔除违规内容
持续更新
- 申请期间持续添加新内容
- 保持网站活跃度
推广引流
- 分享网站到各个渠道
- 保证一定的IP访问量
关注反馈
- 经常查看关联的Gmail邮箱
- 及时根据反馈调整

投放数据分析

核心指标说明

基础数据表格

指标	计算方式	说明
CPA	广告投入 / 安装量	每次行动成本，越低越好
新增CPA	广告投入 / 新增用户	获取新用户成本
展示频次	广告展示次数 / DAU	每用户平均看到广告次数
ECPM	广告收益 / 展示次数 * 1000	千次展示收益
ROI	收益 / 投入	投入产出比，>100%盈利

数据分析示例

样本数据：

日期	广告投入	安装量	CPA	新增	DAU	展示次数	收益	ECPM	总ROI
周日	993	1233	0.81	1045	1714	48356	353	7.30	38.37%
周六	455	492	0.92	467	1988	37863	336	8.89	38.72%
周五	532	643	0.83	618	1508	33027	263	7.98	36.58%
周四	930	907	1.03	946	1693	33400	283	8.49	35.58%

指标分析

CPA分析

计算公式: CPA = 广告投入 / 安装量

示例: 周日 CPA = 993 / 1233 = 0.81

分析:
- CPA < 1.0: 表现优秀
- CPA 1.0-1.5: 表现良好
- CPA > 1.5: 需要优化

展示频次优化

计算公式: 展示频次 = 广告展示次数 / DAU

示例: 周日频次 = 48356 / 1714 = 28.21

建议范围:
- 休闲游戏: 15-25次/日
- 中度游戏: 25-35次/日
- 重度游戏: 35-50次/日

过高: 影响用户体验
过低: 广告收益不足

ECPM分析

计算公式: ECPM = (广告收益 / 广告展示次数) * 1000

示例: 周日 ECPM = (353 / 48356) * 1000 = 7.30

行业参考:
- 发达国家: $5-15
- 发展中国家: $1-5

ROI分析

计算公式: ROI = 收益 / 投入 * 100%

示例: 周日 ROI = 353 / 993 = 35.58%

判断标准:
- ROI > 100%: 盈利
- ROI < 100%: 亏损
- ROI 目标: > 150%（考虑其他成本）

数据分析策略

周数据分析：

// 计算周平均值
function calculateWeeklyAverage(data) {
    const totalCost = data.reduce((sum, d) => sum + d.cost, 0);
    const totalInstalls = data.reduce((sum, d) => sum + d.installs, 0);
    const totalRevenue = data.reduce((sum, d) => sum + d.revenue, 0);

    return {
        avgCPA: totalCost / totalInstalls,
        avgECPM: (totalRevenue / data.reduce((s, d) => s + d.impressions, 0)) * 1000,
        totalROI: (totalRevenue / totalCost) * 100
    };
}

优化建议：

情况	CPA	ECPM	建议操作
高价值	低	高	加大投放
低价值	高	低	暂停投放
高留存	高	中	优化素材
高收益	低	中	优化频次

H5游戏发布检查清单

发布前检查

图片已压缩
音频格式兼容iOS和Android
首屏加载 < 3秒
总包体 < 5MB
兼容主流浏览器
响应式布局适配

广告集成检查

AdSense代码正确嵌入
Banner位置符合规范（底部）
无自动刷新广告逻辑
CTA按钮正常工作
广告频次设置合理

数据分析检查

数据埋点完整
转化漏斗配置正确
数据上报无延迟
关键指标监控告警

总结一下

H5游戏要成功，技术和变现都得抓。图片压缩、单文件打包、广告规范接入、数据分析，这些环节都要做好。

核心要点：

性能优化：TinyPNG压缩、Base64资源打包、音频格式适配
Playable广告：单HTML打包、自定义加载器、CTA回调
AdSense规范：Banner放置、禁止自动刷新、内容合规
数据分析：CPA/ECPM/ROI指标监控

参考：

游戏开发H5游戏