Astra theme【網站搬家】與【網頁速度調整】心得

自架個人部落格已經 3 年多了,當然也看了許多社團中的討論文章,對於重新安裝網站也有點概念。所以利用這次網站換主機的機會,順便把佈景主題更換成 Astra Pro。只是在社團裡,大家討論的結論大多是利用備份外掛 (UpdraftPlus、Duplicator、… ) 來完成網站重新安裝。對於這種做法,在多數的狀況下,是可行也是最有效率的方式。

但是,萬一沒有定期備份網站資料、自己搞砸網站設定然後也沒能力還原、中毒或惡意程式存在已久導致備份檔案也不乾淨…,難道用備份外掛還原網站還有用嗎?本身的例子就是【自己搞砸網站設定然後也沒能力還原】,雖然嘗試過重新安裝外掛與佈景主題、使用 WP Reset 還原設定…等,網站還是怪怪的。

不僅反應速度慢,連原本定期會執行的 UpdraftPlus 備份、Wordfence 自動更新…等,都失效了,只能手動執行。在社團中求救,有些站長會熱心提供方向;當然也遇到少數專業人士的酸言酸語。總之,就是找不到方法解決自己遇到的問題。

該放棄經營部落格嗎? 當然不是! 以下就分享【網站搬家的過程】、【更換佈景主題的動機】、與【網頁速度微調】的心路歷程。現在,對於 Astra Pro 佈景主題感到非常滿意,我需要的功能,Astra Pro 都可以滿足我!

WordPress 網站搬家換主機

WordPress 免費架站的問題有那些呢?

加入 WordPress 或 NAS 相關社團的這幾年當中,發現在臺灣自架部落格網站的人似乎不多,大家都在詢問主機商價格、穩定性、技術支援相關的問題。而我,也被許多站長建議不要自架網站,因為突然發生硬體問題的話,很麻煩;而且還要解決軟體與作業系統之間相容性與設定的問題。一開始,也半信半疑自己是不是把架網站想得太簡單了?!很幸運的是:

  • 硬體問題:
    • 打通電話回家,就有人會處理。
  • 軟體問題:
    • 爬文後,連上 VPN , 使用 Windows 10 的【遠端桌面連線】進行問題排除。

不過這幾年下來,真的沒遇過幾次因為電腦軟硬體發生狀況,造成網站停擺。偶而才會遇到因 WordPress 或外掛升級,造成的相容性問題,必須當下連線處理。不過還是建議,假使是架設個人部落格的話,的確可以考慮自架主機;不過假使是公司行號網站的話,還是建議找專業的網站公司經營,省時省事又可以避免金流糾紛。

WordPress 虛擬主機與自架主機配備比較

在前一篇文章中( 點我: 免費架網站 )有提到,使用桌上型電腦需要的電費,兩個月約 172.8 元。我們就來比較一下,租用主機真的比較划算嗎?常見的主機商有:

  • Bluehost
  • SiteGround
  • HostGator
  • Sugarhost
  • Cloudways

因為 cloudways 的網頁,分類價格比較容易理解,所以就拿它當例子好了。最便宜的方案 10 美金 / 每月,所以兩個月就是USD 20 = 20 * 28 = NTD 560。只是最便宜的方案真的夠用嗎?

02 Astra theme 網站搬家與網頁速度的調整心得 cloudways price plan
Cloudways: cloud hosting plan

回頭來看兩個月電費 172.8 元的主機配備是長怎樣呢?

  • CPU: i5-7500 四核心
  • 記憶體: DDR4-2400 8GB*2
  • 硬碟: NVMe SSD(Random Read/Write 速度可以參考: Samsung 970 EVO Plus)
  • 顯示卡、網路卡: 主機板內建
  • 作業系統: Windows 10 專業版(費用很貴嗎? 有興趣的話,可以問 Google 大師)
  • 總費用: 忘了,不過一定是在兩萬元以內。因為當初買電腦的目的是一般家用影音的用途,所以也不需要有太特殊的零件。
  • 免費軟體: XAMPP, WordPress
  • 免費 SSL 憑證: ZeroSSL
