标签: pagespeed

  • 修复Greenshift产生的slider链接缺少可识别名称报错,实现Pagespeed Insights 100分

    修复Greenshift产生的slider链接缺少可识别名称报错,实现Pagespeed Insights 100分

    链接缺少可识别的名称报错

    偶然间,通过Pagespeed Insights测试网站时,发现存在一个报错

    简单看了下这个报错时由于Greenshift slider区块部分没有为Slider设置链接标题导致,因此可能需要手动修复,如同之前中文TOC锚点识别不正确的BUG一样。感兴趣的可以看下上篇文章:

    修复思路

    从后台该区块部分看了下:

    这部分的确没有标题的设置项,因此只能手动修复了。然后 查找对应的特征词 去定位该部分的代码区域。

    修复思路就是:为该链接添加一个title属性就好了。

    如上,我们直接将插件的所有代码在visual studio code中打开,然后直接搜索特征词:gspd-sliderlink

    可以看到,就是见到那的几行,这就好办了。仔细阅读代码后发现,就是修改这两行添加个title属性就好了。

    直接丢入GPT,让GPT解释并给出修复后的代码:

    (0, a.createElement)("a", { className: "gspb-sliderlink", href: b, target: f ? "_blank" : null, rel: `noopener${h ? " nofollow" : ""}${v ? " sponsored" : ""}`, title: "我构建的项目", "aria-label": "我构建的项目" })
    

    替换原来的部分:

    修复失败

    检查前端是否已被正确修改添加:

    发现并没有被修复,那么可能该部分有更复杂的逻辑,并且不是这种修复方式。

    调整修复思路

    那么,就采用更直接简单的方式,从前端使用js直接定位slider这链接,直接添加!

    js代码:

    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('.gspb-sliderlink').forEach(link => {
            // 获取父元素中 .gspb_text 的文本内容,默认值为 'slider'
            const text = link.parentElement.querySelector('.gspb_text')?.textContent || 'slider';
            // 设置 title 属性
            link.setAttribute('title', text);
            // 设置 aria-label 属性
            link.setAttribute('aria-label', text);
        });
    });
    

    控制台打开看下:

    OKAY, 已正确添加。

    修复完成

    再次使用Pagespeed Insights进行测试,okay,修复完成。:

    总结,好吧,没啥事别动源代码,尤其前端可以解决的,尽量使用前端代码解决。