壹起航：單頁網站優化要如何做？

我們談到單頁網站優化（yiqihang.cn），我們需要首先了解什么是單頁網站。單頁網站，顧名思義，就是只有一個頁面的網站。首頁是內容頁，在網站結構中不會有進一步的內容。對于很多瀏覽者來說，面對這樣的網站，他們往往不知道從哪里開始，因為單頁網站進行SEO優化的缺點是站內優化的可操作性接近于零。因此，對單頁進行SEO也是非常重要的。然而，對于單頁網站，SEOs有好有壞。作為SEO人員，你需要清楚地了解，這樣你才能在優化過程中避免那些不好的事情。那么，如何優化一個單頁網站的SEO呢?

1. 注意TDK的寫作
由于頁面是單一的，你需要更多的關注網站的標題，關鍵詞和描述。在標題上，要簡潔明了，包括主要關鍵詞，整篇文章可以總結為一句話;在描述方面，用一句話或一小段文字就可以提煉出文章的精髓，內容比標題更詳細;關鍵詞與內容相關。單詞，多個關鍵字用逗號分隔。

2. 多樣化的外鏈錨文本
在外鏈建設中，避免單一內容，容易造成網站的過度優化，我們都知道網站的過度優化不利于網站優化。

3.網站標簽的使用
合理使用網站標簽可以使搜索引擎更好地了解網站的層次性內容，如h標簽、強標簽等。

4.代碼優化
CSS和JS的網站優化盡量使用外部導入，使網頁代碼更加簡潔。如果你可以使用CSS，盡量不要使用JS。畢竟，JS對搜索引擎并不友好。

5.合理設置錨點
有一些單一的頁面為了展示很多產品功能，頁面會被拉長很長，不利于用戶瀏覽，用戶體驗也不好。如果在單頁網站上設置了合理的錨點，用戶只需點擊即可快速到達所需的內容區域。

6.避免所有的照片
如果一個單頁網站為了提高視覺效果而使用更多的圖片，會導致網站上的文字內容太少，不利于搜索引擎對網站的抓取和索引。

7.內容為王
我們之前引用過百度百科全書的例子，作為一個單頁網站，用戶的所有需求都被盡可能完整的展示出來，解決用戶的麻煩是單頁網站的關鍵。

以上就是單頁網站優化需要做的內容，希望對大家有所幫助。

PA依賴于HTML 5 History API。使用mPulse的SPA設置，我們可以跟蹤軟導航。軟導航是指在瀏覽器上更改URL但實際上并未重新加載整個頁面。我試圖了解單頁應用程序的工作原理，并通過CSS-Tricks使用HTML5 History API。在本文中，解釋了HTML5 History API的概念。

通常，當您從一個URL導航到另一個URL時，瀏覽器會重新加載整個頁面。但是，您可能希望只更改頁面的某些部分。這可以通過使用AJAX請求來完成。但是，如果只使用AJAX，則頁面的URL會保持不變。因此，如果需要共享此特定視圖，則無法執行此操作。這就是History API的用武之地。

了解 History API

History API能夠操縱URL而不強制瀏覽器加載整個頁面。它提供了兩個主要功能：history.replaceState和history.pushState。

history.replaceState：這會更改URL，也會更改瀏覽器中的導航流。因此，用戶點擊后退按鈕將不會返回到此SPA頁面的原始視圖，而是被重定向到它們來自的頁面。
history.pushState：此方法將替換URL并記錄當前視圖信息。因此，用戶點擊后退按鈕將返回到SPA頁面的原始視圖。

SPA對性能測試提出了挑戰。在常規網頁上，瀏覽器基于NavTiming API收集大量與性能相關的信息。但是，當SPA導航發生時，頁面不會真正重新加載，這導致瀏覽器不會重建DOM。因此，它無法報告與導航相關的性能。

要解決這個問題，像mPulse這樣的Real User Monitoring（RUM）解決方案依賴于歷史API。通過觀察對此插件的更改，它能夠檢測導航，然后測量時序信息。

測試SPA頁面

使用CSS-Tricks網站上的Ghostbusters SPA代碼創建了一個虛擬網站。在他們的例子中，有以下內容：

主頁：https：//css-tricks.com/examples/State/
SPA導航：

https://test-woocommerce.akshayranganath.com/peter.php
https://test-woocommerce.akshayranganath.com/ray.php
https://test-woocommerce.akshayranganath.com/egon.php
https://test-woocommerce.akshayranganath.com/winston.php

實際上，當用戶首次登陸主頁時，它具有常規的導航布局。這在mPulse中稱為SPA Hard。本網站子部分中的所有其他導航稱為SPA軟導航。如果用戶直接使用URL，則會導致瀏覽器正常加載頁面并將其作為SPA硬導航事件進行檢測。

檢測結果

當我設置測試時，基于8個視圖，中間頁面加載時間顯示為15秒。這包括SPA（SPA-Soft）和非SPA（SPA-Hard）定時信息。