03 Astra theme 網站搬家與網頁速度的調整心得 desktop hardware intel i5
Intel i5-7500(4C/4T) / 16GB 桌上型電腦

曾經有一陣子也盲目追求 PageSpeed insight 的分數,所以申請了 CDN 服務、刪除不必要外掛、關閉華麗佈景主題的功能、試驗了無數個 Cache plugin…,但是卻一直無法做到像其他人分享的高分。無意間把 Cloudflare CDN 關閉後,使用 Chrome 來檢查網頁開啟狀態,很明顯看到大幅縮短了執行時間(假使與啟用 CDN 相比的話)。不過,圖片中的顯示的細項名稱與功能,我真的也不知道明確的解釋是什麼,只是明顯感受到網頁開啟時間大幅縮短了。

06 Astra theme 網站搬家與網頁速度的調整心得 Chrome 檢查 Performance 800
Chrome 開啟網頁的時間

Step 1: WordPress 匯出程式,資料庫匯出將資料備份到硬碟

在 WordPress 左邊工具列當中,找到【工具】->【匯出程式】->【全部內容】->【下載資料匯出檔】,將檔案先存到硬碟中,稍後需要在新主機將這份資料檔匯入。不過有一點需要注意的就是: 資料檔並不包含圖片!!!

要如何把所有圖片複製到新主機裡面呢?後續會有說明~

04 Astra theme 網站搬家與網頁速度的調整心得 WordPress export tool
WordPress 匯出程式: 資料備份

Step 2: 網站手動搬家先安裝 XAMPP 與 WordPress 到新主機

前往 XAMPP 官網下載新版安裝程式,接著到 WordPress 官網下載需要的安裝版本。當 XAMPP 安裝完成後,把解壓縮的 WordPress 檔案,全部複製到以下資料夾裡面 C:\xampp\htdocs\

再來就是開啟 XAMPP 控制面板,在 MySQL 右邊的 Admin 按鈕,進入 phpMyAdmin 新增 WordPress 資料庫。當資料庫新增完成後,打開瀏覽器,輸入: localhost,就可以開始安裝 WordPress 了。這一段過程有點繁瑣,說的不是很清楚,假使不懂得話,可以參考【在Windows 10 架設 WordPress】這一篇文章,裡面有完整 phpMyAdmin 與 WordPress 操作的完整圖文說明。

XAMPP 控制面板: 透過 phpMyAdmin 新增資料庫

Step 3: WordPress 匯入程式,複製網站到新主機

在執行 WordPress 匯入程式之前,我習慣會先登入 localhost 後,根據舊主機的網站狀態,安裝好:

  1. 使用的佈景主題
  2. 匯入佈景主題設定檔
  3. 使用的外掛
  4. 設定好外掛參數

這樣一來,當執行完 WordPress 匯入程式後,就會發現新舊主機的網站樣式,除了小工具( Widget )之外,其餘的部分幾乎是一模一樣。現在,就在 WordPress 左邊工具列當中,找到【工具】->【匯入程式】->【立即安裝】->【指定之前備份檔案的路徑】,按下匯入之後,需要等待一段時間。我發現在區域網路的話大約要花 50 分鐘,但是在網際網路下大約要 2.5 小時左右。完成後,再來針對所有的小工具( Widget )進行設定,然後就只剩下最後一步就可以完成網站搬家了!

WordPress 匯入程式: 複製資料到新主機

