7 เคล็ดลับ WordPress สำหรับเว็บไซต์ที่เป็นมิตรกับมือถือ


ไม่มีอะไรจะเลวร้ายไปกว่าการมีเว็บไซต์เดสก์ท็อปที่ดูดีและเว็บไซต์มือถือที่ทำงานไม่ถูกต้อง

การแก้ไขการออกแบบส่วนใหญ่นั้นเรียบง่าย แต่ต้องการความสนใจถ้าคุณต้องการให้ผู้เยี่ยมชมอยู่กับคุณ ไซต์ในขณะที่เรียกดูบนอุปกรณ์มือถือ

บทความนี้จะเน้นเจ็ดปัญหาเกี่ยวกับเว็บไซต์ที่เหมาะกับอุปกรณ์พกพา

  • การเปลี่ยนแปลงที่เกิดขึ้นไม่ปรากฏบนมือถือ
  • การนำทางที่ไม่เป็นมิตร
  • เค้าโครงตอบสนอง หยุดทำงานในทันที
  • รูปภาพใช้เวลาในการโหลดนานเกินไป
  • เนื้อหาที่สำคัญที่สุดไม่ชัดเจน
  • ข้อมูลมากเกินไป
  • ข้อมูลสำหรับหน้าจอขนาดเล็ก
  • การอัปเดตเว็บไซต์ที่เหมาะกับอุปกรณ์พกพาไม่แสดง

    คุณใช้เวลานานมาก ทำการอัปเดตเว็บไซต์ของคุณ มันดูดีมากบนเดสก์ท็อปของคุณ แต่จะไม่ปรากฏบนอุปกรณ์มือถือ

    หนึ่งในสาเหตุที่พบบ่อยที่สุดคือการแคช เบราว์เซอร์มือถือของคุณอาจแสดงเว็บไซต์เก่าของคุณซึ่งคุณดาวน์โหลดมาก่อนหน้านี้ อีกสาเหตุหนึ่งอาจเป็นเพราะเว็บไซต์ของคุณถือเวอร์ชันเก่าของหน้าเว็บและไม่แสดงการเปลี่ยนแปลง

    <รูป class = "lazy aligncenter">

    หากเกิดปัญหาคุณจะต้องล้างแคชเพื่อดาวน์โหลดเวอร์ชันที่แก้ไข ปลั๊กอินสำหรับแคชเช่น WP Super Cache, W3 แคชทั้งหมด หรือ WP ที่เร็วที่สุดในแคช สามารถช่วยแก้ปัญหานี้ได้

    In_content_1 ทั้งหมด: [300x250] / DFP: [640x360]->

    ด้านล่างมีสี่ขั้นตอนเพื่อช่วยให้คุณล้างแคชเว็บไซต์และเบราว์เซอร์ของคุณเพื่อเปิดใช้งานเวอร์ชันใหม่ที่จะแสดงบนเว็บไซต์ที่เหมาะกับมือถือ

    1. รีเฟรชเบราว์เซอร์ของคุณหลายครั้ง เดสก์ท็อปและอุปกรณ์มือถือ
    2. ทดสอบเว็บไซต์ของคุณบนอุปกรณ์มือถือที่แตกต่างกัน
    3. ล้างไซต์ของคุณด้วยปลั๊กอินแคช
    4. ตรวจสอบกับ บริษัท ที่ให้บริการพื้นที่ของคุณเพื่อดูว่า มีระบบแคชอื่นบนเซิร์ฟเวอร์ของคุณที่ต้องทำการล้าง
    5. การนำทางที่ไม่เป็นมิตร

      การสร้างเมนูการนำทางอาจเป็นเรื่องยาก ที่ทำงานได้ดีบนอุปกรณ์มือถือ หากการนำทางเว็บไซต์ของคุณมีหลายรายการและเมนูย่อยมันเป็นเรื่องยากยิ่งที่จะบีบทุกอย่างบนหน้าจอที่เล็กลง

      ตัวอย่างเช่นหากคุณมีเพียงสามหรือสี่รายการในการนำทางเว็บไซต์ของคุณ บนโทรศัพท์มือถือ. อย่างไรก็ตามหากคุณมีรายการและเมนูย่อยมากกว่ารายการเหล่านั้นจะซ้อนทับกันและดูแออัด

      ด้านล่างเป็นวิธีการแก้ไขปัญหานี้สำหรับเว็บไซต์ที่เป็นมิตรกับมือถือ:

      • เปลี่ยนการนำทางของคุณเป็นเมนูแบบเลื่อนลงสำหรับอุปกรณ์มือถือ
      • แสดงเมนูนำทางของคุณเป็นองค์ประกอบบล็อกเพื่อให้ปรากฏในแนวตั้ง
      • ใช้ไอคอนเมนูที่สามารถ สลับเพื่อใช้พื้นที่น้อยลง
      • สร้างเมนูการนำทางมือถือโดยใช้ jQuery
      • ใช้เมนูแฮมเบอร์เกอร์ (ธีมจำนวนมากรวมเป็นตัวเลือกหรือคุณสามารถ  ใช้ปลั๊กอิน.)
      • <รูป class = "lazy aligncenter">

        หยุดเลย์เอาต์ตอบสนองการทำงานทันที

        หากมือถือของคุณเป็นมิตร ไซต์หยุดทำงานกะทันหันอาจเป็นเพราะปลั๊กอินในไซต์ของคุณ

        การติดตั้งปลั๊กอินใหม่หรือการอัปเดตปลั๊กอินที่มีอยู่อาจทำให้เกิดข้อขัดแย้งกับผู้อื่นที่มีผลต่อเค้าโครงที่ตอบสนองของคุณ

        เริ่มต้นด้วยการเลิกใช้ปลั๊กอินแต่ละตัวทีละตัวเพื่อดูว่าเป็นสาเหตุหรือไม่ อย่าปิดใช้งานพวกเขาทั้งหมดในครั้งเดียวหรือคุณจะไม่ทราบว่าปลั๊กอินใดที่อาจเป็นผู้ร้าย

        <รูป class = "lazy aligncenter">

        การเปลี่ยนแปลงรหัสเป็นอีกสาเหตุที่เป็นไปได้ หากคุณแก้ไขรหัสใด ๆ โดยไม่ตั้งใจหรือไม่ตั้งใจให้คืนค่ารหัสฐานข้อมูลดั้งเดิมและดูว่าเว็บไซต์ที่ตอบสนองของคุณเริ่มทำงานอีกครั้งหรือไม่

        เมื่อตรวจสอบเว็บไซต์ของคุณเพื่อรับการตอบสนองมือถือคุณควรทดสอบบนอุปกรณ์มือถือ

        บางครั้งดูเหมือนว่าจะทำงานเมื่อปรับขนาดหน้าต่างเบราว์เซอร์บนเดสก์ท็อปของคุณ แต่ไม่แสดงอย่างถูกต้องบนมือถือ

        หากรหัสหนึ่งบรรทัดหายไปจากไฟล์ส่วนหัว HTML แสดงว่า สามารถทำลายการออกแบบที่ตอบสนองได้ รหัสหายไปบรรทัดเดียวนี้จะทำให้อุปกรณ์มือถือของคุณสมมติว่าไซต์ที่คุณกำลังดูเป็นเว็บไซต์ขนาดเต็ม

        ไซต์ที่แสดงผลจะมีขนาดเท่ากับวิวพอร์ต (ขนาดของพื้นที่ของ หน้าเว็บที่ผู้ใช้มองเห็นได้)

        ในการแก้ไขไซต์ที่เหมาะกับมือถือของคุณให้เพิ่มบรรทัดของรหัสต่อไปนี้ลงในส่วนหัว:

        <รูป class = "lazy aligncenter">

        บางครั้งเมื่ออัปเดตธีมรหัสนี้อาจหายไป

        รูปภาพใช้เวลาโหลดนานเกินไป

        การปรับภาพให้เหมาะสมที่สุดและ ลดขนาดไฟล์ภาพ นั้นสมเหตุสมผล รูปภาพขนาดใหญ่ที่ไม่ได้รับการปรับให้เหมาะสมอาจทำให้ความเร็วในการโหลดหน้าเว็บของคุณช้าลง สิ่งนี้อาจทำให้ผู้ใช้มือถือหงุดหงิด

        WordPress เวอร์ชัน 4.4 ขึ้นไปจะแสดงรูปภาพที่เล็กที่สุดบนเซิร์ฟเวอร์ของคุณโดยอัตโนมัติ

        หากคุณใช้เวิร์ดเพรสเวอร์ชันล่าสุดอยู่แล้ว แต่ไซต์ของคุณยังโหลดไม่เร็วพอคุณสามารถ:

        • ติดตั้งปลั๊กอินเช่น  Smush Image Optimization, การบีบอัดและการโหลดที่ขี้เกียจ เพื่อปรับขนาดและปรับภาพของคุณ
        • ใช้เครื่องมือบีบอัดและปรับให้เหมาะสมก่อนที่จะอัปโหลดภาพไปยังเว็บไซต์ของคุณเช่น TinyPNG, บีบอัด JPEG หรือ เครื่องมือเพิ่มประสิทธิภาพภาพออนไลน์.
        • เนื้อหาที่สำคัญที่สุดไม่ชัดเจน

          บางเว็บไซต์มีเนื้อหาที่ไม่จำเป็นจำนวนมากเพื่อเติมเต็มพื้นที่ว่างเมื่อเปิดบนเดสก์ท็อป

          เว็บไซต์ที่พัฒนาโดยไม่ต้องคำนึงถึงผู้ใช้มือถือโดยทั่วไปจะอยู่ในหมวดหมู่นี้ เว็บไซต์เหล่านี้ใช้เวลาและแบนด์วิดท์ในการโหลดมากขึ้น

          หากหน้าเว็บไม่ได้ออกแบบมาอย่างเหมาะสมสำหรับอุปกรณ์มือถือส่วนหนึ่งของเนื้อหาอาจไม่ปรากฏบนอุปกรณ์พกพาโดยไม่ต้องเลื่อนมาก

          ส่วนใหญ่องค์ประกอบในหน้าเว็บของคุณจะมองทางเดียวในคอมพิวเตอร์และแตกต่างอย่างสิ้นเชิงกับอุปกรณ์มือถือ

          ตัวอย่างเช่นหน้าการกำหนดราคาที่มีสามคอลัมน์จะแสดงเคียงข้างกัน บนคอมพิวเตอร์

          <รูป class = "lazy aligncenter">

          อย่างไรก็ตาม บนอุปกรณ์มือถือคอลัมน์จะถูกซ้อนทับกันเนื่องจากขนาดหน้าจอมีขนาดเล็กลง ต้องมีการทำงานนี้

          ตรวจสอบให้แน่ใจว่าตารางการกำหนดราคาของคุณอยู่ในอันดับต้น ๆ ในหน้าเว็บของคุณเพื่อที่จะได้ปรากฏขึ้นเป็นลำดับแรกเมื่อดูบนมือถือ หากคุณมีข้อความจำนวนมากอยู่เหนือโต๊ะผู้ใช้มือถือจะต้องเลื่อนลงเพื่อดูและอาจไม่

          เพื่อประสบการณ์การใช้งานมือถือที่ดีที่สุดให้ใส่เนื้อหาที่สำคัญที่สุดไว้ด้านบน ของหน้า หากผู้ใช้ต้องการเลื่อนมากก่อนที่จะสามารถดูเนื้อหาของคุณพวกเขาอาจจะไม่ได้

          ข้อมูลมากเกินไป

          ไซต์ที่มีผู้ใช้ที่ซับซ้อน - องค์ประกอบอินเทอร์เฟซเช่นตารางรูปแบบหลายขั้นตอนและคุณลักษณะการค้นหาขั้นสูงสามารถสร้างประสบการณ์ผู้ใช้มือถือที่ไม่ดี

          องค์ประกอบเหล่านี้มีข้อมูลมากเกินไปที่จะเข้าชมหน้าจอมือถือและรบกวนผู้ใช้ในการค้นหาข้อมูล พวกเขาต้องการ

          วิธีหนึ่งคือการลบหรือซ่อนเนื้อหาบางส่วนจากผู้ใช้มือถือ อย่างไรก็ตามนี่ไม่ใช่วิธีแก้ปัญหาที่เหมาะสำหรับผู้เข้าชมที่ต้องการเข้าถึงองค์ประกอบเหล่านี้

          เพื่อหลีกเลี่ยงปัญหานี้ให้เพิ่มประสิทธิภาพไซต์ที่เหมาะกับมือถือของคุณมากที่สุด นอกจากนี้ให้ลบองค์ประกอบที่ไม่จำเป็นออกขณะที่เน้นโครงสร้างหลักของเว็บไซต์ของคุณ

          ข้อมูลสำหรับหน้าจอขนาดเล็ก

          ตารางที่ซับซ้อนซึ่งมีแถวและคอลัมน์จำนวนมาก ปัญหาเมื่อดูบนหน้าจอมือถือขนาดเล็ก การแก้ไขที่ดีที่สุดคือการใช้ตารางตอบสนอง

          ปลั๊กอินเช่น  ตารางตอบสนอง WP สามารถทำให้สำเร็จได้ง่าย

          เช่นเดียวกับตารางการกำหนดราคาด้านบนเมื่อดูบนอุปกรณ์มือถือคอลัมน์จะถูกจัดเรียงเป็น พอดีกับหน้าจอที่เล็กลง

          <รูป class = "lazy aligncenter">

          วิธีอื่น ๆ ในการแสดงข้อมูลบนอุปกรณ์มือถือ ได้แก่ :

          • การสร้างตารางที่เล็กกว่าโดยไม่มีเค้าโครงตารางเพื่อหลีกเลี่ยงความจำเป็นในการเลื่อนแนวนอน
          • พลิกตารางด้านข้างเพื่อ ให้พอดีกับหน้าจอที่เล็กกว่า
          • การแทนที่ตารางที่ใหญ่กว่าด้วยขนาดที่เล็กกว่าซึ่งเชื่อมโยงกับเวอร์ชันเต็ม
          • การแปลงตารางเป็นแผนภูมิวงกลม
          • เนื่องจากการใช้งานมือถือเติบโตขึ้นอย่างทวีคูณจึงมีความจำเป็นที่เว็บไซต์ธุรกิจจะได้รับการปรับให้เหมาะสมกับเวอร์ชันที่เหมาะกับอุปกรณ์พกพา ปรับปรุงประสบการณ์ของผู้ใช้โดยไม่ต้องเสียสละการทำงานโดยทำตามขั้นตอนด้านบน

            คุณควรตรวจสอบประสิทธิภาพของเว็บไซต์ของคุณและปรับแต่งเมื่อจำเป็นเพื่อปรับปรุงประสิทธิภาพและประสบการณ์ผู้ใช้

            วิธีทำ SEO กับ Facebook Page ให้ติดหน้าแรก Google Search

            กระทู้ที่เกี่ยวข้อง:


            14.10.2019