當我看一下硬導航的性能時，4個視圖的頁面加載時間現在跳到17.4秒。

如果我現在只過濾軟導航，4個視圖的頁面加載時間下降到129毫秒。

如果我們從未使用過軟導航，則可能會錯誤地將網站性能誤解為超過17秒。實際上，這個時間包含了加載SPA框架的時間。如果沒有軟導航調用的信息，您可能會誤解網站上的訪問量。在這種情況下，用戶可以加載主頁并訪問其他四個子頁面。如果沒有SPA跟蹤，RUM分析可能會向用戶顯示只訪問過一個頁面。

總結

如果您擁有基于SPA的網站，可能會丟失關鍵性能信息或數據。如果您已將頁面設計為使用SPA框架，請啟用SPA跟蹤。混合SPA和非SPA導航可能會產生沒有作用的信息。另一方面，缺少SPA導航會降低參與度和轉化率指標。因此，需要仔細檢測其測量結果以獲得整體圖像。

.什么是puppeteer？

Puppeteer是一個Node庫，它提供了一個高級API來通過DevTools協議控制Chromium或Chrome。可以使用Puppeteer來自動化完成瀏覽器的操作，官方給出的一些使用場景如下：

生成頁面PDF
抓取 SPA（單頁應用）并生成預渲染內容（即“SSR”（服務器端渲染））
自動提交表單，進行 UI 測試，鍵盤輸入等
創建一個時時更新的自動化測試環境，使用最新的JavaScript和瀏覽器功能直接在最新版本的Chrome中執行測試
捕獲網站的timeline trace，用來幫助分析性能問題
測試瀏覽器擴展

與Selenium比較

說起瀏覽器自動化操作，很容易聯想到另一個自動化框架：Selenium。但是Puppeteer與Selenium使用的協議卻不一樣！ Puppeteer使用DevTools協議與Chome（或Chromium）進行交互，而Selenium卻使用WebDriver協議與瀏覽器進行交互。另外，他們各自的API在使用風格上也相差很多。

2.代碼工程

實驗目的：

實現html生成圖片

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <parent>
        <artifactId>springboot-demo</artifactId>
        <groupId>com.et</groupId>
        <version>1.0-SNAPSHOT</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <artifactId>Puppeteer</artifactId>

    <properties>
        <maven.compiler.source>8</maven.compiler.source>
        <maven.compiler.target>8</maven.compiler.target>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-autoconfigure</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-freemarker</artifactId>
        </dependency>

    </dependencies>
</project>

controller

package com.et.puppeteer.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.HashMap;
import java.util.Map;

@Controller
public class HelloWorldController  {

   @RequestMapping(value="/ftest")
   public String test(Model model) {
      model.addAttribute("msg", "use freemarker/  puppeteer to implement html generate image");
      model.addAttribute("img", "https://img1.baidu.com/it/u=3764156347,3722190225&fm=253&fmt=auto&app=138&f=JPEG?w=440&h=419");
      return "f01";
   }


}

模版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>freemarker</title>
    <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js"></script>
</head>
<body style="font-size: 20px;">
<div style="display: flex;
        align-items: flex-start;
        border: 1px solid darkred;
        box-shadow: 1px 2px 1px 5px #cccccc;"
>
    <div style="display:flex;flex-shrink: 0;width:100px;">words:</div> <h1>${msg}</h1>
</div>
<div style="display: flex;align-items: center;margin: 10px 0px;">
    <div>image: </div><img style="width: 150px;height: 150px;" src="${img}" />
</div>
<#--<div style="display: flex;align-items: flex-end;">-->
barcode: <svg id="barcode"></svg>
<#--</div>-->
</body>
<#--load js-->
<script>
    let e=document.getElementById("barcode");
    JsBarcode(e, "Hi world!");
</script>
</html>

html轉圖片

安裝puppeteer

npm i puppeteer

獲取html并生成圖片

// index.js
const puppeteer=require('puppeteer');
async function test () {
    const browser=await puppeteer.launch();
    const page=await browser.newPage();
    await page.setViewport({
        width: 960,
        height: 760,
        deviceScaleFactor: 1,
    });

    // await page.setContent(imgHTML);

    await page.goto('http://localhost:8088/ftest');

    await page.evaluate(()=> {
        let e=document.getElementById("barcode");
        JsBarcode(e, "Hi world!");
    });

    await page.screenshot({path: "./example.png"});
    await browser.close();
}
test()

To capture a full page, we need to add a fullPage:true option for page.screenshot()

  await page.screenshot({
    path: 'example.png',
    fullPage: true
  });

3.測試

啟動Spring Boot程序
執行node index.js

4.引用

https://dev.to/makepad/take-a-screenshot-with-puppeteer-mo
http://www.liuhaihua.cn/archives/711156.html
https://pptr.dev/

在線咨詢

上一篇：國內就能買到，全世界最紅的9個家居好店
下一篇：個人有這些情形，將被責令退回醫保基金、暫停醫療費用聯

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商