在這裡說明一下,事實上 WordPress 內建的匯出程式是無法直接匯出媒體檔案,但是可以被匯入。所以我們在執行匯入程式的過程中,匯入程式會從舊主機的網站中下載媒體檔案到新主機的網站裡面。從之前備份出來的檔案中,可以發現媒體網址的連結是現在上線的網址(以我的例子就是: https://hipay0.com/abcxyz),而新主機的網址是https://hipay0.com/abcxyz。完成以上動作,才是把所有的媒體檔案複製到新主機中的做法。

也看到有人建議從舊主機中複製 C:\xampp\htdocs\wp-content\uploads\ 的所有檔案到新主機中,比較省時間。但是我不喜歡用這種方式,因為在架設網站過程中,難免會針對圖片改來改去,每改一次大小尺寸, WordPress 或圖片最佳化外掛(Smush)就會新增新的圖片大小在資料庫當中,而其餘大小的圖片是不會自動被刪除的。時間久了,無用的圖片當然會變多,這樣會增加管理的複雜度,同時定期備份檔案也會變得越來越大。

Step 4: WordPress換網址與改域名

網站搬家的最後一步,就是在資料庫當中,把所有 https://hipay0.com 的網址,更新成未來想上線的新網址,也就是執行 WordPress 換網址。登入 phpMyAdmin 後,

  1. 點選 WordPress 資料庫
  2. 點選 SQL
  3. 輸入 SOL 指令
  4. 點選執行
SQL指令: WordPress 網址異動(程式碼如下)
UPDATE wp_options SET option_value=REPLACE(option_value,'https://hipay0.com','新網址');
UPDATE wp_posts SET post_content=REPLACE(post_content,'https://hipay0.com','新網址');
UPDATE wp_posts SET guid=REPLACE(guid,'https://hipay0.com','新網址');
UPDATE wp_postmeta SET meta_value = replace(meta_value,'https://hipay0.com','新網址');

完成後,只需要再做以下幾個步驟就可以完成網站搬家了~

  1. SSL 憑證、httpd.conf,複製到 ..\xampp\apache\conf\ 的資料夾當中
  2. httpd-ssl.conf,複製到 ..\xampp\apache\conf\extra\ 的資料夾當中
  3. .htaccess、ads.txt、robots.txt、wp-config.php、Google與Bing的認證檔案,複製到 ..\xampp\htdocs\ 的資料夾當中
  4. php.ini,複製到 ..\xampp\php\ 的資料夾當中
  5. config.inc.php,複製到 ..\xampp\phpMyAdmin\ 的資料夾當中
  6. 假使是使用子主題的話,再把子主題檔案複製到 ..\xampp\htdocs\wp-content\themes\astra-child\
  7. 路由器設定好 Port forward

Astra 佈景主題客製化程式分享

OceanWP 佈景主題值得繼續使用嗎?

在考慮更換新主機之前,已經使用 OceanWP 佈景主題兩年多的時間了。當初之所以會購買 OceanWP ,不外乎爬文後做的決定,原因如下:

  • OceanWP 是以網站速度為第一優先考量的佈景主題
  • 當時有提供買斷方案
  • 能自由選擇喜歡的頁面編輯器來搭配,當時購買時有附贈精簡版的 Elementor
  • 屬於多用途的佈景主題

但是,為什麼現在會決定更換成 Astra Theme 呢?以我的例子而言,除了是遇到了幾個無法解決的問題之外,當然也有嘗鮮的心態想試試其他佈景主題。以下是我更換的理由,分享給大家囉:

  • 預設的 OceanWP 佈景主題中,提供太多 CSS 與 JS 功能,即使關掉後,對於 PageSpeed insight 的分數沒有太明顯差異。當然,實際網頁開啟的速度才是重點,所以在關掉多餘的 CSS / JS 功能後,開啟速度感覺還是一樣。
  • 當初購買時,有些外掛是免費提供。但是之後 OceanWP 開發商改變授權方式,導致除了 Sticky header 能繼續使用外,其餘外掛都需要付費購買。這樣子就跟當初評估購買 OceanWP 的成本考量,就有很大的落差。評估後,選擇拿掉那些已經在使用的外掛功能。想也知道,花了很多時間修改網頁,同時網站瞬間也失去美感了。
  • 附贈的 Elementor 頁面編輯器,容易發生不相容的狀況,導致使用 Elementor 編輯的網頁,排版嚴重被破壞。所以在 WordPress 版本更新或使用中的外掛升級時,特別擔心會不會又要崩潰一次了。上班族真的沒有那麼多時間,可以及時處理這些意外。

後悔使用 Astra 佈景主題嗎?

去年年底時,看到了我一直都很依賴的一個社團在介紹【黑色星期五 Black Friday】購買清單,我會喜歡這個社團是因為站長大多都會使用過,然後把心得寫成文章,分享給大家,這一點就跟其他眾多社團有很大的差異。【一個是分享使用心得,再賺取分紅】 vs 【一群站長只知道分享購買連結/葉佩雯,賺錢擺第一】。所以看完分析的文章後,就決定試試Astra這個佈景主題,來取代目前的 OceanWP。

使用Astra近一個月的時間,發現介紹這個佈景主題的繁體中文文章,幾乎都著重在產品比較的等級( OceanWP vs Astra vs GeneratePress )或是介紹它的優缺點。幾乎找不到有人分享程式碼,將網頁改得更美。所以以下就貼上幾個爬問後,應用在我的部落格的程式碼跟大家分享。

如何刪除 Astra 預設的上頁、下頁連結呢?

在開發商的討論區有現成的程式碼,假使不喜歡預設的【Next post】與【Previous post】,可以將以下程式碼貼到子主題的 functions.php 當中。

add_filter( 'astra_single_post_navigation_enabled', '__return_false' );

停用 WordPress 預設的延遲載入圖片功能(Lazy Load)

有很多外掛都有提供 Lazy Loading 的功能,是否會與 WordPress 的預設開啟造成衝突還不知道,保險作法就是關閉預設的延遲載入圖片功能。當然,假使主機效能夠強大、不在乎 pageSpeed 分數的話、有開啟 CDN 服務,關閉延遲載入圖片功能,就更不需要考慮了。不過正確的觀念是: 【延遲載入圖片不應該對網頁產生視覺影響,進而影響使用者體驗】。所以,這個功能不是用來補償【佈景主題程式碼寫得很差】或是【主機效能不強大】的缺點。

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

如何在 Astra 中,加入相關閱讀文章( Related Posts )

使用過 OceanWP 後,才發現【相關文章(Related Posts)】的功能,並不存在於 Astra 當中。假使不使用外掛的話,只能加入相關程式碼到子主題當中。一般而言,【相關文章(Related Posts)】的優點有:

  • 提高使用者體驗
  • 對 SEO 有幫助
  • 降低跳出率

所以,要實現【相關文章(Related Posts)】的功能,需要三個步驟:

1、在 functions.php 加入以下程式碼

function related_posts($args = array()) {
    global $post;
    $args = wp_parse_args($args, array(
        'post_id' => !empty($post) ? $post->ID : '',
        'taxonomy' => 'category',
        'limit' => 5,
        'post_type' => !empty($post) ? $post->post_type : 'post',
        'orderby' => 'rand',
        'order' => 'DESC'
    ));
    if (!taxonomy_exists($args['taxonomy'])) {
        return;
    }
    $taxonomies = wp_get_post_terms($args['post_id'], $args['taxonomy'], array('fields' => 'ids'));
    if (empty($taxonomies)) {
        return;
    }
    $related_posts = get_posts(array(
        'post__not_in' => (array) $args['post_id'],
        'post_type' => $args['post_type'],
        'tax_query' => array(
            array(
                'taxonomy' => $args['taxonomy'],
                'field' => 'term_id',
                'terms' => $taxonomies
            ),
        ),
        'posts_per_page' => $args['limit'],
        'orderby' => $args['orderby'],
        'order' => $args['order']
    ));
    include( locate_template('related-posts-template.php', false, false) );
    wp_reset_postdata();
}

2、在子主題得資料夾中,新增檔案: related-posts-template.php

<?php if (!empty($related_posts)) { ?>
    <div class="related-posts">
        <class="widget-title"><h3><?php _e('延伸閱讀', 'astra'); ?></h3>
        <ul class="related-posts-list">
            <?php
            foreach ($related_posts as $post) {
                setup_postdata($post);
            ?>
            <li>
                <a class="title" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
                    <?php if (has_post_thumbnail()) { ?>
                    <div class="thumb">
                        <?php echo get_the_post_thumbnail(null, 'medium', array('alt' => the_title_attribute(array('echo' => false)))); ?>
                    </div>
                    <?php } ?>
                    <h6><?php the_title(); ?></h6>
                </a>
            </li>
            <?php } ?>
        </ul>
        <div class="clearfix"></div>
    </div>
<?php
}

3、在 Astra 中呼叫【相關文章(Related Posts)】的程式

因為我只想要在文章(post)當中,顯示【相關文章(Related Posts)】的功能,所以要把佈景主題的 single.php 複製到子主題當中,然後在 single.php 加入以下紅色標示的程式碼:

<?php
/**
 * The template for displaying all single posts.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package Astra
 * @since 1.0.0
 */
if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}
get_header(); ?>
<?php if ( astra_page_layout() == 'left-sidebar' ) : ?>
	<?php get_sidebar(); ?>
<?php endif ?>
	<div id="primary" <?php astra_primary_class(); ?>>
		<?php astra_primary_content_top(); ?>
		<?php astra_content_loop(); ?>
		<?php astra_primary_content_bottom(); ?>
		<?php related_posts(); ?>
	</div><!-- #primary -->
<?php if ( astra_page_layout() == 'right-sidebar' ) : ?>
	<?php get_sidebar(); ?>
<?php endif ?>
<?php get_footer(); ?>

網站速度優化

平心而論,自架網站還有一個不如虛擬主機的地方,那就是網速!在臺灣,大部分家用寬頻速度不論是光纖或Cable modem或社區網路,其實上傳速度都不如虛擬主機使用的專線。雖然是有影響,但是好像也沒那麼致命。因為便宜的虛擬主機方案,絕對也不可能是高網速的服務;再者,在前面 【Chrome 開啟網頁的時間】那張圖片中,我也看不出來目前使用的光纖網路,在速度方面哪邊還可以改善。所以,就決定在現有架構下,繼續使用好了。除非有一天,又看到有人詳細分析的結論,讓我想到可以改善的地方,再來找替代方案好了。下圖是目前網站 PageSpeed Insights 的分數,通常我只看【最佳化建議】的部分,針對缺失的項目,爬文找答案盡量改善就好了。【分數】真的不是重點,【網頁開啟速度】才是真實的感受。

Astra 佈景主題的 PageSpeed Insights 優化結果

首頁是使用古騰堡外掛 Qubely Pro 編輯完成的,剛開始很滿意這個外掛的功能,方便又直覺而且提供的工具也很豐富。但是過一陣子之後,才發現Astra 與 Qubely Pro 似乎有一個小問題(後面會說明)。即使聯絡了雙方開發商,反映問題,也還沒有明確的結果。所以目前還在爬文中,尚未找到答案。即使是這樣子,分數看起來也還可以接受;實際的網頁開啟速度,比之前使用 OceanWP + Elementor 來的快一點。

Astra佈景主題: PageSpeed Insights 手機版分數
Astra佈景主題: PageSpeed Insights 桌機版分數

PageSpeed Insights 的真實使用者體驗結果

在 PageSpeed Insights 中會使用真實資料(Field data)來測試,這些資料是使用真實的使用者資料來驗證,更能貼近真實使用者的經驗。在前一段有提到【Astra 與 Qubely Pro 似乎有一個小問題】,其實就是下圖中 CLS 的統計數據( Cumulative Layout Shift 或累計版面配置轉移 )。

新網站上線約半個月左右,收到 Google Search Console 的通知,所有桌面板的網頁, CLS 值都大於 0.1 秒。花了一些時間觀察、爬文,才發現是 Qubely Pro 的相關編輯功能語法,造成頁面會發生移動的現象。尤其是當Astra Sticky header 與 Transparent header 被停用時,特別容易看到這種頁面位移的結果。目前沒找到答案,短期解決方法是: 啟用 Transparent header + 停用 Sticky header,搭配 Smush 外掛,把造成【大量版面配置轉移】的 Class ,填入 Smush Lazy Load 排除清單當中,是目前找到降低 CLS 影響的最佳方法。。

PageSpeed Insights 手機版使用者體驗資料
PageSpeed Insights 桌機版使用者體驗資料

PageSpeed Insights 的最佳化建議清單

其實剩下這些最佳化建議清單的內容,都是需要動到程式碼,已經超出我(極新手^_^..)的能力範圍了,我選擇投降!畢竟,網頁開啟速度也不差,網頁也具有基本美感,這樣就夠了~

PageSpeed Insights 手機版最佳化建議清單
PageSpeed Insights 桌機版最佳化建議清單

使用 Astra 佈景主題的常見問題

其實在社團中,還蠻常看到有人發問:

1、網頁開啟速度如何加快?

通常安裝 Cache plugin 就可以解決大部分的問題,但是要安裝哪一個外掛呢?真的是要在自己網站測試後,才能決定哪一個外掛對自己比較有利。
我曾經試過:
1-1. Breeze
雖然很好用,長期使用下來,也沒遇過什麼問題。只是對於新版本的 WordPress 支援有點慢,像現在已經發行 WordPress 5.6.1 了,但是這個外掛卻還是只相容 WordPress 5.5.3 ,假使硬升級到 WordPress 5.6 or WordPress 5.6.1,我是有看到衝突的現象,所以現在已經不使用了。

1-2. W3 Total Cache (Free)設定真的很複雜,花了很多時間查詢每個欄位的功能,然後根據自己的需求調整設定,看到的結果頂多跟 Breeze 或 Cache Enabler + Autoptimize 相同而已。

1-3. WP-Optimize + Autoptimize我不敢說是外掛的問題,在網站搬家之前,也的確使用一陣子。但是,到了後期也許是把網站搞砸的因素吧?!在後台開起 WP-Optimize 的時間都超過 2 分鐘;而且,Autoptimize 任何 CSS / JS / HTML 的設定,都會造成前台網頁格式不正常顯示。

1-4. WP Super Cache+ Autoptimize只有架網站初期使用這種組合,之後就發現這種組合,對於網頁開啟速度不如其他外掛組合。所以,已經很久沒使用了。

1-5. Cache Enabler + Fast Velocity Minify雖然這個組合對我而言,真的是最佳的選項,但畢竟 Fast Velocity Minify 的網路討論度不如 Autoptimize ,遇到問題時很難短時間找到答案,所以就改安裝 Autoptimize 了。

1-6. Cache Enabler + Autoptimize目前使用中,跑在新主機 PHP 8.01 + WordPress 5.6.1 上面,沒看到衝突的現象。

2、已經安裝快取外掛了,怎麼【網頁載入速度 – PageSpeed Insights】或【GTmetrix】的分數那麼低?

2-1. 跌跌撞撞架網站的這幾年下來,才知道 Cache Plugin 不是神。假使不改程式或設定參數,想要拿高分的話,幾乎是不可能的。
2-2. 【GTmetrix】通常會在測試報告中,將不及格項目的部分列出來,有時候在說明文件中,會提供建議的程式碼。照著指示在 .htaccess 或 wp-config …當中,加上這些程式碼,大部分問題都可以解決的。
2-3. 少部分項目會跟主機配備有直接關係(如: TTFB,反應時間,記憶體資源…),我猜最便宜主機方案應該都會遇到類似的問題吧?!

3、啟動CDN,網頁速度反而沒改善?

3-1. 假使主機架設在臺灣,而網站主要流量來源也鎖定臺灣的使用者,啟動 CDN 的服務,反而會增加連線時間。要不要開啟 CDN 服務,要先知道主機的位置。
3-2. 通常免費 CDN 服務,例如: 想要使用 Cloudflare 的臺灣節點,必須要升級到 Enterprise 企業用戶才行。不然想要連線的臺灣用戶,還要先連線到日本 Cloudflare CDN 節點,然後再繞回來給臺灣的連線用戶。光想像這一點,不難可以知道為何開啟 CDN 服務,反而會增加連線時間。

分享文章