Erstellen und entwerfen einer professionellen WordPress-Website - Optimiere deine Website für bessere SEO | Teil 5 | Robin & Jesper ✓ | Skillshare

Playback-Geschwindigkeit


1.0x


  • 0.5x
  • 0.75x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

Erstellen und entwerfen einer professionellen WordPress-Website - Optimiere deine Website für bessere SEO | Teil 5

teacher avatar Robin & Jesper ✓, Teaches Digital Marketing & Social Media

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

    • 1.

      Einführung - UI vs UX vs CX

      8:26

    • 2.

      Schneller Test deiner Website

      7:35

    • 3.

      Image

      17:09

    • 4.

      PNG in JPG Konvertierung

      10:01

    • 5.

      Beseitigen Rendering JavaScript und CSS

      10:48

    • 6.

      Server reduzieren

      11:36

    • 7.

      SSL SiteLock CDN

      5:23

    • 8.

      SSL CDN Compability

      6:15

    • 9.

      Cloudflare CDN

      10:22

    • 10.

      Startseite Site URL Verbindungen

      4:03

    • 11.

      Browser-Caching nutzen

      9:41

    • 12.

      Weitere Optimierungen

      13:09

    • 13.

      Unterstützung

      3:22

    • 14.

      Mobile Design

      13:39

    • 15.

      Tablet-Design UX

      7:39

    • 16.

      Tablet Design UI

      7:59

  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Jedes Niveau

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

152

Teilnehmer:innen

1

Projekt

Über diesen Kurs

Willkommen im fünften Teil von "Erstellen und entwerfen einer professionellen WordPress-Website - Optimiere deine Website für ein besseres SEO".

In diesem Teil des Kurses werden wir deine Website optimieren, um eine schnellere Ladegeschwindigkeit zu erhalten, sie zu sichern und mobiles Verhalten zu machen, um bessere SEO zu bekommen.

Wir gehen Schritt für Schritt und lernen …

Einleitung: UI vs UX vs
CXSpeed Test deiner
WebsiteImage Laden von
SpeedPNG in JPG
ConversionEliminate Rendering-blocking JavaScript &
CSSReduce Server Response
TimeSSL & SiteLock CDNSSL & CDN
CompatibilityCloudflare

CDNHome & Site URL Korrekturen
versenden Browser-Caching
Weitere

OptimizationsSupportMobile Design UXMobile Design UXMobile Design UXTablet Design
UXTablet Design

UXTablet Design UI

und... Vergiss nicht, dich für Teil 6 anzumelden!

Bis in den Kurs sind.

Liebe

Robin und Jesper

Triff deine:n Kursleiter:in

Teacher Profile Image

Robin & Jesper ✓

Teaches Digital Marketing & Social Media

Kursleiter:in

We're passionate about teaching! There's no greater joy than watching beautiful testimonials of people achieving their goals and dreams. That's why we STRONGLY believe in full and constant support. With ALL of our courses you can expect:

If you're interested in learning Digital Marketing - Social Media Marketing or Creating a Something Awesome..

We're at your service!

Love

Robin & Jesper

Vollständiges Profil ansehen

Level: All Levels

Kursbewertung

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen auf Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. Einführung – UI vs. UX: Hallo und willkommen im Optimierungsabschnitt vom Kurs. Nun, das ist ein super wichtiger Abschnitt, in dem wir über Dinge wie Seitenladegeschwindigkeit sprechen werden. Nun, wenn Ihre Seitenladegeschwindigkeit zu langsam ist, Ihre Besucher nicht einmal bleiben, um Ihre Website zu erleben. Es spielt also keine Rolle, wie gut du dich entschieden hast. Und jetzt, ähnlich, wenn Sie eine wirklich schnelle Ladegeschwindigkeit haben, aber Sie haben ein schreckliches Design, werden Besucher sowieso nicht bleiben. Der wichtige Teil ist also, alles zu optimieren und diese wunderbare Balance zu finden, um sicherzustellen , dass alles funktioniert. In dieser Vorlesung werden wir einige wirklich wichtige Akronyme durchlaufen, was sie sind, wie man sie benutzt und wie man sich auf diese Ausdrücke bezieht und sie im Hinterkopf behalten, während Sie Ihre Website entwerfen insgesamt, richtig, Bisher haben wir die Homepage getan. Jetzt werden wir es optimieren und diese Optimierungsstationen, wir werden den Rest des Kurses im Hinterkopf behalten. Wir wissen also immer, was wichtig ist und worauf wir uns konzentrieren müssen. Also lasst uns jetzt anfangen, Ein Ausdruck, den du hören wirst ah, viel, wie du deine Forschung machst und wie du deine Website weiterentwickelst und deine Website-Bearbeitung und Gestaltung Fähigkeiten weiterentwickelst, ist etwas, das dich genannt wird. Ich bin auch als Benutzeroberfläche bekannt. So ist die Benutzeroberfläche im Grunde das, was wir getan haben. Es ist die Gestaltung. Also, wenn wir jetzt einen Blick auf unsere Website werfen, ist ein Teil der Benutzeroberfläche all das, was wir betrachten, wie zum Beispiel der Hintergrund hier, wie die Schriftart, die Wiederverwendung der Farben, die verwendet wurden die Tatsache, dass wir diese klebrigen Menü gemacht und gab ihm einen Schatten. Die Farben hier, die Tatsache, dass wir darüber nachgedacht haben, dieses Dunkel mit diesem Licht zu haben und dann dieses Ah zu tun , ein bisschen dunkel. Du machst das etwas leichter. Dies ist alles ein Teil des Designs, wie es aussehen wird und wie es mit den verschiedenen Farben erlebt wird. Und das ist ein Teil von der Benutzeroberfläche. So konnten wir die Benutzeroberfläche als Teil der Ästhetik zusammenfassen. Richtig? Wie die Website aussieht. Aber dann gibt es noch etwas anderes. Es gibt etwas, das verwendet wird, erfahren wie üblich Akronym, dass Sie x Recht. Wir können die in der Mutigen sehen. Also ist die Benutzererfahrung im Grunde, wie Ihre Website funktioniert, oder? Ein Teil der Benutzererfahrung ist beispielsweise, beispielsweise, was passiert, wenn sie auf die Homepage kommen. Was ist der nächste Schritt? Dass sie das Thema machen, dass wir mehr Knopf lernen müssen, der sie hier zum Anfang bringt , die Reihenfolge von diesen Seiten abblättern, die Tatsache, dass wir ein klebriges Menü haben. Wenn sie also nach unten scrollen, können sie sofort auf diese Seiten zugreifen. Das ist alles ein Teil der verwendeten Erfahrung, wie die Website funktioniert und wie sie auf verschiedene Dinge zugreifen können. Grundsätzlich, wie sich die Website anfühlt, und auch ein Teil der Benutzererfahrung ist, dass Ihre Website Aggie füllt? Lädt es langsam? zum Beispiel Wenn ichzum Beispielnach oben scrolle, werden die Dinge verschwommen? dauert nicht zu lange, bis diese Farbe angezeigt wird. All dies ist ein Teil ihrer Erfahrung. Nun, wenn es sich zum Beispiel anfühlt , oder Laghi, das wird wirklich die Erfahrung von der Website herunterspielen, richtig? Wenn wir eine langsame Ladegeschwindigkeit haben, die einen großen Teil der Benutzererfahrung von dieser Website herunterspielen wird , damit wir die Benutzererfahrung zusammenfassen können, wie die Website funktioniert, wie die Seiten angelegt sind, warum sie so ausgelegt sind. Die Suchfunktion, die Art, wie sie die Abschnitte gesetzt wurden, warum wir die Abschnitte so gestellt haben. So erkannten wir, dass die Benutzeroberfläche und die Benutzererfahrung sie irgendwie miteinander verschmelzen, aber sie sind nicht die gleichen. Also, wo sind Benutzeroberflächen über das Design selbst? User Experience hat auch einen Teil des Designs, aber es geht mehr darum, wie es auch funktioniert, so dass es schnell, mühelos und in einer durchdachten Art und Weise funktioniert , zum Beispiel, dass wir die lernen mawr Boden, dass es bringt sie zum Start hier Seite, dass wir ein klebriges Menü haben, usw cetera. Das ist alles ein Teil der Funktionsweise der Website und somit ein Teil der Benutzererfahrung . Und dann haben wir auch etwas, das Akronym S C X ist, auch bekannt als Customer Experience, und die Customer Experience, die viel mehr über Ihr Unternehmen ist, wie Menschen Ihr Geschäft wahrnehmen, oder? Also, zum Beispiel, wenn Sie solche Dinge haben, wie Sie auf E-Mail, offen oder Sie haben eine Lead-Generation, oder vielleicht bieten Sie kostenlose Dinge auf Ihrer Website. Sie bekommen ein wirklich gutes Gefühl von der gesamten Erfahrung auf Ihrer Website von Ihrem Unternehmen, dass Issa Teil der Kundenerfahrung. Nun könnten wir dies als die einige außerhalb der Benutzeroberfläche zusammenfassen, die Benutzererfahrung zusammen mit Ihrem Unternehmen. Richtig. Also, wenn Sie eine wirklich gut aussehende Website haben, haben Sie eine große Benutzererfahrung auf dieser Website und Ihr Unternehmen bietet eine großartige Lösung für ihr Problem. Dann werden Sie eine sehr hohe Kundenerfahrung haben, richtig? So könnten wir zusammenfassen, dass als die allgemeine Geschäftserfahrung, dass Ihre Kunden, dass Besucher aus Ihrem Geschäft haben und dass Ihr Unternehmen natürlich durch Ihre Website vertreten ist . Jetzt gehen wir weiter und konzentrieren uns auf die Benutzeroberfläche und die Benutzererfahrung, weil dies ein WordPress-Meisterkurs ist, richtig? Die Kundenerfahrung wird natürlich kommen, wenn Sie beginnen, Ihr Geschäft zu entwickeln , weil verschiedene Unternehmen unterschiedliche Tools und unterschiedliche Bedürfnisse haben werden . Aber wir werden sicherstellen, dass die Website alles mit dem Design und allem mit der Benutzererfahrung erfüllt , so wie wir es jetzt haben und auch weiterhin tun werden. Das Ergebnis der Optimierung wird zum Beispiel sein, zum Beispiel sein, dass wir S E o verbessert haben werden. Wenn unsere Seiten schneller geladen werden, bedeutet das auch, dass die Suchmaschinen glücklich sein werden, werden Sie Rang höher. Es bedeutet auch, dass Kunden auf Ihrer Website bleiben. Nun, das heißt Retention. Und wenn Sie eine hohe Bindung haben, mit anderen Worten, Kunden für eine lange Zeit auf Ihrer Website nachhaltig, Suchmaschinen werden Sie noch mehr mögen. Und das bedeutet, dass du höher rangierst und höher im Rang rangierst. Wie Sie mehr und mehr Besucher bekommen werden, und darum geht es alles. Und schließlich, wenn Sie eine großartige Benutzeroberfläche haben, große Benutzererfahrung und schließlich die benutzerdefinierte Erfahrung wirklich Gipfel. Dann wirst du jetzt Conversions haben, Conversions. Das ist nur ein Wort, das buchstäblich Veränderung bedeutet. Eine Konvertierung für einen Block könnte also sein, dass Sie einen Besucher in einen Leser verwandeln lassen. Nun, wenn Sie einen E-Commerce haben, könnte das bedeuten, dass Sie einen Besucher in einen Käufer verwandeln, oder Sie könnten , zum Beispiel , einen Besucher in eine Lead verwandeln , usw. Je nachdem, was Sie wollen, dass sie sich in Umwandlung verwandeln, wird das das Ergebnis sein, richtig? Das ist es, worüber wir gesprochen haben. Der Zweck aus der Website der Homepage und alles. Und weil wir Kurse machen, wollen wir, dass Leute auf unsere Website kommen, sich an uns gewöhnen, warm werden und durch unsere Kurse. Also, wenn jemand einen von unseren Kursen kauft, wird das eine Konversion für uns sein. Und um das zu bekommen, müssen wir die Benutzeroberfläche nageln. Ihr, ich, die User Experience ux und der Kunde erleben das C X. Also, Jungs, nicht, wenn wir das wissen, werden wir zum nächsten Vortrag übergehen. Und weil wir so viel Benutzerschnittstelle für das Design getan haben, mit anderen Worten, wir werden beginnen, indem wir die Benutzererfahrung verbessern und schauen, wie unsere Website funktioniert mit der Ladegeschwindigkeit, zum Beispiel. Das ist also super wichtig. sehen uns in der nächsten Vorlesung, wo wir das U X optimieren und dann tiefer in dich eingehen. Ich sehe dich dort 2. Speed deine Website: Alles klar, Leute, in diesem Vortrag werden wir weitermachen und lernen, wie wir unsere Website testen können. Nun, das ist sehr wichtig, weil die Ladegeschwindigkeit von Ihrer Website bestimmt, wie Ihre Besucher Ihre Website erleben, erinnern Sie sich? Verwendet, um zu erleben. Jetzt gibt es einige ziemlich verrückte Statistiken, die zeigen, dass, wenn Ihre Website fünf Sekunden oder länger zum Laden dauert , dann bis zu 70% Rabatt Ihre Besucher verlassen werden. Und ähnlich, wenn Ihre Website zwei Sekunden benötigt, um zu laden, dann bis zu 34% Rabatt Ihre Besucher werden das verlassen, Jungs, das sind ein zwei Sekunden, die die Leute nicht bereit sind zu warten, bis sie geladen wird. Das ist wahnsinnig. Daher müssen wir sicherstellen, dass unsere Website schnell geladen wird. Andernfalls, wenn wir den ganzen Verkehr verlieren, werden sie nicht all dieses schöne Design erleben. Richtig? Also werden wir weitermachen und ein Werkzeug benutzen, das Zeit angerufen wird, und das wird natürlich dabei sein. Die Ressource ist, dass Sie einfach voran gehen und darauf zugreifen können. Sie sind und wir werden voran gehen und sehen, wie lange es dauert, bis eine Website geladen und zu sehen was sie verzögert. Wenn es lange dauert, ist das, was ich hier tun werde, tatsächlich an Tab gewöhnt. Also werde ich eine für die Website verwenden, die ich erstellt habe, richtig, richtig, und dann eine andere Registerkarte mit der gleichen Zeit, wo Sie gehen und überprüfen Sie Ihre Konkurrenten Ladezeit oder einfach jemanden, der Sie Ihr Design von basiert haben, weil , die Ihnen einen guten Hinweis geben wird, was Sie verpassen, wenn es um Ladezeiten geht , wenn es um oft Mäuse ations geht. Also, was ich vorangehen und tun werde, ist voran zu gehen und unser u R l so zu schnappen. Ich werde es bewältigen, und dann werde ich weitermachen, das entfernen und es einfach einfügen. Da gehen wir, und ich werde auf Start Testen klicken. Ich werde diesen zufälligen Ort verlassen, Testen beginnen, und ich gehe zu Pat Flynns Website, die seine Website benutzen würde, weil wir ihn so sehr erschüttert haben und in einer Menge für die Wissenschaft auf seiner Website basiert, Ich werde gehen und seinen Ural holen. Kopieren Sie es. Gehen Sie hier zurück, entfernen Sie diese, fügen Sie sie ein, und klicken Sie dann auf. Beginnen Sie mit dem Test. Ich werde das zufällig überlassen. Das ist nicht ganz fair, aber es ist nicht. Wie auch immer, wir wollen nur eine Vergleichstabelle. Die Chancen stehen hier, einige viel höheres Budget und Menschen, die für ihn arbeiten, um seine Website auf die nächste Ebene zu optimieren . Nun, wir wahrscheinlich nicht. Wir wollen immer noch etwas, mit dem wir vergleichen können. Alles klar, Leute. Also sind die Ergebnisse in, und ehrlich gesagt, es sieht nicht zu gut aus. Wenn wir uns das ansehen, können wir sehen, dass Ladezeit ab Sidney, Australien jetzt, Aber jedenfalls, sind Ladezeit ist über vier Sekunden. sind DassindMillisekunden, also das bedeutet, dass jede 1000 eine Sekunde ist. Die Ladezeit für eine Website beträgt also 4,2 Sekunden. noch, Weißt dunoch,wie viel Verkehr wir nach zwei Sekunden verloren haben? Kannst du dir vorstellen, wie viel wir die drei verlieren werden? Und jetzt sogar vier. Wir sind fast fünf Sekunden. Was bedeutet, dass wir wahrscheinlich 70% Rabatt auf den verlorenen Verkehr anfassen. Das ist ein massiver Deal Breaker, und wir müssen das optimieren. Wir sehen, dass wir viele Anfragen haben, Anfragen sind, dass es bestimmte Dinge, die zwischen dem CSS und JavaScript geladen werden müssen . Wir müssen hier nicht im Detail eingehen. Nur, dass es eine Menge Dinge gibt, die auf unserer Website los sind. Es hilft wahrscheinlich nicht bei der Ladezeit und die Gesamtgröße für unsere Website beträgt 2,7 Megabyte. Leute, das ist jetzt zu groß. Ehrlich gesagt, das Ziel ist es, für Ihre Website unter ein Megabyte zu kommen. Okay, also 2.7, das ist einfach zu groß. Und das müssen wir in Ordnung bringen. Wenn Sie es wirklich professionell machen, können Sie es sogar schaffen, auf die unter 500 Kilobyte zu gehen. Nun, da 0,5 Megabyte, können wir sehen, dass wir eine niedrige Leistungsklasse für die vier von 100 basierend auf den vorherigen Statistiken haben. Aber unsere mobile Nutzungsfähigkeit ist wirklich hoch, und das ist dank der Ocean WP Thema und natürlich elementar, die es bereits mobil reaktionsfähig für uns macht. Also danke dafür. Und dann sehen wir, wo dieser Test basiert. Also lasst uns weitermachen und Pat Flynns Website ausschütteln. Jetzt können wir sehen, dass er so viel schnelleres Laden von einer viel, viel, viel schnelleren Ladezeit richtig hat viel, , also ist er Ladezeit 0,3 Sekunden, fast 0,4 Sekunden, aber trotzdem Es ist unter einer Sekunde. Es ist auch erwähnenswert, dass er aus den USA geladen wird, während wir aus Australien laden . Es gibt also einen Unterschied, aber immer noch ist der Unterschied massiv. Er ist viel weniger gefragt, dass auch geholfen. Aber sieh dir das an. Das ist lebenswichtig. Die Gesamtgröße seiner Website beträgt 630 Kilobyte. Jetzt, dass 0,6 Megabyte. Deshalb müssen wir unsere Website drastisch senken, um sie zu beschleunigen. Betrachtet man seine Leistungsklasse, können wir sehen, dass er hier auch nicht die Waage übertrifft. Er hat nicht 100 von 100 Jungs, die Sie nicht unbedingt die Leistungsskala überlegen wollen denn je höher Ihre Leistung ist, in der Regel desto mehr muss Ihr Design leiden, richtig, denn je mehr hohe Qualität Bilder Ihre Verwendung, desto interaktiver präsentiert, Sie verwenden all diese Dinge, die Zeit brauchen, um zu laden. Was Sie also tun möchten, ist ein Gleichgewicht zwischen User Experience und der Benutzeroberfläche zu finden . Also 73 könnte tatsächlich eine wirklich, wirklich gute Nummer sein , weil wir wissen, dass seine Website wunderschön das Zeichen ist und es gibt eine Menge wunderbarer Features gehen hier. Also die Tatsache, dass er all diese wunderbaren Nachkommen die Last so schnell haben kann, dass erstaunlich ist . Denken Sie daran, wenn Sie den Test durchführen, Sie wollen nicht zu viel in der Leistung gehen und das Design leiden lassen. Es dreht sich alles um die Balance. Hier. Mobile Usability wird auch wirklich hoch rangieren. Also gehen wir zurück zu unserer eigenen Website hier jetzt. Das Interessante ist, dass, wenn wir nach unten scrollen, wir tatsächlich sehen können, was das Problem auf unserer Website ist. Richtig. Was wir hier sehen, ist, dass wir ein Problem mit der Optimierung unserer Bilder haben. Sie sind nicht optimiert. Mit anderen Worten, wir haben etwas namens Renderblockieren JavaScript und CSS im obigen Faltinhalt, denken Sie daran , über der Falte, , über der Falte,das wird all dies sein. Und alles hier ist unten unter der Falte. Und dann haben wir die Reaktionszeit des Servers reduziert und nutzen, durchsuchen oder einlösen Was? Wir werden voran gehen und machen Jungs in den kommenden Vorträgen gibt es, um durch all diese zu gehen und sie zu korrigieren und sicherzustellen, dass unsere Website viel, viel schneller lädt und alles optimieren Okay, denn das wird unseren Benutzer Erfahrung leiden eine Menge. Wird unser S CEO eine Menge leiden lassen. Grundsätzlich werden Sie nicht in der Lage sein, ein nachhaltiges Geschäft mit dieser Art von langsamen Website zu haben. Okay, also müssen wir das korrigieren. Und ehrlich gesagt, es ist ziemlich aufregend zu tun. Dies ist ein entscheidender Schritt. Lassen Sie sich diesen Abschnitt im Kurs nicht entgehen. Wir sehen uns in der nächsten Vorlesung, Leute. 3. Image: Ordnung, meine Freunde, in diesem Vortrag werden wir weitermachen und gemeinsam Probleme lösen, wie wir es für eine Weile haben. Jetzt werden wir weitermachen und unsere Bildladegeschwindigkeit optimieren, weil wir gerade nicht so beeindruckend aussehen . Beim Test haben wir gerade getan. Also, wie Sie sehen können, wenn Sie unten scrollen, erhalten wir ein paar Empfehlungen, die wir hier im Leistungsabschnitt haben. Wir haben die Optimierung von Bildern, eliminieren Render-Blockierung, reduzierte Service-Bones, Zeit-Hebelwirkung, Browser-Einlösung, und dann eine bei mobiler Usability Größe tippen Sie auf Ziele angemessen. Jetzt werden wir sie durchgehen, aber wir werden es Schritt für Schritt tun. Also fangen wir mit diesem an. Optimieren von Bildern Wenn ich hier klicke, es mir eigentlich sagen, wie viel Platz ich sagen könnte, wenn ich nur ein bisschen klüger wäre. Und auch welche der Bilder sie tatsächlich kosten Probleme, so dass wir sehen können. Zum Beispiel haben wir die diese sind Marketing 17 Kurse in einem Bild tatsächlich könnte es um 97% reduziert werden . Das ist riesig. Und auch wir haben den Amazonas. Sie könnte um 97% reduziert werden. Wir haben das Shopify-Bild 97% Und das sind all diese Bilder, die wir gerade aufgestellt haben sie nehmen eine riesige Menge an Platz in unnötig jetzt. Wir haben auch andere Bilder, wie es sagt, sie sind Himmelsmenschen und Menschen, und das sind eigentlich die Hintergrundbilder, die ich gerade nicht benennen wollte. Aber ich erinnere mich an die Namen von ihnen. Dies sind also die Hintergrundbilder, die genauso gut optimiert werden könnten. Und schließlich haben wir die abgeschnittene Bildbearbeitung, und das ist eigentlich der Name unseres Logos. Aber wie Sie sehen können, wird dies nur sagen, es waren 4,9 Kilobyte. Also werde ich mich nicht darum kümmern, dieses zu optimieren. Aber alles hier oben werden wir voran gehen und jeden einzelnen von ihnen optimieren und dann einen neuen Test durchführen und diese Größe nach unten bekommen, weil diese seine Art zu sein will unter einem Megabyte und definitiv unter zwei Sekunden für die Ladezeit. Gehen wir also weiter und gehen Sie zu unserer Homepage. Und wenn Sie hier sind und mit L ein Mentor bearbeiten wollen oder wir tun müssen, klicken Sie auf Bearbeiten mit L. A Mentor. Also, was wir jetzt tun werden, ist, dass wir anfangen werden, alle diese Bilder zu optimieren, die verwendet wurden . Und wir reden über dieses Hintergrundbild, diesen Hintergrund, all diese drei und dieses Hintergrundbild, richtig? Und wir werden das tun, indem wir sie alle in einen Ordner legen, damit wir wissen, wo wir sie haben . Und dann gehen wir auf diese Website namens Image Compressor dot com zu gehen. Auch bekannt, wie oft meine sil, Wie ich liebe diesen Namen. Also, das ist natürlich, in der Ressource ist jetzt alles, was wir gehen und hier tun, ist auf Dateien wie diese hochladen klicken , und dann gehen wir zu all unseren Bildern, wählen Sie sie aus und klicken Sie auf Schuhe. Also ist es eigentlich ein wirklich übergebener Prozess, und jetzt wird es anfangen, die Bilder für uns in dieser Sekunde zu komprimieren. Aber das Schöne hier ist eigentlich, dass wir unsere eigene Kompression anpassen können, oder? Also, zum Beispiel, wir haben jetzt Amazon, die hier ausgewählt ist. Und wenn ich nach unten scrolle, kann ich sehen, wie das Original aussieht und wie es aussieht, während es komprimiert ist. Ich kann auch sehen, wie viele Prozent ich spart, was die neuen Größen. Aber hier ist das Interessante hier. Ich kann die Menge der Farben sehen, die gerade verwendet wird, und auch bemerken, dass es im Moment nicht viele Kulturen gibt. Also, was ich tun werde, ist, das zu sagen, Lasst uns 80 Halsbänder machen und wir können sagen, dass es überhaupt keinen Unterschied in den Bildern gibt. Aber es gibt einen Unterschied in dieser Größe, also werde ich weitermachen. Gehen wir runter auf 70, richtig? Und es gibt immer noch keine spürbare Gleichheit. Wirklich, das ändert sich hier. Also werde ich noch weiter runtergehen. Gehen wir runter, um 55 zu sagen. Ich schiebe hier die Grenzen leicht. Machen wir 53, es sieht immer noch gut aus. Ich werde noch weiter gehen. Lass uns 40. Okay, also habe ich gerade gerade diese große Zeit komprimiert. Selbst wenn ich davon ausgehen würde, dass es immer noch keinen spürbaren Qualitätsverlust gibt, werde ich wirklich verrückt werde ich wirklich verrücktwerden und mit 20 gehen und es sieht immer noch aus. Okay, aber wenn ich davon ausgehen würde, ja, wie wir sehen können, fängt das Weiß tatsächlich an, ein bisschen zu leiden. Also werde ich aufziehen, um 40 zu sagen, und wir bekommen eine schöne oder weiße dort. Also werde ich bei diesem hier bleiben mit den vier zum College, weil das sowieso nur eine Miniaturansichtsgröße sein wird , also klicke ich auf „Bewerben“. Also sind wir gerade von 68 auf 76% Komprimierung gegangen. Wirklich gut. Nun, das ist nur ein Thumbnail, so dass Sie mit MAWR-Qualität hier davonkommen können. Aber dieses Bild ist ein super wichtiges Bild, denn das ist unser Hintergrundbild. Also müssen wir hier etwas vorsichtiger sein. Also haben wir jetzt die Qualität und nur um dir zu zeigen, was passiert, wenn du zu weit gehst, wenn ich das runterziehen würde, um zu sagen , du weißt, lass uns mit 35 gehen, können Sie sehen, dass es einen anständig spürbaren Mangel an Qualität gibt hier drin, vor allem, wenn ich verklage meine, dass es mehr verbreitet wird und weil das ein bisschen empfindlicher gegenüber einem Fall ist , weil es ein großes Hintergrundbild geben wird. Wir wollen hier nicht zu weit gehen. Wie Sie sehen können, ist alles verschwommen im Hintergrund hier Lassen Sie uns 60 ausprobieren und sehen, was passiert. Sechs sieht also ziemlich gut aus. Ich werde verklagen. heißt, man kann sehen, dass es definitiv ein wenig Qualitätsverlust gibt, wenn man so annimmt . Aber ich werde tatsächlich gehen und es auf 65 erhöhen. Ich denke, das sieht wirklich nett aus. Also, was willst du tun? Sie können auch sehen, dass es ein wenig außerhalb des Anrufers sonst verblasst. Ich werde hier zu 70 gehen. Also, was Sie hier tun wollen, ist nur die Qualität im Auge zu behalten. Stellen Sie sicher, dass der Verlust nicht zu große Rechte ist, vor allem auf diesen wichtigen Bildern. Wir werden sie anwenden, und wir werden das für alle Bilder tun. Und dann werden wir sicherstellen, dass wir sie auf unserer Homepage hochladen und einen Blick haben , so dass es keine spürbare leiden von Qualität. Natürlich wollen wir nicht auf die tatsächliche Bildqualität und spürbare Qualität verzichten, um eine bessere Ladegeschwindigkeit zu erreichen. Es wird diese schöne Balance geben, aber wir wollen unter ein Megabyte in der Größe, also werde ich diese Bilder weiter optimieren. Lassen Sie uns das auf etwa ziehen, sagen wir 65, dann bald in, wir können sehen, dass es eine definitive Änderung der Qualitäten. Ich werde mit 70 auf diese gehen, und dann werde ich mich bewerben, und wir werden sehen, welche Art von Ergebnissen diese Erträge haben. Jetzt können Sie zum Beispiel sehen, sehen, wir sind von 252 Kilobyte auf 71 Kilobyte gegangen. Es gibt einen riesigen, riesigen, riesigen Unterschied. Also sparen wir eine abgesägte Größe. Und jetzt, wenn wir jemals zu weit gehen würden, was wir beim Hochladen bemerken werden, müssen wir nur Ihren Upload, ihr Original,zurückgehen ihr Original, und dann freundlicher auf die Komprimierung sein selbst. Also werde ich auf 70 runter gehen. Nun, da würde es gehen. Ich werde schlagen. Bewerben. Dies ist ein Thumbnails. Ich muss nicht sehr sensibel sein. Gehen wir mit und schauen, sagen wir, 59. Sie können sehen, dass es hier ein Qualitätsleid gibt. Aber noch einmal, dies wird ein Thumbnails sein. Ich glaube, das wird gut. Ich gehe voran und benutze das von 501 Kilobyte bis 116. Das ist riesig. Und schließlich werde ich Shopify nicht tun. Und das ist auch ein sehr einfaches Bild, obwohl im Hintergrund noch mehr los ist. Also werde ich nach unten scrollen. Lass uns 60. Da gehen wir, und ich werde mich hier bewerben. Jetzt, wenn ich fertig bin, habe ich es auf alle angewendet und wir können sehen, dass es keinen wahrnehmbaren Qualitätsverlust gibt. Nichts Großes. Ich werde alle diese herunterladen, indem Sie einfach auf Download all klicken. Und dann werde ich sie abholen. Also hier sind alle Bilder, die ich gerade benutzt habe. Und hier ist der Bildkompressor. Es ist eine SIP-Datei. Ich werde nur doppelt darauf klicken. Und hier bekomme ich die neuen Fouls. Es ist nur in diesem Ordner namens Image Compressor. Richtig, also ist das wirklich, wirklich gut. Jetzt gehen wir weiter und gehen auf die Website. Wir werden alle hochladen, und dann machen wir einen neuen Test und sehen die Ergebnisse. Okay, also fangen wir mit dem Hintergrundbild hier an. Ich klicke hier hoch. Wir werden diesen Abschnitt bearbeiten, zum Stil übergehen, und dann haben wir das Bild hier. Ich gehe über, um die Datei hochzuladen. Ich gehe zum Bildkompressor auswählen. Es ist genau hier drin. Und dann werden wir dieses Himmelbild wieder benutzen und wir können sehen, dass die Größe jetzt 134 ist. Und denken Sie daran, wir haben immer noch zertrümmert, dass die Dateien für uns komprimiert werden, um hochzuladen ist in Abschnitt 131. Es wendet diese Lebenskompression darauf an. Aber sieh dir diesen Vergleich an. Wir haben 131 Kilobyte hier und die vorherige, sogar mit zerschlagenen komprimiert war 422 ist ein großer Unterschied, Jungs. Und das liegt daran, dass wir die verlustbehaftete Komprimierung verwenden, oder? Mit smart können wir Onley verlustfreie Komprimierung verwenden, es sei denn, wir kaufen diesen Stecker in. Und natürlich, wenn Sie Ihr Leben ein wenig schneller und einfacher machen wollen, können Sie kaufen smush die Prämie. Aber ehrlich gesagt, es ist nicht so große Mühe, dieses Tool zu verwenden. Ich denke, es funktioniert hervorragend. Das sieht also wirklich schön aus und geht voran und klickt auf Insert-Medien und hier haben wir es . Also lassen Sie mich voran und klicken Sie auf Vorschau Änderungen hier und hier haben wir es. Und wie Sie sehen können, gibt es keinen großen Unterschied in der Qualität. Also, wenn ich dir nur den Unterschied zwischen ihnen zeige, werde ich sie nebeneinander vergleichen. Also, wenn ich die beiden auföffne, ist das das Originalbild, richtig? Dies ist derjenige, der 422 Kilobyte war, und dann ist dies derjenige, der fast viermal kleiner ist, wie Sie verkaufen können. Wenn wir uns den Schatten hier unten betrachten, während ich zwischen ihnen springe, gibt es einen leichten Unterschied in der Farbe auf immer so leichte Unterschiede in der Farbe. Und Sie können feststellen, dass diese gefragt , Nun, wenn Sie den Hintergrund rechts betrachten, aber es ist keine große Sache los. Dies lohnt sich, die gesamte Größe zu sparen und die gesamte Ladezeit zu sparen. Also, im Grunde, obwohl wir verlustbehaftet sind, ist es im Grunde kein Verlust gegenüber der tatsächlichen Qualität. Lassen Sie uns also weiter optimieren. Ich werde weitermachen. Ich werde nach unten zu hier scrollen, klicken Sie auf die Bearbeitung dieses Abschnitts, bewegen Sie sich zu Stil, gehen Sie nach unten zum Bild hier, klicken Sie auf das Bild, und ich werde Dateien hochladen, Wählen Sie aus. Und dann klicke ich auf das Bild mit den Mädchen, die hier sitzen. sind Dassind76 Kilobyte. Und wenn Sie einen Blick auf die Vorschau werfen, das ist 293. Das ist also ein riesiger, riesiger, großer Unterschied. Nun, meine Mathematik ist zu schlecht, um Ihnen eine richtige Berechnung zu geben. Wie viel besser es ist, aber es gibt einen großen, großen Unterschied. Richtig? Also von 293 bis 74 in Ghana, könnte es Medien hier und da einfügen wir es haben. hier gibt es keinen spürbaren Qualitätsverlust. Jetzt werde ich voran gehen und ich werde sie alle hochladen. Und dann überprüfen wir die Seite, richtig? Also werde ich dasselbe tun. Erscheinen, gehen Sie zum Abschnitt, gehen Sie zum Stil. Ich klicke auf das Bild hier, lade Dateien hoch, wähle Bilder aus, klicke auf Schuhe. Das sind 71 Kilobyte. Die vorherige war 252. Großer Unterschied. Klicken Sie auf Medien einfügen. Da gehen wir. Jetzt werde ich voran gehen und diese ändern. Das ist, was ich gerade werde Kulick hier und ich werde auf dieses Bild klicken und dann ausgewählte Dateien hochladen und dann werde ich die richtige und Schuhe und die Insert-Medien hochladen. Ich werde das weiterhin bei allen tun, okay? Also habe ich gerade alle diese drei auch geändert. Jetzt gibt es noch eine Sache, die super wichtig ist für Sie zu wissen, dass ich nicht getan als ich diese Bilder früher benutzte. Und das heißt, wenn Sie auf das Unreife klicken, können Sie sehen, dass ich die volle Bildgröße verwende. Es gibt keinen Grund, das zu tun, denn wir komprimieren es auf eine so kleine Größe. Also, als wir uns den Test anschauten und es sagte, dass Sie danach sparen können und eine 97% Reduktion haben , was es damit bedeutete, dass ich tatsächlich kann, anstatt ein vollständiges Bild zu verwenden, es nimmt eine Menge von Größe und Platz . Ich kann einfach voran gehen und klicken Sie auf Medium, zum Beispiel, und es gibt keinen Verlust an Qualität überhaupt, weil ich tatsächlich diese kleine Größe habe. Aber es schneidet sich selbst durch die Verwendung dieser Funktion, so dass es automatisch noch kleiner wird Jetzt werden Sie feststellen, wenn Sie zu weit gehen. Denn wenn ich das Thumbnail hier zum Beispiel verwendet , können Sie sehen, dass das nur das Bild ruinieren. Richtig? Aber wenn ich das Medium 300 mal, 300 oder mittel groß oder ich eine große verwendet, kann man sagen, dass der einzige wirkliche Unterschied ist die Ladezeit, weil die Qualität ziemlich gleich ist. Also werde ich mit Medium 300 mal gehen, 300, weil das alles ist, was wir brauchen. Dasselbe hier. Mittlere 300. Dasselbe hier. Mittlere 300 Mal, 300. Und jetzt haben wir alles aktualisiert. Ich gehe weiter und klicke auf Update hier und jetzt gehe ich runter und klicke auf Vorschau-Änderungen, und wir werden sehen, wie die Website aussieht und wie du sehen kannst, hast du diese Ladezeit gesehen? Das war ein großer, großer Unterschied. Leute wie wir sind gerade so hier gelandet und ich liebe das, und wenn du nach unten scrollst, siehst du, dass es keine echte verlorene Qualität gibt. Eigentlich könnte dieses Bild ein wenig viel Qualität haben, aber nicht zu schlecht, aber nicht zu schlecht, meiner Meinung nach ist das Scrollen nach unten kein merklicher Verlust von Qualitäten. Das einzige, was Sie vielleicht tun möchten, wäre, die Qualität von diesem Bild zu erhöhen , denn hier ist es ein bisschen auffälliger. Aber dieser hat keinen spürbaren Qualitätsverlust. Was ist denn je los? Also bin ich super zufrieden mit den Ergebnissen davon. Aber was wir jetzt machen werden, ist, einen neuen Geschwindigkeitstest durchzuführen und die Ergebnisse zu vergleichen. Also werde ich in einem neuen Tab öffnen, gehen Sie zu Zeit, die kostenlose Tools kommen, Speed-Test. Und jetzt fahre ich einfach auf unserer Website und beginne dann mit dem Testen. Alles klar, Leute. Also sind die Ergebnisse in. Und wie wir sehen können, gibt es im Moment einen großen Unterschied in den Ergebnissen. Also die vorherigen Ergebnisse, wir sahen in etwa so aus. Wir betrachten eine Ladezeit von 4,2 Sekunden. Jetzt schauen wir uns eine Ladezeit von 2,3 Sekunden an. Das ist fast die Hälfte immer noch zu viel, aber im Moment drastisch anders, wenn wir uns die Gesamtgröße ansehen, es eigentlich 1,1 Megabyte. Das ist ein massiver Unterschied zu 2,7 jetzt, meiner Meinung nach sind 1,1 Megabyte immer noch ein bisschen zu viel, weil ich unter einem Megabyte sein möchte. Was ich also tun werde, ist, diese durch die Kompression zu stellen. Ein paar von ihnen, zum Beispiel. Ich werde das weiter komprimieren, während ich das auch ein wenig weiter komprimiere, während ich vielleicht die Qualität von diesem hier steigere, und dann werde ich einen Test erneut durchführen und sicherstellen, dass ich unter einem Megabyte bin. Okay, aber so optimieren Sie Ihre Bilder. Stellen Sie sicher, dass Ihre Website viel schneller geladen wird, aber es gibt noch mehr Probleme, richtig? Wenn wir also nach unten schauen, können wir sehen, dass wir die Beseitigung der Renderblockierung haben, die als nächstes ist, und wir werden das in der nächsten Vorlesung durchgehen. Also, wenn ich jetzt weiter gehe, um Bilder zu optimieren, wir in der Lage sein, zu sehen, was das Problem ist, denn anscheinend können wir viel Platz beim Diebstahl sparen. Wenn wir so viel sparen, werden wir ganz drastisch auf die Gesamtgröße eingehen. Wie wir sehen können, könnten wir immer noch eine enorme Reduzierung des digitalen Marketings, des Amazon-Logos und des Shopify-Logos haben, richtig? Wir werden uns nicht darum kümmern, weil es sicher ist, so wenig. Aber hier könnten wir tatsächlich über 100 über 200 sparen. Was ich hier sehe, ist, dass es sich um tatsächliche P und G handelt. Richtig? Also was, ich werde voran gehen und tun, bevor wir fortfahren, um Render-Blockierung zu beseitigen, ist, dass ich voran gehen und Ihnen in der nächsten Vorlesung zeigen werde, wie Sie PNG-Bilder zu J Schwein drehen, um ah viel Größe zu sparen und wir werden gehen deutlich unter die ein Megabyte. Okay, wenn Sie also schon wissen, wie das geht und Sie Spaß mit dem Bild von meiner Station haben, können Sie mit dem nächsten Vortrag fortfahren. Aber wenn Sie P und G falsch haben und Sie die Größe noch weiter unten ändern müssen, um darunter zu kommen mir und folgen Sie mir in der nächsten Vorlesung, und wir werden uns um dieses Größenproblem kümmern, Casey, in der nächsten Vortrag, Jungs 4. PNG zu JPG: Alles klar. In diesem Vortrag werden wir weitermachen und unsere PNG-Dateien in J Pig umwandeln. Nun, wenn wir nach unten scrollen, haben wir bei den optimierten Bildern hier bemerkt, dass es eine Menge von Größe gibt, die noch reduziert werden muss. Nun, wir werden nicht in so viel Reduktion verdienen, weil wir nicht die volle Größe von diesen Thumbnails verwenden , richtig? Denken Sie daran, diese Luft im vollen Maßstab, wenn sie hochgeladen werden, aber auf der Art und Weise, wie wir sie für unsere Produkte oder für unsere Kurse verwenden, machen wir sie tatsächlich 300 mal 300. Aber natürlich gibt es noch viel Platz, den wir sparen können. Also werden wir weitermachen und unsere PNG-Dateien, die diese drei Dateien sind, in J Pack umwandeln. Denn in der Regel kann das sogar die Größe etwa die Hälfte machen. Also brauchen wir das an dieser Stelle wirklich, weil wir unter ein Megabyte gehen wollen. Also werde ich voran gehen und auf die PNG zu j Pig Dot com-Site gehen. Das ist in der Ressource ist natürlich, und ich werde auf Dateien hochladen klicken, und dann werde ich meine Datei wählen, die Amazon, die digitale und die Shopify ist . Klicken Sie auf Schuhe und dann werde ich einfach voran und klicken Sie auf Download. Alles OK, also habe ich in der SIP-Datei hinzugefügt und werde einfach doppelt darauf klicken, so würden sie gehen. Und jetzt kann ich die kranke Datei entfernen, und ich werde diese Bilder packen, sie in den gleichen Ordner unten hier unten, werde diesen Ordner entfernen, und ich werde tatsächlich gehen und entfernen Sie diese PNG-Bilder gerade jetzt, weil wir sie nicht brauchen. Hier haben wir unser neues J Schwein. Und wenn du sie zum Beispiel ansiehst, diesen und diesen, werde ich sie einfach öffnen. Sie können sehen, dass es buchstäblich keinen Qualitätsverlust gibt. Das einzige, was mir auffällt, ist, dass es eine Art Unterschied gibt. Wenn man sich das Gold auf dem Chip sehr genau anschaut, scheint es, als ob etwas los ist, wenn ich mich ändere. Das ist ein extremer Minderjähriger, besonders wenn man bedenkt, dass wir das hier 300 mal 300 benutzen werden, damit wir sie nicht brauchen. Wir werden weitermachen und die PNG entfernen, die Amazon und da gehen wir. Sie sind jetzt weg. Ich werde diese noch einmal durch die Kompression setzen, denn mit dem J-Peg-Peg würde bemerken, wenn wir sie noch weitere Erkenntnisse komprimieren, werden wir voran gehen und das jetzt tun . Also werde ich zurück zum Bildkompressor gehen oder Cilla optimieren, wie es auch bekannt als ich liebe diesen Namen. Und ich könnte ich Dateien hier hochladen. Und dann werde ich diese auswählen, die jetzt in J Schwein dort sind. Und dann kann der Shopify man in Ordnung und langwierig wählen. Ich werde nach unten scrollen, und jetzt können wir die Qualität schon ein bisschen senken. Also werde ich es einfach ausprobieren. Vielleicht klicken Sie auf 25. Wir können sehen, dass sie eindeutig ein Qualitätsverlust darstellen. Aber wir müssen uns daran erinnern, 300 mal 300 sein wird, also wird es eine sehr, sehr kleine Änderung geben. Also bin ich ein 25. Sie können sehen, dass das Original auf 52 abgewandt ist, was ein großer Unterschied ist. Ich glaube, die vorherige wird um 100 sitzen, so haben wirklich die Größe gesenkt, indem sie dies in eine J peg und Qualität 25. Nun, wieder, Sie können tatsächlich sehen, dass es eine verlorene Qualität geht. Daran gibt es keinen Zweifel. Aber wir werden das als Thumbnail verwenden, also glaube ich, dass es gut geht. Ich werde tatsächlich diese 25 schnell verwenden und anwenden. Ich werde das Gleiche hier machen. Wir werden es auf 25 bringen, um zu sehen, was passiert. Ja, hier gibt es auch einen Qualitätsverlust. Aber ich werde das anwenden, weil sie so klein sein werden. Dasselbe hier. Klicken Sie auf Anwenden. Und wenn es einfach zu schlimm ist, wenn es nicht klappt, dann zieht er das Original noch einmal und wiederholt den Prozess. Ich werde nicht auf Download alle klicken. Hier ist die Schluck-Datei. Ich werde hier doppelt auf diese Schluck-Datei klicken. Und dann haben wir die Bildkompression, richtig. Ich werde das hier entfernen. Ich ziehe diese raus und stecke sie rein. Lass es uns hier unten hinlegen. Und ich will diese nicht verwechseln, also gebe ich ihnen schnell einen neuen Namen. Alles klar, jetzt haben sie alle einen neuen Namen. Das ist wirklich nett. Ich gehe weiter und gehe zurück auf die Website. Ich gehe hier zu uns nach Hause und klicke auf Bearbeiten mit L. Ein Mentor. Nun sollten Sie auch wissen lassen, dass ich mir die Freiheit genommen habe, die vorherigen Hintergrundbilder zu verwenden und sie tatsächlich ein wenig weiter komprimiert. Ich glaube, dass ich am Anfang 70 oder 75. Jetzt ging ich herunter und komprimierte sie auf 60 und vergleiche immer noch das Original mit der Kompresse, was Sie immer tun können. Es gibt immer noch keinen Qualitätsverlust in irgendjemandem außerhalb der Bilder. Nicht einmal dieser Hintergrund, von dem ich dachte, hätte einen Verlust. Hat es nicht. Das sind also tolle Neuigkeiten. Also gehen wir weiter und ich werde auf diesen hier klicken und dann hier klicken, auf Dateien hochladen, Dateien auswählen. Wird jetzt ein bisschen leichter zu finden sein, weil es einen neuen Namen hat, richtig? Also, jetzt ist dieser hier eigentlich 26 Kilobyte. Das ist super winzig, und wir können sehen, dass komprimiert mit Smarts, was automatisch geschieht. Es wird 25 Kilobyte und wir können den vorherigen sehen. Ich hatte 116 Recht, weil es ein PNG war. Also haben wir eine Menge von Größe gespart, indem wir diese Jungs eine Menge Größe machen. Also werde ich voran gehen und klicken Sie auf Einfügen Medien. Und wie Sie feststellen können, gibt es keinen Qualitätsverlust, weil es so winzig ist. Ich werde das gleiche tun hier, klicken Sie darauf, Datei hochladen, Datei auswählen. Ich werde in den Laden gehen, wenn ich j Schwein komprimiert. Nun, das hier ist 12. Es könnte 11 werden. Nein, es ist immer noch 12 und der vorherige war 82. So großer Unterschied in der Größe, die hier vor sich geht, und ich werde dasselbe mit diesem Amazon machen, das ist der letzte Upload der J Schweinekompresse, die 14 könnte 13 werden, ist wie ein Glücksspiel, weißt du, nur so raten. Nein, es ist immer noch 14. Die vorherige war 75. Riesiger Größenunterschied. Jetzt 14 75. Sie sind keine große Menge, aber diese Art der Verwaltung auf eine Menge von Bildern, die Sie viel Platz sparen wird. Wenn Sie denken, 14 bis 75 auf meine Mathematik ist nicht so beeindruckend. Aber ich denke, dass Sparen, wie viermal oder fünfmal entscheidend, ein großer Unterschied ist. in diesem Sinne. Wie wir sehen können, gibt es keinen tatsächlich sichtbaren Qualitätsverlust, weil sie so klein sind. Ich gehe weiter und klicke auf Updates. Das waren also unsere Ergebnisse, als wir den Test zum ersten Mal gemacht haben. Dann haben wir den Test erneut gemacht. Wir hatten 1,1 Megabyte. Jetzt machen wir den Test noch einmal und vergleichen ihn mit dem letzten, wenn wir das P und G T J Schwein optimiert haben . Ich gehe zur Zeit, klicke auf kostenlose Tools, klicke auf kostenlose Tools, gehe zum Speed-Test, und ich werde auf unserer Website schreiben dann mit dem Testen beginnen. Und denken Sie daran, wir schauen uns diese Größe gerade jetzt an und schauen Sie sich das an. Leute, wirklich, wirklich gute Nachrichten. Diese Größe ist absolut unglaublich. So haben wir jetzt auf 465 Kilobyte gesunken, während wir vorher tatsächlich bei 1,1 Megabyte waren . So hatten wir schließlich eine große Reduktion, vom Drehen von P und G auf J peg, sogar mit der Kompression und alles, was los ist. Das hat uns also viel Platz gespart, und wir haben jetzt unsere gesamte Titelseite optimiert und schauen uns die Ladegeschwindigkeit an, die tatsächlich die Ladung in einer Sekunde war. Das ist halb von der Zwei-Sekunden-Regel. Nun, es gibt noch eine Menge Gutes zu tun. Zum Beispiel wollen wir immer noch das Renderblockieren JavaScript beseitigen, was wir in der nächsten Vorlesung tun werden. Aber selbst wenn wir Onley das jetzt gemacht haben, hatten wir eine Ladegeschwindigkeit von einer Sekunde und eine Gesamtfläche von unter 0,5 Megabyte. Dann wäre das unglaublich. Noch einmal, Pat voll ansieht und er ist größer. Aber es gibt auch mehr Sachen auf seiner Website. Aber das ist jenseits des Unglaublichen. Also, obwohl er eine größere Größe hat, wird immer noch schneller geladen und das ist, weil er s weniger Anfrage und er hat sich gut um seine Website gekümmert und wir tun das gleiche. Also werden wir unsere Website weiter optimieren und weiter optimieren. Aber wir haben es geschafft, die Gesamtgröße zu reduzieren, indem wir unsere Bilder optimieren und indem wir uns jetzt Ihre eigenen ansehen , könnten Sie immer noch dieses haben. Words hat Bilder optimiert, da es noch etwas Arbeit gibt. wir möchten, dass Sie zum Beispiel fertig sind, haben wir immer noch das Logo, das wir komprimieren können. Interessanterweise sagt es immer noch, dass wir etwas Platz auf diesen Bildern direkt auf den Bildern der Menschen sparen könnten , obwohl es so klein ist , heißt es, wir könnten Platz auf dem digitalen die Amazon und auf der Shopify, und das kann wahr sein. Wir könnten es wahrscheinlich immer weiter und weiter komprimieren. Aber ehrlich gesagt, das ist eine wirklich, wirklich gute Größe. Wie ich Ihnen vorhin gesagt habe, wenn Sie es 0,5 Megabyte bekommen könnten, wird das unglaublich sein. Dies könnte schwer zu halten sein, wenn Sie weiter erweitern und fügen Sie weitere Dinge Ihrer Homepage, aber es ist immer noch eine wirklich, wirklich gute Größe. Sie wollen unter einem Megabyte sein. Wenn Sie nach Syrien 10,5 Megabyte gehen können, ist das unglaublich, und Sie wollen auch nicht verrückt werden. Denken Sie daran, es geht um die Balance zwischen der Benutzeroberfläche und der Nutzung von Erfahrung, und ich denke, jetzt haben wir sie mehr als genug komprimiert, und ich bin super glücklich. Also zwei Dinge, um sich an eins zu erinnern. Drehen Sie Ihre P- und G's auf J-Pick und komprimieren Sie sie alle. Wenn Sie zerschlagen haben, wird dies leicht zerschlagen die Premium-Version, das heißt. Aber wenn Sie es nicht tun, können Sie genauso gut die Werkzeuge verwenden. Und die Ressource braucht nur ein wenig mehr Zeit, aber es ist völlig kostenlos. Also lasst uns weitermachen. Installieren Sie das nächste Problem, siehe in der nächsten Vorlesung Jungs. 5. Eliminieren von Rendering mit JavaScript und CSS: Na gut, Leute. In diesem Vortrag gehen wir weiter und gehen auf die nächste Ausgabe, die wir mit unserer Website haben, um sie besser zu machen und schneller zu laden. Nun, das nächste, was für uns zu seiner unter der Performance-Registerkarte zu bewegen, und es ist diese und es sagt beseitigen Renderblockierung JavaScript und CSS in über Standard-Inhalt. Okay, also lasst uns das zusammenbrechen. Wasser dieses jetzt JavaScript ist ein Computer. Sprache ist die Sprache, die der Computer und der Webbrowser versteht. Und JavaScript ist im Grunde das, was die vielen aus den Auswirkungen auf unserer Website ausführt, dass diese unterzeichnen unsere Website, richtig? Siehst du, Assessor, der Coach, den wir benutzt haben, um verschiedene Änderungen auf einer Website vorzunehmen, als ob wir einen bestimmten Code für unser Poet-Formular benutzt haben . Wir haben einen Code für ein klebriges Menü verwendet, etcetera diese r C s Codes, die Codes sind. Jetzt. Das Problem dabei ist, dass sie blockiert werden. Also, was macht mich blockieren? Es bedeutet, dass diese ausgeführt werden müssen, bevor die Website richtig geladen werden kann, oder? Und sie nehmen sich Zeit für die Hinrichtung. Und weil es eine Weile dauert, erhöht es die Ladegeschwindigkeit. Was wir also tun möchten, ist das Rendern zu beseitigen, das JavaScript und CSS über dem Fold Inhalt blockiert . Und der Grund, warum wir es nur über den vollständigen Inhalt beseitigen wollen, ist, weil, wenn Sie eine Website laden, nicht wirklich wichtig ist, wie lange es dauert, bis all dies geladen wird oder irgendetwas davon, weil das einzige, was Sie auf Ihrer Website oder auf Ihr Handy, wenn Sie die Website dort auf Ihrem Bildschirm laden, wird die oben der vollständige Inhalt sein. Also alles, was Sie hier so schnell wie möglich laden möchten. Also lassen Sie uns voran gehen und beseitigen diese JavaScript ist und diejenigen sehen Einschätzungen. Also, was wir tun werden, ist zu unserem Dashboard zu gehen, weil wir Plug Ins dafür verwenden , und dann werden wir weiter testen, um sicherzustellen, dass wir die Antworten bekommen, die wir wollen. Jetzt gehen wir nach unten, um Plug Ins und klicken Sie auf Hinzufügen neuer Plug in, und wir werden nach Auto-Team-Mäusen suchen. Es klingt irgendwie wie aus zu optimieren, aber es hat nur ein einzelnes Oh, also ist es gehofft, Auto optimieren Art von einem Bissen. Also hier ist es. Es hat über 900.000 aktive Installationen, und es wird uns helfen mit dem JavaScript und CSS. Also werden wir weitermachen und es installieren, und dann klicke ich auf Aktivieren. Und jetzt werden wir zu den Einstellungen übergehen. Und hier fangen wir an, die verschiedenen Funktionen zu aktivieren. So sind wir auch in der Lage, die HTML zu optimieren, obwohl wir keine Probleme mit der Optimierung Stationen haben , General Versuch, gut zu sein. So können Sie selbst entscheiden, ob Sie dies aktivieren möchten oder nicht. Jetzt haben wir die JavaScript-Optionen und die CIA sagt Optionen. Also werde ich voran gehen und diesen einklicken, und ich werde voran gehen und diesen auch anklicken, damit sie optimiert werden. Dann klicke ich auf Änderungen speichern. Nun, wenn wir zurückschauen und wir uns unsere Testergebnisse genau hier ansehen und ich hier unten klicke, können wir sehen, dass es vier JavaScript, ihre Buchung und 18 CSS gibt . Ressource ist jetzt, weil es so viele Jahreszeiten gibt. Ressource ist die automatisch optimierte im Allgemeinen nicht genug allein, um sich um alle von ihnen zu kümmern . Also was? Ich werde weitermachen und es auch tun. Es ist wieder zu bewegen, um Plug Ins und klicken Sie auf Add new. Und jetzt werde ich wieder nach Auto-Themenaugen suchen. Ich meine, ich dieses Wort, es ist wirklich schwer zu sagen. Und jetzt werde ich ihr älteres Plugging namens kritisches CSS verwenden. Nun, was dies tun wird, ist kümmern sich um noch mehr CSS und noch genauer das oben genannte Fold CSS. Also gehe ich voran und klicke auf Jetzt installieren und dann klicke ich auf „Perfect aktivieren . Es ist installiert. Nun, um es zu erreichen, müssen wir nur zu Auto gehen, hier zu optimieren und wieder auf Einstellungen klicken, denn es ist dieselbe Firma, die es getan hat , wird hinzugefügt werden. Sie können hier sehen, es sagt kritisches CSS. Aber es wird auch in der Hauptsache hinzugefügt werden, und hier haben wir die Hauptmerkmale. Also jetzt sind wir hier drin und wir haben das kritische CSS hinzugefügt und es wird in der Hauptsache hinzugefügt werden. Wenn Sie diese Änderungen nicht sehen, müssen Sie nur auf die Schaltfläche Aktualisieren klicken und es wird sich selbst lösen. Nun, es gibt eine Sache, die speziell hier tun will, und das ist, nach unten zu scrollen. Und wir werden sehen, dass hier etwas ist. Dies ist in der Zeile über dem Fold CSS, während das Laden von Haupt zu meinem C sagt Onley nach dem Laden der Seite . Also wollen wir, speziell das obige, den Inhalt, um ihr CSS optimiert zu haben und die Art und Weise, wie viele Plug Ins dies tun, obwohl dies ein bisschen zusätzliche Informationen ist, ist, obwohl dies ein bisschen zusätzliche Informationen ist, ist,dass sie es vorziehen, das CSS in die Fußzeile. Und wir wissen, dass das Foto den ganzen Weg runter ist, oder? Das bedeutet, dass es später geladen wird. Aber es spielt keine Rolle, denn was wichtig ist, ist, dass die oben der Faltabschnitt so schnell wie möglich geladen wird, weil die zweite, die senkt, Ihre Website wird verfügbar und Besucher können anfangen, zu verwenden, und das wird dauern ein paar Sekunden, und bis dahin wird der Rest der Website bereits geladen und funktioniert haben. Also was? Ich werde voran gehen und tatsächlichhier tun, tatsächlich um das CSS von oben aus der Falte zu bekommen. Es wird eine Website namens Side Low City verwendet. Und ich werde das setzen Natürlich, in der Ressource ist, so dass Sie es einfach einfach greifen können. Jetzt müssen wir hier nur richtig machen, unsere Website so. Und dann klicken Sie auf kritischen Pfad generieren. Siehe bewertet. Und das wird uns allen ein für über die Falte CSS geben. Das ist Gold. Ehrlich gesagt, und jetzt scrollen wir einfach nach unten und wir werden alles hier drin haben. Du musst nur auf das hier klicken. Alles wird sich selbst auswählen, oder? Klicken Sie, und ich werde damit fertig werden. Okay, jetzt gehe ich zurück zu Auto Optimize hier, und ich werde es einfügen. Da gehen wir. Und jetzt werde ich den ganzen Weg nach unten scrollen und auf Änderungen speichern klicken. Die Einstellungen wurden gespeichert. Also, was willst du jetzt tun? Nun, natürlich wollen wir einen neuen Test durchführen, um sicherzustellen, dass er richtig geladen wird und dass wir weniger Anfragen haben und wir sehen können, dass diese Probleme verschwinden. Ich schreibe hier auf unserer Website und klicke dann auf Start Testing Und wie wir sehen können , gibt es eine Menge wirklich netter Verbesserungen. Sieh dir das an. Wir bitten um den 31. Sehen wir jetzt den vorherigen? Der vorherige hatte 60 Anfragen, und jetzt hat dieser 31. Jetzt wird die Gesamtgröße sehen ist auch nach unten gegangen, aber ich habe bemerkt, dass dies etwas andere Größen lädt. Was wichtig zu wissen ist, ist, dass es unter einem Megabyte ist, richtig, und es ist ziemlich weit unter einem Megabyte und die Ladegeschwindigkeit hat sich verbessert, was erstaunlich ist, und es wird geladen von London UK. Unglaubliche, absolut unglaubliche Statistiken. Im Moment ist unsere Leistung großartig von 56 auf 63. Aber am wichtigsten, gehen wir runter und schauen uns das an. Wir können sehen, dass das einzige Problem im Moment ist, dass wir ein blockierendes JavaScript haben und das ist der G-Chor. Es dot gs, und eigentlich ist dieser in der Regel die Themen JavaScript. Das Thema möchte also selbst laden, bevor wir die Website tatsächlich ausführen und zeigen, und es gibt Wege, dies zu umgehen. Aber ehrlich gesagt, meiner Erfahrung ist das kein Problem. Wenn Sie ein Thema haben, das dieses JavaScript wirklich verwenden und es nicht verschieben möchte. Wir können das hier benutzen. Also werde ich das verlassen, und ich bin wirklich super zufrieden mit diesen Statistiken. Nun, Leute, wenn Sie diese Plug Ins installiert haben und Sie immer noch Javascript haben, die hier Problem sind, gibt es noch eine Sache, die Sie tun können. Jetzt. Wenn Sie dieses Problem nicht haben, können Sie mit der nächsten Vorlesung fortfahren. Aber wenn du das tust, bleib hier und ich zeige es dir. Also werden wir hier wieder reingehen und wieder einen Stecker einbauen . Ich meine, wenn es ein Problem gibt, gibt es ein Bloggen, oder? Also klicken wir auf „Neu hinzufügen“, und jetzt suchen wir nach einer Spüle. JavaScript. Und los geht's. Und wir werden auf installieren klicken. Jetzt. Wir brauchen das eigentlich nicht. Das ist für Demonstrationszwecke, richtig? Und dann werde ich auf aktivieren klicken, und dann werden wir zu den Einstellungen übergehen, und dann müssen Sie nur weiter gehen und auf Javascript aktivieren klicken und dann nach unten scrollen und Einstellungen speichern. Okay, Okay, bevor wir weitermachen, gibt es ein paar Dinge, die ich dir zeigen möchte. Es gibt zwei verschiedene Möglichkeiten, das Renn-JavaScript zu verwenden. Entweder Sie haben eine Senke in die Warteschlange gestellt oder Sie könnten das JavaScript und die Unterschiede mit dem Gehäuse verschieben , das es dem JavaScript ermöglichen wird, sobald sie geladen wurden. Mit anderen Worten, wenn etwas auf Ihrer Website geladen wird, Sie einfach zulassen, dass auf dem Bildschirm angezeigt wird, bevor alles andere richtig gemacht wird? Das Problem dabei ist, dass, wenn die falschen Dinge Luft zu schnell laden, Ihr Thema bricht. Sie werden sehen, wie diese wirklich hässliche Version von Ihrer Website für etwa eine halbe Sekunde, und dann werden alle Effekte unter der Wissenschaft und alles angewendet. Und das ist keine tolle Sache. Also für einige Leute und einige Themen und Websites, die A denken, es wird nicht funktionieren. Nun, das ist, wenn Sie verwenden können, um zu verschieben und die Verzögerung, die bedeutet, dass Sie alle von diesen Ladungen zusammen sammeln werden . Und wenn alle der wichtigsten für das tolle Aussehen fertig sind, dann werden sie ausgeführt. Sie erhalten diesen größeren Blick auf Ihre Website jetzt. Das Problem dabei ist, dass das manchmal ein bisschen langsamer ist, aber Sie wollen nie Ihr Thema beim Laden brechen. Woher wissen Sie also, welche Sie eigentlich so einfach verwenden sollen, eigentlich so einfach verwenden sollen, denn wir haben dies bereits Zeit, um die Tests zuerst zu machen, damit wir diese hier überprüfen können und alles, was Sie wirklich tun müssen, ist voran zu gehen und einen privaten Tab zu schnappen und zu schütteln aus Ihrer Website. Gehen Sie zu Ihrer Website. Wenn die A-Senke nicht funktioniert, dann gehen Sie mit dem unterscheiden. Tu einfach, was funktioniert, richtig. Sie werden sehen, ob Ihre Website, wenn Ihr Thema bricht. Wenn ja, funktioniert es nicht richtig. Also, Leute, das ist es. So lösen wir das Problem vom Renderblockieren JavaScript und CIA sagt oben den Faltinhalt. So wird unsere Website immer besser, schneller und schneller. Gehen wir zur nächsten Vorlesung, okay? Und wenn Sie irgendwelche Fragen von Kurs haben, und, wie immer, wird in der Q und A C in der nächsten Vorlesung 6. Reduce reduzieren: Na gut, Leute, Willkommen zurück, wir sind schon ziemlich weit gekommen. Inzwischen haben wir uns die Zeit genommen, alle unsere Bilder zu optimieren, um die große Größe zu sparen. Wir haben auch weitergemacht und unsere Renderblockierung JavaScript und CSS für die oben genannten Faltinhalte eliminiert . Nun, nächstes, wie Sie sehen können, reduziert es die Reaktionszeit des Servers. Nun, diese Air Putin höher Kim. Das heißt, sie wollen das oben, weiter nach links. Das ist derjenige mit der größten Priorität. Das größte Problem, wenn Sie so wollen. Derzeit haben wir keine sehr gute Server-Reaktionszeit. Wenn wir darauf klicken, können wir sehen, dass es bei 0,78 ist. Und natürlich wird das auch davon abhängen, wo Sie es gerade versuchen. Wir versuchen es aus London, und wenn wir zurückgehen und den früheren ausprobiert haben, und wir überprüfen, dass dies unser allererster Test ist , seitdem viel passiert. Wir können sehen, dass es bis zu 1,1 Sekunden dauerte. Nun, das ist eine lange Zeit zu warten, um sogar Ihren Server in Gang zu bringen, oder besser gesagt, oder besser gesagt,eine Antwort vom Server zu haben. Lassen Sie uns also genauer darauf eingehen, was das eigentlich bedeutet, was wir dagegen tun können. Also lasst uns anfangen. Warum sagen Sie Server-Reaktionszeit? Nun, um zu wissen, was es ist, müssen wir wissen, wie. Was? Es wird jetzt gemessen, es ist Server-Antwort. Die Zeit wird durch etwas, das titi FB genannt wird, gemessen. Zeit, zuerst zu beißen, oder? Also, wenn Ihr Benutzer auf Ihre Website kommt, wird es messen, wie lange es dauert, bis er seinen ersten Biss erhält. Die erste Information, genau dann wissen Sie, es geht von Kilobyte, Megabyte , Gigabyte etc. Also, wenn sie ihren ersten Biss erhielten, das ist, wenn der Server erwogen hat, eine Antwort zu geben. Und für uns, Moment sind es 0,8 Sekunden und wir hatten bis 1.1 2., bevor der Benutzer überhaupt eine Antwort bekommt , um etwas herunterladen zu können. Und das ist eine lange Zeit, Leute. Lassen Sie uns also durchgehen, warum das ist und was wir dagegen tun können. Also die häufigste Ausgabe, wenn wir auf die einfachste Weise sehen, es zu lösen, ist, einen Blick auf den Host-Server. Ressource ist richtig, also wird ein Host mehrere verschiedene Server haben, von wo aus Sie all das Zeug von Ihrer Website auf. Und je mehr Platz Sie auf diesem Server haben, desto mehr können Sie beispielsweise anspruchsvolle Plug-Ins verwenden beispielsweise . Hinzufügen von Mawr aus Ihren Gegenständen, etc., und das wird diktieren, wie lange die Reaktionszeit ist. Jetzt benutzen wir Blue Host, richtig? Und wenn wir einen Blick auf ihre Website werfen, können wir sehen, dass ein Paar, das zu Hosting geht, drei verschiedene Abschnitte sind los jetzt. Wir verwenden jetzt Shared Hosting, und ich werde den Unterschied zwischen diesen drei erklären und warum sie wichtig sind. Und ich werde auf eine Weise erklären, die ich gelernt habe, und ich denke, es ist wirklich, wirklich überreichend. So Shared Hosting ist im Grunde wie mit auf Wohnung gerade jetzt. Je mehr Menschen in der Wohnung sind, desto weniger Platz bekommen Sie, weil Sie alle denselben Raum teilen. Shared Hosting ist die gleiche Weise. Also haben Sie im Grunde einen Server und sie werden nur ein paar Leute in diesen Server stecken und weniger Leute. Es gibt die mehr Raum Geschichten für Sie und Ihre Website. Je mehr Leute es gibt, desto weniger Gebäck für Sie und desto langsamer wird die Reaktionszeit sein, und dann haben wir die VPs. VP ist wie in einem Wohnheim zu leben. Du wirst dein eigenes Zimmer haben, deinen eigenen Raum, und es liegt an dir, wie sehr du dich entscheidest, diesen Raum zu nutzen. Aber du wirst immer eine gewisse Menge an Speicherplatz zur Verfügung haben. Nun, das ist sehr ähnlich mit VPs, weil Sie einen Server haben, und Sie werden eine bestimmte Menge an CPU, eine bestimmte Menge RAM, und es wird an Ihnen sein, wie viel es verwendet wird. Dann wird es ein Limit geben, aber du bist nicht darauf angewiesen, dass jemand anderes es benutzt. Es spielt also keine Rolle, wie viele Leute tatsächlich im Haus sind, denn Sie haben noch Ihren eigenen Platz. Und schließlich haben wir das dedizierte Hosting, und das ist im Grunde, wie das ganze Haus selbst zu besitzen, oder? Es ist alles, was du. Es gibt niemanden sonst, dass man den ganzen Platz bekommt, man bekommt die ganze Verfügbarkeit für sich selbst. Aber wie Sie sich vorstellen können, das ist es, was jedenfalls, es gibt Hypotheken. Es gibt Miete, etcetera usw., und ähnlich, und ähnlich, wenn Sie den gesamten Server besitzen, wird es mehr Kosten geben, also gibt es einen höheren Speicher für wie viel diese drei Kosten und Shared Hosting natürlich die billigste, weil Sie alle teilen VPs sind teurer und dediziertes Hosting ist das bei weitem teuerste. Jetzt sind diese in der Regel nur benötigt die VPs und widmen er, wenn Sie viel Verkehr los und dediziert haben, ist es meistens, wenn Sie eine extreme Menge an Verkehr los haben. Stellen Sie sich diese riesige E-Commerce-Website vor. Möglicherweise benötigen sie das dedizierte Hosting. Und auch, wenn wir auf das Shared Hosting gehen, die wir jetzt haben, können wir sehen, dass es Upgrades gibt. Jetzt, selbst mit dem Pro-Upgrade, bekommen wir eine hohe Leistung los, was bedeutet, wenn wir hier drüben haben, heißt es niedrigere Dienerdichte. So hat Ihre Website mehr Ressourcen zur Verfügung, und das ist wirklich, worum es geht. Die verfügbare Ressource ist für Sie und Ihre Website, die die Servergeschwindigkeit diktiert. Okay, das ist das, was Madison am meisten, wenn es um Ihre Server-Reaktionszeit geht. Aber natürlich sind wir nicht nur auf die Pferde beschränkt, viele Dinge, die wir durchmachen können, sondern lassen Sie mich durch und gehen tiefer hinein, warum das ist und was wir jetzt dagegen tun können. Der Grund dafür ist, dass Blue Host ein Teil von etwas ist, das die E. I G. Endurance International Group genannt wird I G. . Und im Grunde ist das eine große, große, große Firma, die eine Menge Hosting-Unternehmen wie Host Gator, etc. besitzt , . Sie haben einen Blick auf ihre, Wikipedia sagte. Sie können sehen, dass sie besitzen. Ich denke, es war gerade wie 83 verschiedene Hosting-Unternehmen, und das ist riesig. Aber es bedeutet auch, dass es, ah, viele Leute gibt ah, , die in ziemlich kleine Server gepackt werden, was sie tun. Aber wir müssen wissen, dass es große Vorteile für Blue Host gibt. Ich werde Ihnen zeigen, wie Sie die blauen Host-Server weiter mit dem optimieren, was wir haben, und dann werden Sie sehen, was die anderen Vorteile von Blue Hosts jetzt sind. Ich liebe Blue Host haben Blue House für eine Weile verwendet, sogar Pat Flynn, die wir bisher nachahmt habe ich gelernt von Er ist mit blauen Host und das ist, weil sie so viele weitere Vorteile haben. Nicht alles über die Speed Jungs. Also die andere Sache, wir können auch voran gehen und tun, was wir bereits getan haben, ist optimierte Stationen wie die Fixierung unserer Fänge. Das heißt, wir stecken all unsere Sachen in den Fang. Und dann setzen Sie es auf den Computer des Benutzers, so dass sie nicht herunterladen müssen, zum Beispiel sind Header sind Bilder sind Bottoms oder entscheidet etcetera. Jedes Mal wird eher auf ihrem Computer sein, so dass die Ladegeschwindigkeit erhöht wird. Auch machen die Bilder kleinere Kompressionen, usw.. Nur machen Sie Ihre Website leichter. Ok. Aber vielleicht ist das Größte und Wichtigste, was wir tun können, um die Reaktionszeit unseres Servers zu beschleunigen , unser Server näher an den Yusor zu bringen. Und wir werden das durch etwas tun, das CD- und Content-Delivery Network genannt wird. Nun, für das Content-Delivery Network, wissen Sie vielleicht bereits darüber, aber sie sind auch so wichtig. Und es gibt drei große, von denen ich möchte, dass Sie wissen. Nun, wenn Sie Blue Host verwenden, wie wir sind, werden Sie etwas namens Website sieht CDN bereits verfügbar für Sie in den blauen Host-Panels . Ich werde Ihnen zeigen, wie Sie aktivieren, was auf SSL ist Wie funktioniert die Zelle, etc. in der nächsten Vorlesung. Aber es gibt eine Sache, die Sie wollten Ihnen zeigen, wie Sie jetzt vielleicht die größte aktivieren , wenn es um eine kostenlose CD geht M ist Cloudflare. Bei der bevorstehenden Wahl werde ich Ihnen zeigen, wie Sie Cloudflare auch nutzen können. Wenn Sie diesen Dienst verwenden möchten, den Sie wahrscheinlich wollen, und ich werde erklären, warum in ein wenig und dann endlich haben wir Max Cdn, der vielleicht die beliebteste cdn aus der Mall Fähigkeit sein könnte. Sie haben die meisten dedizierten Server, aber sie kosten auch. Aber ich möchte, dass Sie wissen, wenn Sie planen, Geld dafür auszugeben, empfehle ich Max Cdn. indem wir Mit anderen Worten, diese verschiedenen Content-Delivery-Netzwerke haben, werden wir unsere Website auf verschiedenen Servern auf der ganzen Welt platzieren. Wenn Sie also jemanden haben, der aus einem bestimmten Teil Asiens stammt, zum Beispiel auf Ihre Website geht, dann werden sie Ihre Website von diesem asiatischen Server laden, der so viel schneller sein wird, als sie von zu laden. Zum Beispiel, Utah, glaube ich, blaue Gastgeberin in Utah in Amerika. Und so werden wir unsere Website beschleunigen, indem wir all diese verschiedenen Server verwenden . Es versteht sich also von selbst, dass je dedizierter Service sie sind, je höher die Content-Delivery-Netzwerke sind, desto besser ist es in der Regel. Cloudflare hat bei weitem die meisten, wenn es um ein freies CDN geht, und Max Cdn hat bei weitem die meisten, die ich glaube, gerade und Ende der Geschichte. Aber sie kosten auch. Also werden wir das in den kommenden Vorträgen einrichten, und das wird unsere Server-Reaktionszeit erheblich verbessern. Jetzt gibt es noch eine Sache, die wir weitermachen und überprüfen, dass es so wichtig ist und oft übersehen wird. Und das ist unser Zuhause und unsere Seite. Du bist ich und was ich damit meine, ist es, wie wir es rausfahren. Also, zum Beispiel, wir könnten unsere http haben und dann haben wir den Doppelpunkt Schrägstrich vorwärts Schrägstrich Robin und Jesper dot com. Aber wenn wir auf SSL verwenden, was wir werden, weil es so wichtig für S CEO und auch für die Sicherheit ist, wird es so aussehen, als würde das aussehen wie https Colin Forward Slash Forward Slash Robin und Jesper dot com. Aber das bedeutet auch, dass, wenn jemand auf die normale HTTP-Seite geht, er zuerst auf die H T. Ps Website umgeleitet werden muss T. . Richtig? Und diese Umleitung wird uns wertvolle Server-Reaktionszeit kosten, und das wollen wir nicht. Also, wenn wir ihre Website ausreiten und sie ins Internet stellen, müssen wir sicherstellen, dass wir das richtige u R l herausgeben . Und was 80 DP ist ein 82 P s, auf die wir in der nächsten Vorlesung mehr eingehen werden. Aber https, ich kann sagen, ich kann ein wenig darüber reden, weil es um die Sicherheit von Ihrer Website geht . Sie brauchen diese Sicherheit für einen CEO aus offensichtlichen Sicherheitsgründen, und es steht für die S eigentlich für Sicherheit und kommen aus dem SSL Mehr darüber in der kommenden Vorlesung. Aber wir haben auch mehr Dinge wie Wenn Sie w w w dot Robyn und jesper dot com verwenden, oder es wird www dot Ihre Website dot com, Aber Sie haben tatsächlich Ihre Website einfach nur robin und jesper dot com eingestellt. Es ist das Gleiche hier. Das bedeutet, dass, wenn jemand mit der doppelten Nutzung auf Ihre Website geht, zuerst auf die u. R L ohne die W geleitet werden muss und dass es auch eine Server-Reaktionszeit kostet. Um dies zu reduzieren, was wir tun müssen, ist sicherzustellen, dass wir die richtige geben Ihre l. Zum Beispiel, wenn wir von unserem Facebook verlinken, wenn wir unsere Inhalte oder verschiedene Websites verlinken, etcetera, und stellen Sie sicher, dass wir mit der richtigen Ihr anderes Ranking sind, und wir werden durch, wie dies in der kommenden Vorlesung zu tun. In der nächsten Vorlesung werde ich Ihnen zeigen, wie Sie das https bekommen, was Sie wahrscheinlich schon haben. Aber wenn Ihnen nichts zeigen wird, wie Sie es bekommen und auch, wie Sie diese Seite aktivieren, schauen Sie, C d m. Siehst du, in der nächsten Vorlesung, Jungs, 7. SSL SiteLock CDN: In Ordnung. Willkommen zurück in dieser Vorlesung, wir gehen weiter und stellen sicher, dass Sie Ihr SSL aktiviert haben und auch, wie Sie deaktivieren, wenn Sie das wollen. Und auch, ich werde Ihnen zeigen, wie Sie diese Website aktivieren. Sieh mal, CDN. Wenn Sie nicht Blue Hosts als Gastgeber verwenden,können Sie diesen Vortrag überspringen und zum nächsten gehen, weil dies Onleyfür die blauen Hostbenutzer gelten wird. Wenn Sie nicht Blue Hosts als Gastgeber verwenden, können Sie diesen Vortrag überspringen und zum nächsten gehen, weil dies Onley Okay, also überspringen Sie zum nächsten, wir werden SSL und CD und mehr in die Tiefe gehen und dann eine alternative Lösung finden. Also beginnen wir mit E bei Blue Host, die hier kommen, und dann klicken wir auf ein Login, weil wir gehen und überprüfen, um die S S S L zu sehen Also hier sind wir. Und jetzt gehen wir zum Marktplatz, und dann klicken wir auf Adams und unten hier unten sehen Sie etwas, das SSL-Zertifikate genannt wird. Nun, wenn ich hier klicke, werde ich auf diese Seite zu bekommen und Sie können sehen, dass es sagt, auch SSL ist auf. Das bedeutet, dass wir unser SSL wieder aktiviert haben. Wenn Sie immer noch mit SSL verwechselt sind, machen Sie sich keine Sorgen. Wir werden mehr darüber in der nächsten Vorlesung sprechen, aber wissen, dass es super wichtig ist für den Verkauf von Sicherheitsmaßnahmen und im Grunde zu rangieren und sicher zu sein. Also weiß ich, dass das an ist. Und das sollte auch bedeuten, dass wenn ich zu Robin gehe und Jesper Dot komme, ich diesen kleinen Pad-Look hier los bekommen werde und ob und das bedeutet auch, dass ich gesichert bin , weil das Vorhängeschloss die Zelle ist, die ich auf Http seine Websites habe. Wenn ich hier klicke, können Sie sehen, dass es h T T P s sagt. Nun, wenn ich das nicht hätte, würde es entweder einfach sagen, http oder es könnte einfach so aussehen und es gäbe kein Vorhängeschloss. Lassen Sie mich Ihnen ein Beispiel zeigen. Nun, es gibt hier eine Website namens „White Trainer“. Wenn ich reingehe, ist das erste, was Sie bemerken werden, dass es keinen Pad-Look gibt. Und wenn ich auf Kind klicke, gibt es keine http s. Sie verwenden also kein SSL-Zertifikat, was bedeutet, dass es nicht sicher sein wird und es nicht richtig rangieren wird, wie es könnte. Wir werden diese in der nächsten Vorlesung näher eingehen und Ihnen zeigen, warum und wie es funktioniert. Also, das ist für die S s L. Nun lassen Sie mich zeigen, dass Sie auch helfen, die Website zu aktivieren. Schauen Sie, sehen Sie sie, denn das ist eine der wunderbaren Funktionen, die mit Blue Host First kommt, würde das kostenlose SSL bekommen, was genial ist. Es ist wirklich, wirklich gut. Und wir bekommen auch ein kostenloses CDN. Was wir also tun wollen, ist eigentlich bei unseren Heimatrechten zu sein. Und dann gehen wir weiter und gehen zum Armaturenbrett. Und jetzt werden wir zu Blue Host ziehen und wir werden auf Performance klicken. Und dann werden wir jetzt zu C. D. M.ziehen D. M. . Da ich schon mal damit herumgespielt habe, steht es, dass wir dein CDN einrichten. Das ist nicht wahr. Ich habe es tatsächlich deaktiviert. Aber für Sie, es wird tatsächlich sagen, in unserer Affäre gehandelt, aktiviert, deaktiviert Dinge, die an- und ausgeschaltet bleiben. Aber das ist super wichtig für Sie zu wissen. Es sei denn, Sie haben tatsächlich auf SSL gekauft, können Sie dies nicht aktivieren und der Grund dafür ist, dass das SSL, das wir hier haben, das kostenlose SSL Onley wird für Ihre Website über Blue Host funktionieren. Okay, also, weil wir den blauen Host-Server verwenden, können wir auf SSL-Zertifikat verwenden. Aber wenn wir ein CDN verwenden, bedeutet das, dass wir die Server eines anderen benutzen werden. Und wenn wir die Server eines anderen nutzen, verwenden wir keine blauen Host-Server mehr. Und wenn wir keine blauen Host-Server mehr verwenden, erhalten wir nicht das kostenlose SSL-Zertifikat. Okay, das heißt, wenn du das anklickst, wirst du gegen SL verlieren. Ihr werdet nicht mehr https sein und das ist es nicht wert, Leute. Aber das ist perfekt. Wenn Sie bereits vorher im Spiel waren und bereits ein aktives SSL haben, dann können Sie weitermachen. Sie können dies aktivieren, da die Website cdn aussieht. Es ist eigentlich sehr mächtig und sehr sicher. Aber für den Rest von uns Sterblichen, die immer noch dieses kostenlose SSL benutzen , werden wir diese Seite nicht aktivieren. Hören Sie, Cdn, was wir machen werden, ist tatsächlich ein anderes CDN, das Cloudflare heißt jetzt ist die Cloudflare Cdn erstaunlich, weil mit ihnen man begleitet hat CD Ins auf der ganzen Welt. Sie sind frei, für immer frei. Es wird ein kostenloser ewiger Plan genannt, was bedeutet, dass sie frei sind und sie werden frei bleiben. Und auch, erstaunlich genug, werden sie uns auch ein kostenloses SSL geben. Das wird also unser Problem lösen, denn nun, nun, wir bekommen auch das Ende von Cloudflare zu sehen. Und weil das ein kostenloses SSL ist, müssen wir die Cloudflare Server verwenden und weil für die Verwendung ihrer CD und wir werden ihre Server verwenden, hoffe ich, das macht Sinn, Leute. Aber was ich versuche zu sagen ist, dass die Cloud für all das lösen wird, wird uns das SSL geben und es wird uns auch die C. D. M.geben D. M. Aber bevor wir weitermachen, wie das zu tun, ich eigentlich mehr in SSL eingehen und das Ende sehen wollen, warum sie so groß sind, ihre Schuld und dann lassen Sie uns weitergehen, um dies einzurichten. Es kostet Jungs, das ist es machen oder brechen Sie in das Verständnis der Wert Ihrer Website und Sicherheit, wie es funktioniert und wie Sie Ihre Kunden schützen, um in der nächsten Vorlesung zu sehen 8. SSL CDN: Willkommen zurück, Leute. In diesem Vortrag werden wir über SSL sprechen Was es ist, wofür wir es verwenden, wie es funktioniert. Auch über Cdn und weites SSL. CD und Comp Fähigkeit ist jetzt so wichtig. Erstens Was ist SSL und was macht es so wichtig, dass die Leute bereit sind, dafür zu bezahlen? Nun, lassen Sie uns damit beginnen, zu definieren, was SSL jetzt bedeutet. SSL bedeutet Secure Sockets Layer und im Grunde ist das ein schicker Name, um zu sagen, dass es ein Sicherheitsschutz zwischen dem Client und dem Server ist. Richtig? Es wird den Client und die Serverübertragungen schützen. Nun, der beste Weg, das wirklich ausführlich zu erklären, ist, Ihnen tatsächlich zu zeigen, was ich meine. Sagen wir also, dass wir unseren Kunden im Kunden haben. Könnte Ihre Benutzer sein, die Ihre Website verwenden. Es könnte sein, dass Sie eine Website benutzen. Sie suchen in Ihre eigene Website, usw cetera, etc.. Also lassen Sie uns sagen, dass Sie ein langes Spiel haben. Die Leute haben ihr Passwort und sie werden Ihren Namen und alles verwendet. Also, was sie tun werden, ist, dass sie sich anmelden und daher ihren Benutzernamen und ihr Passwort senden , und es wird von ihnen von ihrem Computer an die Server gesendet werden, richtig? Und dann wird der Server es holen, und er wird sie einsperren. Hier ist das Problem. Wenn Mr. Hacker auf dem Bild auftaucht, das heute leider alltäglich geworden ist,wird er in das heute leider alltäglich geworden ist, der Lage sein, in das Ding einzutreten, wird in der Lage sein, mich auf die Übertragung selbst zwischen dem Kunden und zwischen auf Ihrer Website. Sehen Sie Ihren Benutzernamen und Ihr Passwort und plötzlich wurden Sie oder dieser Client gehackt und das ist schrecklich. Jetzt wollen Sie nicht, dass dies geschieht, vor allem nicht, wenn Sie irgendeine Form von E-Commerce haben. Oder wenn Sie mit sensiblen Informationen umgehen oder nur für Ihre eigenen, loggen Sie sich bei Ihrer eigenen Website ein, die Ihre gesamte Website zerstören kann. Nun, zum Glück, Glück, haben wir Backup in allem. Aber das ist nicht etwas, was Sie passieren wollen, vor allem nicht zu wissen, dass Menschen wertvolle Informationen über ihre privaten Informationen mit Ihnen teilen könnten , mit ihren Anmeldedaten , etc. etcetera. Also hier ist die Lösung. Leute, Verschlüsselung und Verschlüsselung ist genau das, was SSL bietet. Also jetzt, wenn wir SSL verwenden, sieht es so aus, da wir unsere Kunden haben, die sich weiterhin auf Ihrer Website anmelden , oder? Es wird seinen Benutzernamen haben und es wird weitergegeben, aber nicht, wenn es die Informationen an den Server sendet. Es wird tatsächlich die Verschlüsselung durchlaufen, oder? Dies ist die SSL-Verschlüsselung, Das bedeutet also, dass, wenn die Übertragung zwischen dem Aufstieg und dem Server geschieht, es ist nicht mehr zu sagen, verwendet 123 Sie übergeben für 123 Recht wird nicht den Benutzernamen und das eigentliche Passwort sagen . Stattdessen wird es etwa so aussehen. Es wird nur zufällige Ziffern und Zahlen sein, die unmöglich sind zu wissen, was es eigentlich sagt und was es eigentlich bedeutet. Also dann wird es vom Server mit diesen wirklich seltsamen Informationen empfangen werden. Aber dank SSL bedeutet das, dass, wenn der Server diese Informationen erhält, entschlüsselt werden. Und das bedeutet, dass der Server die tatsächlichen Informationen abrufen und verwenden kann und diesen Client sicher einloggen kann. Also, jetzt sollte Mr. Hacker erscheinen, offenbar gibt es nur einen Hacker auf der Welt in dieser Geschichte. Sollten die Hacker auftauchen, bedeutet das, dass sie die Verschlüsselung übernehmen, richtig? Und wenn sie die Verschlüsselung ergreifen, haben sie keine Ahnung, was es bedeutet, dass sie nichts Wertvolles damit machen können. Und deshalb ist SSL so wichtig. Und es ist so wertvoll für die Sicherheit für sich selbst, für alle, die es verwendet, müssen Sie Ihre Website SSL gesichert haben. Okay, dann gehen wir weiter, um das Ende zu sehen. Nun, die Sache mit der SSL-Verschlüsselung ist, dass die Verschlüsselung durch den blauen Host-Service geht , weil wir Blue Host verwenden und wir bekommen ein freies SSL wird nur über die blauen Host-Server funktionieren . Aber mit Cdn werden Sie einen Haufen von verschiedenen Servern verwenden. Und wenn Sie nicht für Ihr SSL-Zertifikat bezahlen, können Sie das nicht auf den anderen Dienst anwenden, den Sie verwenden. Wegen all dieser verschiedenen Server werden sie überall auf der Welt sein, richtig? Das bedeutet also, dass Ihre Website in Ihrem Kontinent, Material, das die Menschen auf Ihrer Website besuchen, sie in verschiedenen Teilen der Welt hochgeladen werden. Also, zum Beispiel, wenn jemand Norwegen in Europa gesehen wird oder jemand ist in Australien oder Neuseeland, usw cetera, etc.. Dann wird es einen engeren Server geben. Höchstwahrscheinlich sind wir blaue Gastgeberin und sie werden eine schnellere Seitenladung sein. Sie werden den Inhalt viel schneller bekommen. Du wirst eine viel bessere Nutzung durch Erfahrung haben. Aber wir mussten noch verschlüsselt werden. Und das kostenlose SSL bietet das mit der CD ihm nicht an. Aber hier ist die Lösung. Und das ist der Grund, warum das so perfekt ist. Und das ist Cloudflare. Nun, Cloudflare hat dieses wirklich erstaunliche Angebot. Sie haben gut dafür, ein freies CDN zu sein. Sie sind bei weitem die breitesten. Und ich würde sagen, das beste Cdn bietet jetzt da draußen. Nun, natürlich, wenn Sie Max Cdn oder so etwas verwenden, können Sie mehr über die erstaunliche Sache mit Club für ist, dass es völlig kostenlos und kostenlos ist immer im Budget, oder? Aber sie sind nicht auf Lee bieten erstaunliche CD und sie bieten auch ein kostenloses SSL-Zertifikat . Das bedeutet also, und weil wir ein SSL von Cloudflare bekommen, bedeutet das, dass wir auf SSL eine sichere Verschlüsselung, sichere Übertragungen haben, während wir auch C. D. M. Und es wird uns nichts kosten. Das ist also das Erstaunliche hier. Also in dieser Ferne Geschichte würde eine schöne Lösung für das ganze Problem zu bekommen. Also, was, wir werden jetzt weitermachen und tun, ist in der nächsten Vorlesung. Wir werden unsere Cloudflare Cdn Werke einrichten. Wir werden unser Cloudflare SSL einrichten, diese Party starten und dann sicherstellen, dass sich unsere Ladezeiten in unserer Server-Reaktionszeit verbessern. Okay, also seht in der nächsten Vorlesung, Jungs. 9. Cloudflare CDN: In Ordnung, meine Freunde, es gibt nichts zu tun, als es zu tun. Stellen wir die Cloudflare CD ein, und okay, , bevor wir das machen, machen wir ein paar Vorbereitungsschritte. Und die 1. 1 ist, dass, wenn Sie einen Cash-Installer haben, wie wir WP Super Cash machen und es CD und Support hat , wir werden voran gehen und das de aktivieren. Es wird hier drin drin sein, und dann werden wir diesen einen Offizier drehen, den wir nicht auf CD und unterstützt haben. Das ist nett kollidiert zusammen, und wir wissen bereits, dass dieser nicht sehr gut funktioniert. Wir konnten es auf einer Ladegeschwindigkeit sehen. Und wir bekommen keine Unterstützung vom anderen Meer und CD-Enden im Ural. Also werden wir das deaktivieren und ein leistungsfähigeres installieren. Ich klicke auf Änderungen speichern. Sie würden gehen. Und jetzt gehen wir auch zu Blue Host, die kommen, wir werden auf Logan klicken, können einfach meine Schritte dort folgen, können einfach meine Schritte dort folgen, und wir gehen rüber zum Marktplatz und dann Adams und scrollen nach unten, bis wir SSL haben -Zertifikate. Und jetzt werden wir unsere SSL deaktivieren jetzt fühlt sich nicht sehr gut an, da der Blick auf die vorherige Wahl ist es nicht? Aber keine Sorge, wir werden ein neues installieren und die Dinge würden in nur ein paar Minuten noch sicherer sein . Also gehen wir weiter und deaktivieren das hier. Da gehen wir. Jetzt sind wir bereit, mit Cloudflare zu beginnen, richtig? Wurden entfernt. RSL Wir haben auch entfernt jede Form von anderen CDN unterstützt könnte mit diesem kollidieren. Also ziehen wir zu Cloudflare dot com. Ich werde das hier reinlegen. Die Ressource ist vom Kurs, und alles, was Sie tun müssen, ist zu gehen und klicken Sie auf Registrieren Sie sich hier. Aber für mich, die bereits ein Konto haben, werde ich auf Anmelden klicken. Und sobald Sie sich angemeldet haben, werden wir sowieso am selben Ort landen, und wir werden einfach voran gehen und unsere Seite hinzufügen und ich werde die Seite schreiben, auf der Robin und Jesper dot sein wird. auf Add-Website, und dann werden wir jetzt Ihre DNS-Einträge ändern. Mit anderen Worten, wir werden so ändern, dass die DNS Mit anderen Worten, die Informationen werden über ihren Dienst gesendet werden und nicht blauen Host auf, weil sie über ihre Server gesendet werden, erhalten wir eine Verbindung mit Sie sehen Dan, die auf der ganzen Welt sein wird. Okay, ich klicke nächstes Jahr auf. Ich werde den kostenlosen Plan wählen. Wie Sie sehen können, haben wir den globalen Seed in, was erstaunlich ist und auch die kostenlosen SSL-Zertifikate. Ich werde auf Pflege klicken und wir können den Plan bestätigen und wir können dies für eine kostenlose Website tun , die mehr als gut genug für uns ist. Und dann werden wir bestätigen, dass wir hier auf diese Seite kommen und es gibt nichts , worüber wir nachdenken müssen, weil das alles geschieht Automatisch. Es sagt sogar automatisch hier, was perfekt ist. Und was passiert ist, dass sie ihr I, p oder besser gesagt R i p ändern , um auf ihre Server zu zeigen. Also, jetzt alle unsere Informationen, die gesendet werden, anstatt durch blaue Hosts gehen gehen durch Cloudflare gehen. Und genau das ist es, was hier eingerichtet wird. Also werden wir einfach das sein Acid ist lassen und auf Weiter klicken. Nun, hier müssen wir unsere Hände etwas schmutzig machen. Aber das ist eigentlich super einfach. Wir müssen unsere Nameserver ändern. Also, was wir tun werden ist ändern oder blaue Hostname-Server in die Cloudflare Name-Server . Also die 1. 1 hier, wir werden nur auf Kopie klicken, damit es abgedeckt wird, und dann gehen wir zum blauen Host. Ich werde hier einen neuen Tab erstellen und mich bei blauen Hosts anmelden und dann auf Logan klicken. Und dann werde ich rüber ziehen, um hier unten Stromnetz zu machen, und du siehst, dass es sein Robin und Jesper ist, und das tut etwas weh im Herzen, kennt SSL nicht. Wir werden das in einer Minute reparieren, und ich klicke auf Verwalten, und dann gehen wir zu Nameservern und hier sind der Namensdienst. Sie können dies am Ende sehen, dieser eine dunkelblaue Host dot com. Und es ist das in diesem, das blaue Haus, das an dem Tag kommt, an dem Sie uns bitten, zu ändern, also wollen sie das Ende haben, dieses in dieses, das wir bereits kopiert haben, richtig? Also werden wir einfach hier gehen und wir werden auf benutzerdefinierte Nameserver klicken und wir werden diesen in das ändern. Da gehen wir. Und wir werden dasselbe mit diesem machen. Wir werden es cop, gehen zurück, wechseln die 2. 1 und zahlen das Sitzen einfach so. Und wenn wir fertig sind, werden wir sparen, was schrecklich weit nach rechts ist. Mein Gesicht ist im Weg, aber es ist hier unten rechts. Ich werde nur schlagen, sparen Sie so. So wurde es jetzt erfolgreich gespeichert. Wirklich, wirklich nett. Wir gehen weiter und gehen zurück und klicken auf Weiter. Und jetzt sind wir alle fertig. Alles, was wir tun müssen, ist es nicht nur schon, oder? Aber wir müssen danach 24 Stunden warten, bevor diese Änderung stattfindet. Nun, meiner Erfahrung, kann dies so wenig wie die Hälfte auf unserem John unser, aber es kann auch viel länger dauern. Also müssen wir nur warten und die Veränderungen sehen. Bevor wir weitermachen und das tun,werden wir uns ändern und unser SSL richtig machen. Bevor wir weitermachen und das tun, Also ziehen wir nach Krypto. Das ist genau hier. All dies ist bereits eingerichtet, wir werden jetzt nach Crypto ziehen. Das erste, was wir innerhalb der Krypta der Option ändern müssen, ist unser SSL , und zum Glück bekommen wir unser SSL zurück. Oder vielmehr haben wir es schon getan. So ist es von Anfang an, voll eingestellt und es sind vier verschiedene los. Die 1. 1 ist aus, was wahrscheinlich keine Erklärung benötigt. Sie schalten es aus, dann haben wir flexibel und flexibel. Diese ist ziemlich problematisch, weil dies bedeutet, dass es keine Sicherheit zwischen Ihrem Server und dem Cloudflare geben wird. Aber es wird Sicherheit zwischen Cloudflare auf Ihre Besucher geben, oder? Also werden sie immer noch eine Sicherheitslücke zwischen ihrer Bedeutung sein, Sie können mit viel weniger Einschränkungen als Verkäufer, weise und Sicherheit weise davonkommen . Aber die Besucher werden immer noch sehen, Ihre Website als sicher. Also ist es eine Art gefälschtes SSL, wenn Sie so wollen, und ich empfehle es aus offensichtlichen Gründen nicht. Es ist nicht so sicher, zumindest nicht von Ihrem und es ist viel sicherer als es ausgeschaltet ist. Aber es ist nicht sicher genug, dann ist die nächste, die wir haben, voll und dass es tatsächlich voll auf seiner sicheren von Ihrem Ende bis zur Cloud Flare und von der Cloud für sie an den Benutzer. Und das ist die Art, wie du es wolltest. Willst du den ganzen Weg jetzt gesichert werden? Wir haben auch volle streng und was streng bedeutet ist, dass Sie eine Art Zertifikat brauchen. , Zum Beispiel, weil blue Host einen Dienst namens Let's Encrypt verwendet, haben wir bereits ein Zertifikat auf unseren Servern. Unsere Server gelten als sicher auf, da wir Blue Host verwenden. Wir haben die Lasst uns verschlüsseln, und dann haben wir das Zertifikat und wir können bis zur vollen Strenge verwenden. Daher empfehle ich dringend, dass wir voran gehen und diese volle strikte verwenden, weil es die sicherste ist . Wenn Sie jedoch keine Blue-Hosts verwenden, besteht die Wahrscheinlichkeit, dass Sie möglicherweise nur einen vom anderen verwenden können. Vielleicht sogar nur flexibel, dann wird flexibel immer noch besser. Aber ich empfehle immer noch, dass Sie mit Ihrem Host Ihre Server überprüfen und sicherstellen, dass Sie gehen und auf SSL-Zertifikat, weil es so wertvoll ist. Wir haben das aus der vorherigen Vorlesung gelernt , also werden wir es eine ganze Reihe behalten, weil wir können, und wir sind dankbar, dass wir es können. Dann scrollen wir nach unten und wollen ein paar Dinge überprüfen. Und das erste, was wird immer https verwendet. Und das ist ein Teil davon, streng zu sein, oder? Wenn also jemand mit http kommt, möchten Sie sie immer zu http umleiten, da wir diese sichere Verschlüsselung immer verwenden möchten. Denken Sie daran, das S steht eigentlich für sicher, und hier haben wir automatische https-Umschreibungen. Grundsätzlich ändert es alle Content-Forscher und Links. Es sagte auf der Website von Http zu https. Und wir wollen, dass das bewaffnet ist. Das ist großartig. Alles soll verschlüsselt und sicher sein, und das ist es dafür. Also, als nächstes, niemand, alles ist eingerichtet. Wir haben unser SSL und wir haben auch Cloudflare für die CDN-Justiz eingerichtet. Oder das wird eine Welt in Anspruch nehmen, nun, ein paar Stunden. Aber ich werde darauf zuschneiden, damit du nicht den langweiligen Teil sehen musst. Dann zeige ich Ihnen, wie Sie sehen können, dass es funktioniert und funktioniert. In Ordnung, also sind es ungefähr zwei Stunden her und seit dieser Zeit läuft es. Was wir jetzt machen werden, ist auf diese Website zu gehen, die heißt Was ist mein Deenas Punktnetz ? Es ist in der Ressource ist und wir werden auf unserer Website schreiben. Dann werden wir gleich, Robin und Jesper Dot com. Und dann werden wir dieses A ändern und wir gehen, um das zu beenden, was Nameserver ist, und dass wir auf Suchen klicken, weil dies uns erlauben wird, zu sehen, wie weit wir gekommen sind. Und wir können sehen, dass wir tatsächlich einige Server haben, die sich an die Cloudflare Server gewandt wie die in Ashburn. Wir haben auch die in Cambridge, in Brasilien, in Amerigo , Paris, etc. Aber wir haben auch ein Paar, das zum Beispiel in London nicht und noch nicht mag . Wir können das sehen, weil das die sind, die wir manuell und diese Art von Blue Host, welche Zahlen? Weil sie sagen, blue host jetzt, um zu überprüfen oder SSL und alles als gut. Und um weitere Informationen zu erhalten, können wir diesen Check für Cloudflare dot celestic dot com verwenden. Dies ist auch in der Ressource ist, wir gehen weiter und schreiben in unserer Website, die http s Spalte Schrägstrich Vorwärtsschrägstrich immer https ist. Von nun an, Jungs Robin und jesper dot com und klicken Sie dann auf Betrug. Und hier können wir sehen, dass es acht globale Standorte überprüft hat und wir haben Cloudflare in vier der vor England, Dänemark, Russland gefunden, uns nicht in China, Deutschland, Spanien und Niederlande. Also wird es noch ein bisschen mehr Zeit brauchen. Aber die gute Nachricht ist, dass es tatsächlich funktioniert. Es sagt auch, dass in der Kleidung niedriger cdn verwendet wurden, was fantastische Nachrichten ist. Es bedeutet, dass es klar funktioniert. Und es sagt auch, dass wir die Schreiber Schicht SSL verwenden, was bedeutet, dass das auch funktioniert, was erstaunliche Neuigkeiten ist. Also funktioniert alles. Leute, wir können uns wirklich darüber freuen. Wir werden es noch ein paar Stunden geben und dann gehen wir zur nächsten Vorlesung über , überprüfen noch eine Sache, und dann machen wir einen neuen Test, der Zeit läuft und überprüfen die Reaktionszeit des Servers. Okay, toller Job, es so weit zu machen. Siehe, in der nächsten Vorlesung 10. Zuhause Site: In Ordnung. Bevor wir also weitermachen und den Up-Time-Test durchführen, um die Reaktionszeit des Servers zu überprüfen, möchte ich Ihnen etwas zeigen, das auf lange Sicht wirklich wichtig ist. Und das ist über die Website und zu Hause Ihre l Recht. Also, wenn Sie zu Ihrer Startseite für uns gehen, das ist Robin und Jesper dot com hier, und Sie klicken. Sie werden feststellen, dass wir https vom Kurs haben, immer asiatisch zu PS. Und dann haben wir Robin und Jesper Dot com. Nun, beachten Sie, dass es nicht w w w dot Robyn und jesper dot com sagt. Soll ich da reingehen? Ich werde einfach direkt zurück in dieses Robin und Jesper Dot com geworfen werden, ohne das Double benutzt zu haben, und Sie könnten wählen, dass Sie wählen, nicht Schritt zu verwenden. Aber wenigstens gebe ich dir die Optionen, die du wählen kannst. Und dann werden wir über die Vor- und Nachteile sprechen. Also, was wir tun werden, ist, dass wir auf die hintere Jennifer-Website gehen. Wir gehen hier zum Armaturenbrett und dann gehen wir zwei Sitzungen durch, und wir werden auf General klicken und dann sehen wir, dass wir Brett haben. Drücke auf deine l und Standort-Adresse, Ural. Und wenn Sie möchten, dass Ihre Website als www dot Ihre Domain-Namen dot com, dies wäre der Ort, um Änderungen Einstellungen und allgemeine. Und hier haben wir es. OK, jetzt gibt es keinen besonderen Vorteil, die W's zu verwenden oder ohne zu verwenden. Es gibt viele große Websites, die ohne verwenden, und viele große Größe verwendet mit. Okay, also spielt es keine Rolle, welche du benutzt. Das wird für Sie entscheiden. Aber ich möchte, dass Sie sich zwei Dinge ausdenken, die wichtig sind, eine, die, wenn Sie schreiben, was Sie zitiert, immer darauf achten, dass Sie das verwenden. Wenn Sie zum Beispiel diejenige verwenden,die ohne die W verwendet wurden, dann,wenn Sie mit Leuten schreiben und es verknüpfen, wenn Sie es in Ihren sozialen Medien platzieren, wenn Sie Ihre zum Beispiel diejenige verwenden, Wenn Sie zum Beispiel diejenige verwenden,die ohne die W verwendet wurden, dann, wenn Sie mit Leuten schreiben und es verknüpfen, wenn Sie es in Ihren sozialen Medien platzieren , digitales Marketing, zum Beispiel, möchten Sie sicherstellen, dass Sie nicht verwenden, dass verdoppelt mit hier, weil das geht, um eine andere Umleitung zu tun. Das wird nur die Ladegeschwindigkeit der Seite langsamer machen, und das wollen wir nicht, okay, okay, und das klingt vielleicht wie ein Minor. Aber auf lange Sicht wird das ein Major werden. Wir wollen also sicherstellen, dass wir immer dasselbe verwenden. Und die zweite Sache würde immer dasselbe verwenden, ist, dass, wenn Sie dieses für eine Weile verwenden und dann entscheiden Sie sich, mit W w w so zu gehen, dann könnte das Problem sein, dass Google das sieht. Okay, hier kommt eine andere Seite erkennt Ihre ursprüngliche Seite nicht. Und das Problem damit ist, wenn es aufgehört hat, identische Websites, werden Sie wahrscheinlich von Google-Suchmaschinen verboten werden. Und das bedeutet nur sehr wenig oder gar keinen Verkehr. Also wollen wir nicht, dass das passiert. Aber in der frühen Sicht, wie wir es jetzt sind, ist es völlig in Ordnung, voranzugehen und es zu ändern. Moment gibt es keinen Vorteil, einander gegenüber dem anderen zu verwenden. Stellen Sie einfach sicher, dass Sie eine auswählen und Sie bleiben dabei. Ich ziehe diesen hier vor. Aber der Vorteil aus der Verwendung der W kann natürlich sein, dass eine Menge Leute, wenn sie sprechen und sie verweisen auf jemanden, den sie verwendet, um zu verdoppeln , aber es jede Rate, wie Sie in der Google-Suchmaschine Cosco verbessert sich. Das wird dein Original sein. Jedenfalls Verbessert zitiert, also werden sie sofort hier landen. Die wichtigeren Parteien für Ihre Social Media für ein digitales Marketing. Wenn Sie Anzeigen oder ähnliches machen, möchten Sie sicherstellen, dass Sie immer die richtige Adresse verwenden. Und wenn Sie ändern möchten, ist dies wahrscheinlich die Zeit jetzt früh auf Änderungen und stellen sicher, dass Sie beide von ihnen ändern. Wenn Sie nur eine dieser Änderungen ändern, könnte Ihre Website unterbrochen werden. Und das macht keinen Spaß, ist es wirklich nicht. Also ändern Sie einfach eins von diesen. Dann gehen wir weiter und gehen zum nächsten Vortrag und machen den Geschwindigkeitstest und gehen dann zur nächsten Ausgabe über und verkauften auch eine. Und dann werde ich Ihnen zeigen, was Sie tun können, wenn Ihre Website bricht. Ich weiß, wir haben unsere Backups und alles, aber es gibt noch mehr Dinge, die Sie tun können, wenn es in der nächsten Vorlesung kaputt wäre . Jungs 11. Browser-Caching: Na gut, Leute, willkommen zurück. Nun, wenn Sie mir von der vorherigen Vorlesung folgen, werden Sie auch Ihre Cloud eingerichtet haben, um das Ende zu sehen. Wenn nicht, geh weiter und tu das. Wenn das ist, was Sie tun möchten, um in diesem Abschnitt zu optimieren. jetzt Bevor wirjetzteinen Geschwindigkeitstest in einem Ladeseitentest machen, möchte ich über das nächste Problem sprechen, mit dem wir konfrontiert sind. Was es ist, was wir dagegen tun können. Und dann werden wir gehen weiter und testen unsere neue Cloudflare Cdn für die Server-Reaktionszeit und auch überprüfen, wie Sie die Hebel-Browser-Einlösung beeinflussen können. Okay, Also, was ist Leverage Browser Einlösung? Nun, im Grunde ist es das Bargeld, das wir wissen, was ein Bargeld ist, richtig. Es geht darum, einen Browser-Cache zu nutzen, was bedeutet, dass wir viele Dinge fangen, wie Sie sehen, sagt Javascript. Ah, viele für Bilder oder Hintergründe, etcetera zum Durchsuchen oder zum Benutzer auf ihren Computern. Alles wird jetzt viel schneller geladen, das Problem, das wir richtig haben, und es ist ein kleines Problem, weil Sie sehen können, dass es tatsächlich im niedrigsten Teil in der Prioritätsliste genau hier ist, dass, wenn Sie nach unten scrollen, gibt es keine Ablaufdaten oder Ablaufzeit. Vielmehr hat es angegeben. Und das ist normalerweise kein großes Problem, denn wir werden sowieso ein Match aufstellen, also kümmert sich das um dieses Problem. Aber was es bedeutet, ist, dass es kein Datum oder eine Zeit für, wann wird ablaufen. Wenn Sie also Ihre Seite aktualisieren, entfernt sie sich nicht automatisch aus dem Bargeld. Und für einige, viele Leute verwenden unterschiedliche Zeiten für das Geld, je nachdem, welche Art von Website, je nachdem, wie sie wollen, und so weiter zu nutzen. Aber was wichtig zu wissen ist, dass Sie immer noch gehen, um die aktualisierte Seite zu bekommen, wenn Sie kümmern sich um das Geld auf Ihrer Website. Nun, wenn wir einen Blick auf Pat Flynn hier auf seiner Website werfen intelligentes, passives Einkommen. Dies ist der erste Test, den wir zuvor im Abschnitt gemacht haben. Sie werden sehen, dass er sollte auch diese Hebelwirkung Browser fangen als Fehler. Wenn Sie darauf klicken, hat er tatsächlich das Gleiche. Sind wir das Ablaufdatum nicht auf eine Menge der Dinge in hier angegeben, aber trotzdem, seine Website Osten funktioniert sehr gut und wird super schnell geladen und es ist eine kleine Größe jetzt, das wichtigste von all dem natürlich, die Ladezeit selbst. Und wir sind nicht hier, um auf alle Zahlen aufgehängt zu werden, um alles perfekt zu machen. Wir wollen eine tolle Ladezeit für die User Experience und für die S e o. Rechts haben. Aber was ich will, dass du wirklich zu deiner Kasse gehst. Und wenn du mitverfolgt hast, solltest du das WP Super-Cash haben. Und wenn du es nicht tust, ist das auch in Ordnung . Es gibt eine Menge Bargeld es Plug in da draußen und ich wollte zu diesem in der fortgeschrittenen Sektion gehen . So gehen Sie, um Dinge WP Super Cash Voraus zu setzen und dann gehen Sie zu diesem ist bei 304 nicht geändert. Durchsuchen oder Einlösen geben an, wenn eine Seite seit der letzten Anforderung nicht geändert wurde. Also, was das tun wird, ist, dass es immer ist, wenn sie unsere Website betreten, sie werden ihre Fänge in Richtung der aktuellen Bargeld auf der Website überprüfen, um zu sehen, ob sie passen, nur um zu schütteln. Okay. Gibt es etwas, das aktualisiert wird, das aktualisiert werden muss oder wenn es dasselbe ist, wenn es dasselbe ist, muss nichts getan werden. Wenn etwas da oben ist, wird uns aktualisieren. Es ist nur etwas, das sich wirklich lohnt, aktiviert zu haben. Also werden wir es anklicken. Wir gehen runter und klicken auf Updates. Status. Und jetzt, mit diesem winzigen Unterschied, den wir mit diesem winzigen Update gemacht haben, werden wir weitermachen und einen neuen Geschwindigkeitstest auf unserer Website machen. Nun, natürlich, es gibt eine Menge mehr Dinge, die wir hier tun könnten. Sie könnten tatsächlich in Ihre HD überschüssige Dateien gehen und sitzen bestimmte Ablaufzeiten für jede aus diesen Dateien, und ich werde Ihnen zeigen, wie Sie das auch tun. Nun können Sie auch weitergehen und zu Ihrer HD-Zugriffsdatei gehen und einen bestimmten Code eingeben, um ein Ablaufdatum festzulegen . Aber diese Datei ist sehr empfindlich. Wenn etwas schief geht, wird es Ihre Website brechen. Ich habe es vorher benutzt, aber ich habe keinen Unterschied in der Leistung auf meinen Websites gesehen, also mache ich mir nicht wirklich die Mühe, das mehr zu tun, also werden wir das nicht berühren. Es ist einfach unnötige Arbeit und auch etwas riskante Arbeit. Wir werden weitermachen und einen weiteren Geschwindigkeitstest machen, also klicke ich auf „Start Testing“. Ordnung, also sind die Zahlen drin, und wie wir sehen können, gibt es eine wirklich schöne Verbesserung vor sich. Die Ladezeit wird verbessert. Die Anfragen werden gesenkt. Diese Größe ist jetzt nur ein Haftungsausschluss. Keines davon ist eine exakte Wissenschaft. Wenn Sie mehrere Tests ausführen, haben Sie vielleicht bemerkt, dass es auch ein wenig Heudraht geht , je nachdem, woher der Test kommt. Aber es gibt Ihnen eine sehr gute Schätzung, dass, wie wir in den vorherigen Tests sehen können, geladen werden. Zeit schwebte bei 80,8 2. und fast 0,9, und jetzt schwebt sie bei 0,6. Das ist unglaublich. Die Anfragen werden gesenkt. Wir können 31 bis 18 sehen. Die Größe wird wahrscheinlich zunehmen. Aber noch einmal, diese vielleicht nicht. Das ist nicht perfekt. Das ist nicht perfekt. Nichts davon ist. Aber eine Gesamtpunktzahl ist von 63 an auf 71 gestiegen. Das sind einfach wirklich, wirklich tolle Jungs. nun Wenn wirnunnach unten scrollen, werden Sie feststellen, dass der Hebel-Browser, der ihn fängt, immer noch ein Problem ist, das hier los wird . Aber es wird sein, bis wir auf die Ablaufzeit setzen. Und meiner Meinung nach, wenn wir uns diese fantastischen Ergebnisse ansehen, denke ich nicht, dass wir das brauchen. Und ich denke, Sie sollten sich auch nicht zu sehr darum kümmern, diese zu perfektionieren. Nun, das hier ist vom Kurs. Super interessant. Sieh dir das an. Jetzt erhalten wir immer noch eine Warnung für die Reaktionszeit des Servers. Aber bevor man eigentlich in der Spitze war, war das höhere Kit das größte aktuelle Problem. Jetzt ist es unten, noch niedriger als die Nutzung der Browser-Einlösung. Wenn ich also darauf klicke, können wir sehen, dass der Server in 0,3 Sekunden geantwortet hat und das ist fantastisch. Wo ist vorher? Es reagierte in 0,78 Sekunden. Richtig? Und wenn wir den ganzen Weg von Anfang an schauen, als unsere Geschwindigkeit mit 4,2 Sekunden, fast 4,3, denken Sie daran, denken Sie daran, das war aus Sydney, Australien. Wir hatten auch eine Server-Reaktionszeit von 1.1 2. So fast über die zweite. Wir mussten warten, bevor der Server reagierte und alles passierte. Und das war die Zeit, zuerst zu beißen. Denken Sie daran. Also gerade jetzt, Leute, Leute, wir haben tatsächlich eine fantastische Website, die los ist. Und wenn wir uns mit Pat Flynn vergleichen, werden Sie feststellen, dass seine Ladegeschwindigkeit schneller ist. Und die Chancen sind, dass er Experte verwendet, um seine Website richtig zu nutzen, Minimierung der Bildgrößen noch weiter weg natürlich vielleicht ist mit dedizierten Servern oder VPN-Hosting , während wir das Shared Hosting in den grundlegendsten Plan verwendet. Und um ehrlich zu sein, wir tun wirklich großartig, auch dafür hat er einen Nullpunkt fast 0,4 und wir sind bei 0,6 und der Punkt ist, unter zwei Sekunden zu sein. Also machen wir wirklich fantastisch. Gesamtgröße jetzt unsere Auftritte bei 71 er ist wieder bei 73, sind nur abstrakte Schätzungen von dieser Seite nach oben Zeit, die kommen und nichts hier ist perfekt. Keine Notwendigkeit, alles verrückt zu machen, um das zu perfektionieren. Er hat auch diese Dinge los. Aber eines seiner Probleme ist nicht dienen eine Reaktionszeit. Sie können sehen, dass er grün sagt, und Sie werden grün, wenn Sie dienen. Reaktionszeit ist besser als 0.2 und wir müssen entweder von blue Host zu gehen , zum Beispiel, Website Boden, Website Boden, die wirklich schnell Host oder verbessern unser Hosting auf blue host vielleicht ein VPN oder Pro-Plan, oder einfach nur glücklich sein, dass wir sehr wenig Geld für einen fantastischen Service bezahlen. Und unsere Website funktioniert vollkommen gut, Leute, aber wie immer ist der eigentliche Beweis im Eintopfen. Richtig? Wenn wir also weitermachen und Robin und Jesper dot com so laden würden, werden wir feststellen, dass es wirklich schnell vom Kurs geladen wird. Aber wenn Sie wissen, was ist, dass intelligente, passive Einkommen es vorbei Flugzeuge Website niedriger schneller. Aber diese beiden, während es einen Unterschied gibt, ist der Unterschied nicht riesig. Beide Websites laden wirklich, wirklich schnell und das ist fantastisch. Wenn Sie auf den zwei Sekunden sind, können Sie eine fantastische Website haben. Fantastisch s Sie glückliche Besucher. Sie haben eine große Sie i Benutzeroberfläche und große, Sie X Jetzt in der nächsten Vorlesung Jungs. Was? Wir werden weitermachen und das tun, ist, sich all diese anderen Schätzungen anzusehen, die hier gerade jetzt für mich los sind. Und die Chancen stehen für Sie, sie könnten grün sein, aber sie können nicht sein. Also lassen Sie uns darüber reden, was all diese anderen Dinge sind. Und wenn sie dieses Warnzeichen hätten, was sollen sie jetzt tun? Eine letzte Sache. Ich möchte dir davon erzählen. Wie immer sind diese Art von Tests nicht perfekt. Und verschiedene Tests geben unterschiedliche Ergebnisse. Wir haben die wir einen Test von Google und wir haben auch den Ping Dum Test, und diese werden Ihnen verschiedene Vorschläge geben. Unterschiedliche Ergebnisse. Aber wie immer Jungs nicht verrückt. Der Hauptpunkt ist, eine gute Punktzahl, eine schöne Benutzeroberfläche, schöne Benutzererfahrung zu haben, und dann sind Sie alle gut zu gehen. Wir brauchen nicht, um perfekte Ergebnisse in allem zu haben. Sieh dir Pat Flynn an. Er hat eine erstaunliche Website, erstaunliche Geschäfte, und er macht 73 von 100 nicht 100 von 100. Also lasst uns über diese anderen Dinge reden, und dann werden wir weitermachen. Okay? Siehst du, in der nächsten Vorlesung, Jungs, 12. Weitere Optimierungen: Na gut, Leute, willkommen zurück. Nun lassen Sie uns einige weitere Probleme schießen für, wenn Sie Ihre Geschwindigkeit testen Ihre Website. Also haben wir bereits ein paar Probleme in der Registerkarte „Leistung“ durchgemacht, richtig? Wir haben die erste Beseitigung der Renderblockierung JavaScript und CSS in der oben den Fold Inhalt getan. Nun, das ist ein Bissen haben wir optimiert oder Bilder haben durch Nutzung Browser-Cashing gegangen , die wir wissen, ist öfter Ablaufzeit als tatsächliche Einlösung Zeit. Und wir haben auch untersucht, wie die Reaktionszeit des Servers reduziert werden kann. Und wir haben die Reaktionszeit verkürzt und einige Optionen durchlaufen, um sie weiter zu reduzieren . Sollen wir das tun wollen? Jetzt schauen wir uns die anderen Paare hier an. Jetzt gibt es noch mehr. Das ist grün für uns. Und der Grund, warum sie grün sind, ist, weil viele davon wir vier frei bekommen haben. Da wir unsere Website aufgebaut haben. Nun, die 1. 1 heißt mich Vereinheitlichung HTML, und Sie werden feststellen, dass wir haben vergrößert Gmail Männer. Wenn ich und CIA hier unten sagt Vergrößern Javascript. Also, was ist gemeint, wenn ich gut, im Grunde Männer, wenn ich ng ist, wenn du den Code verkürzt, oder? Da HTML, CSS und JavaScript sind alle verschiedene Arten von Codes auf das, was Männer, wenn der Code beäugt, ist, dass es Platz spart, indem es für Menschen unlesbar, aber immer noch vollständig lesbar für Computer. Also alle Räume, die die Herstellung der Codes für Menschen wie wir zu verstehen und in der Lage zu programmieren, entfernt sie, dass Also entfernen sie Größe und sie entfernen alle aus dem Weiß. Der unnötige Raum komprimiert es. Grundsätzlich ist es eine Kompression, aber die Computer waren immer noch in der Lage, es zu verwenden. Aber ich nehme an, es sieht einfach wie ein großes Chaos aus. Also lass mich dir zeigen, was ich meine. Also hier haben wir einen sehr einfachen Code für Änderungen in der Farbposition auf der Eingabe fühlt wenn Sie zum Beispiel ein Formular für männlichen Port tun . So sieht ein normaler Mantel aus, wenn du meinst, wenn ich es meinst, werden wir den ganzen Raum aus diesem Raum entfernen. Also, was wir dann tun würden, während die Vergrößerung vorgeht und so eingeht und so eingeht und so eingeht, wenn Sie also irgendeine Form von Codierung oder Programmierung machen und Sie einen Haufen Code bekommen und es wäre so aussehen und sagen wir, dass es eine Menge Code gibt und irgendwann so aussehen wird, aber mit einem Haufen verschiedener Eingaben wird das nur ein großes Chaos sein, richtig, richtig, weil es keine Leerzeichen gibt. Aber mit der Vergrößerungsstaub ist, dass es den Raum sparen, indem es alles in einer Zeile, sagt Schneller auszuführen. Und die Datei selbst ist kleiner und es funktioniert viel besser oder zumindest viel schneller für die Computer. Aber ein Mensch wird nicht in der Lage sein, zu programmieren. Aber Sie müssen dies nicht co, weil Sie es nur ausführen müssen. Das ist also, was Vergrößerung ist. Und die Männer, wenn wir von unserem Stecken von unserer Cash-Stecker bekommen, ist es richtig und die Cash Plug Ins, die man im Grunde benutzen könnte. Aber wir sind mit unten in der Einstellung sagen, wir verwenden die WP Super Cash Plug, in dem Dustin vereinheitlichen für uns. Aber das WP Super Cash vergrößert nicht nur, sondern es kassiert es auch in eine statische Datei, so dass es all diese Dateien alle vereinheitlicht fällt in das Geld und dann Dienste. Es ist also noch einen Schritt weiter von der Vereinigung entfernt. Es macht also alle Dateien sehr müde und sehr komprimiert, setzt sie in ein Geld und legt sie dann in den Computern des Benutzers. Es wird schneller geladen. Okay, jetzt, wenn Sie keinen Haken haben, alles, was Sie tun müssen, ist, gehen Sie zu Plug-ins, fügen Sie neue und suchen Sie nach Bargeld, und es gibt eine Menge wirklich wunderbarer Cash Plug Ins Jetzt, ehrlich gesagt, Ich habe gewohnt, W drei das schnellste Geld, Super-Cash, oder zu optimieren, und sie alle funktionieren. Ich bin sicher, das funktioniert auch. Sie funktionieren alle wirklich. Aber die, die ich am effektivsten und einfachsten finde, die ich bevorzuge, ist das WP Super Cash, weshalb wir es verwenden. Wir bekommen eine Menge kostenlos, wie sie sich hier jetzt vereinigen. Die nächste Sache ist, die Komprimierung und Dekomprimierung zu aktivieren, ist im Grunde, wenn Sie eine Datei haben und Sie sie kleiner machen. Also Männer, wenn ich ng ist eine Form der Komprimierung für den HTML für die CIA, sagt für das JavaScript. Aber am wichtigsten ist, was ist die schwersten auf unserer Website sind die Bilder, oder? Also haben wir unsere Zeit damit verbracht, unsere Bilder zu optimieren, indem wir für P und G bis J Peg gehen und sie auch in eine Datei mit niedrigerer Auflösung komprimieren. So sparen wir viel, viel Platz und erhöhen oder Ladezeit, und das ist Kompression. Und wir haben es auch durch Plug Ins wie Smush ermöglichen, zum Beispiel. Wenn wir also irgendeine Form von Bild in unsere Medienbibliotheken hochladen, komprimiert es viel automatisch. Dann haben wir auch die vermeiden Landing Page. Umleiten. Also, wenn Sie ein Problem mit der Komprimierung haben, was Sie tun können, ist, gehen Sie voran und laden Sie einen Plug in wie zerschmettert. Es wird komprimieren. Und stellen Sie auch sicher, dass Sie Ihre Bilder komprimieren und tatsächlich einen Cash-Stecker in Männer verwenden. Wenn ich Ihre Dateien, zum Beispiel, und Cash alle Ihre Dateien, um die Ladegeschwindigkeit zu verbessern und so viel Komprimierung wie möglich auf alle schnell verwendet , kann es jetzt komprimiert werden. Als Nächstes ist vermeiden Landing Page Redirect. Jetzt ist eine Umleitung, wenn Sie von einer Seite auf eine andere gesendet werden Also, zum Beispiel, sagen wir, dass Sie in http Roman und Jesper dot com gehen. Aber dann leitet Sie diese Seite tatsächlich auf die h t T P s Version von der Seite. Richtig? Das wäre also eine Umleitung. Aber jetzt leitet Sie diese Seite auch auf den W W Teil von der Seite und dann diese Leerzeichen wirklich zu lenken. Und dann ist dieser wieder Regisseure auf den Vorwärtsschrägstrich nach Hause. Also jetzt würden wir drei unnötige Weiterleitungen haben, die auf unserer Website stattfinden, aber wir könnten verwenden, um von der ersten zum letzten ohne all diese mittleren Weiterleitungen gesendet zu werden . Richtig? Dies kann also manchmal passieren, wenn wir Probleme mit unserem SSL bekommen. Denken Sie an das SSL. Also gehen wir von http zu https, Aber dann ist vielleicht etwas falsch mit https wird Sie zurück zu http etcetera oder irgendeinem Formular aus Schleife Problem senden . Oder vielleicht wurde die Seite gerade so eingerichtet, dass es viele freie Directs gibt. Aber wenn Sie dieses Problem haben oder etwas kaputt ist oder Sie haben die URL geändert , alles, was Sie tun müssen, ist gehen Sie weiter und gehen Sie zu den Plug-Ins und gehen Sie zu Plug Ins, Fügen Sie neue hinzu und suchen Sie nach etwas namens Redirect. Jetzt, hier drin, wird es diese Einsteckung geben, die Umleitung genannt wird. Sie können es einfach installieren und sofort mit der Verwendung beginnen. Es ist super einfach zu bedienen, wird Sie nach der Eingabe fragen. Also, wenn eine Person das schreibt Ihr l, werden sie zu diesem Euro geschickt. Also Sie direkt in Ihr l, dass Sie wollen, dass die Leute verwenden und dann, wo Sie wollen, dass sie super einfach geschickt werden. Sie werden weitergeleitet, wo Sie sie wollen, so dass Sie keine mittleren Mittelhand Umleitungen benötigen , wenn Sie so wollen. So super einfach zu bedienen. Und dann haben wir auch sichtbaren Inhalt priorisiert, was dies bedeutet, ist, dass wir das Laden und Rendern der oben genannten Faltinhalte priorisieren. Okay, also wenn unsere Seiten heruntergeladen werden, was es in erster Linie heruntergeladen werden wird, wird die von oben der Faltabschnitt auf unserer Seite, diesem Abschnitt sehen Sie, wie schnell das geladen jetzt alles unten, höchstwahrscheinlich geladen, nachdem all dies bereits geladen wurde. Und das liegt daran, wenn Leute auf unsere Website kommen, damit diese Seite sofort geladen wird , richtig? Das priorisiert also in diesen Inhalten, um zuerst alles zu entladen, was unten liegt, wo höchstwahrscheinlich langsamer geladen wurde. Aber das spielt keine Rolle, denn wenn Leute unsere Seite besuchen, wollen wir sicherstellen, dass sie das alles sofort sehen. Und dann kann alles unten seine Zeit dauern, um zu laden. Und das ist es, was sie mit der Priorisierung von sichtbaren Inhalten bedeuten. Also, wenn Sie ein Problem damit haben, höchstwahrscheinlich wird das Problem mit Ihrem Cash-Stecker in oder besser gesagt, Mangel an Cash Plug in, weil die Cash Plug in wird sicherstellen, dass Sie automatisch laden Die wichtigsten Dateien in der Entführung, der Fold Abschnitt und alles, was es nicht wichtig ist, werden tiefer geladen, weil es länger dauert, aber sie müssen nicht geladen werden. Also, wenn wir nach unten scrollen, haben wir auch mobile Usability, und wir bekommen ah viel kostenlos hier aus zwei Gründen. Erstens, wir verwenden das Ocean WP Thema, das bereits mobil, freundlich und mobil angepasst ist , sondern auch, weil alles, was Sie in L. tun Ein Mentor ist auch sehr mobil freundlich, so es ist extrem gebend und Sie bekommen viel kostenlos, indem Sie diese Tools verwenden. Jetzt haben wir tatsächlich einen Fehler hier, der besagt, dass Größe Tap Ziele angemessen. Wenn ich darauf klicke, es sagt, die Taft oder Ihre Datenschutzrichtlinie ist in der Nähe eines anderen tippen Ziele endgültig. Und höchstwahrscheinlich bedeutet dies, dass in der Fußzeile unsere Datenschutzerklärung und Geschäftsbedingungen Links oder auf der mobilen Version schließen. Aber das ist in Ordnung, weil wir nicht weitergemacht haben und unsere Website an die mobile Reaktionsfähigkeit und die Tablet-Reaktionsfähigkeit angepasst haben. Doch richtig oder Website ist ansprechbar für Tablet und für mobile, aber wir haben sie noch nicht speziell für sie neu gestaltet. Wir werden das in einem bevorstehenden Vortrag machen, also wird das bald für sich selbst erledigt werden. Und dann haben wir lesbare Schriftgrößen verwendet, und das ist mehr Spaß Meinung off up Zeit, die sie Sie bitten, bestimmte Spaß Größe und bestimmte Menge von Wörtern pro Spalte verwendet . So wird die allgemeine Ihre Website gut aussehen und wir füllen diese Kriterien. Aber das ist mehr eine Meinung als alles andere. Dann haben wir diesen Eisinhalt, um den Hafen zu sehen, oder? Und das hier. Stellen Sie sicher, dass Sie nicht bald in auf Ihrem Handy, wenn Sie es verwenden, um den Inhalt zu lesen, weil das nimmt weg von der Benutzererfahrung große Zeit. Wenn Sie also eine Website auf Ihrem Handy eingeben, möchten Sie sicherstellen, dass Sie einfach voran gehen und scrollen können. Alles wird lesbar, zugänglich serviert, zugänglich serviert, und es sah wirklich gut aus. Aber wenn es keine Inhalte gibt, die die Größe des View-Ports haben, müssen Sie bald auf Ihrem Bildschirm die ganze Zeit. Und das tötet die Benutzererfahrung. Das bedeutet also nur, dass es angemessen und wieder einmal, Ocean WP und natürlich elementar dimensioniert ist. Danke. Und hier, dass Sie den View-Port konfigurieren müssen. Wie weit draußen, oder wie weit in dir bald sein wollte und dann dieser, um ehrlich zu sein, ist ziemlich zufällig. Es steht „Plug Ins vermeiden“. Nun, wenn ich voran und klicken Sie auf diese, es bringt mich zu einem Entwickler bei Google, die Website kommt, die nicht einmal zu existieren scheint. Ich bin mir nicht sicher, warum Sie Plug Ins vermeiden wollen. Ich denke, das hier ist sehr, sehr zufällig. Aber wenn wir uns Pat Flynn hier ansehen und nach unten scrollen, hat er tatsächlich einen kleinen Fehler hier, und das ist sein Mediaplayer, den er hat, oder besser gesagt, ist ein Flash-Player. Aber diese, ehrlich gesagt, müssen Sie nicht besorgt sein über Recht, es sei denn, es gibt einige Plugging es nimmt eine riesige Menge an Platz oder das ist Absturz Ihrer Website. Aber im Allgemeinen wird es keine Rolle spielen. Das ist nichts, was Sie dagegen tun müssen. Aber Leute, wenn Sie Ocean WP nicht verwenden und Sie keine elementare ER verwenden, was Sie meiner Meinung nach sollten, als das, was Sie tun können, um Ihre Website mobiler reaktionsfähiger zu machen, ist es tatsächlich, hier zu gehen und zu Ihrem Dashboard-Plug Ins und klicken Sie dann auf „Neu hinzufügen “ und suchen Sie dann einfach nach einem MP. Jetzt steht ein MP für beschleunigte mobile Seiten wurde es viel schneller auf Ihrem Handy machen und auch machen es mobil freundlich. Nun, ehrlich gesagt, ich habe dieses oder dieses nicht benutzt, weil ich grundsätzlich immer Elementare benutze. Ich muss das nicht verwenden, weil Elementar es mobil freundlich macht, wie es ist. Aber wenn Sie aus irgendeinem Grund nicht elementar verwenden möchten und Sie auch ein Thema verwenden, das standardmäßig nicht mobil freundlich ist, können Sie eine von diesen verwenden, um Plug Ins wird es mobil freundlich für Sie zu machen. OK, also sind dies alle möglichen Fehler jetzt, da Sie andere Tests wie Google Page Speed Inside und Ping DM verwenden, , die andere Tools sind, um Ihre Website-Performance zu messen Geschwindigkeit, etc. Sie werden feststellen, dass Sie wahrscheinlich in erster Linie unterschiedliche Ergebnisse erzielen , und auch Sie werden wieder verschiedene Empfehlungen bekommen. Ich empfehle, dass Sie nicht zu tief in das gehen, weil Sie sicherstellen möchten, dass Ihre Website schnell ist. Es ist effektiv. Es ist eine hohe Benutzererfahrung, hohe Benutzeroberfläche. Aber gehen Sie nicht über Bord mit dem Ziel für die perfekte Punktzahl, denn am Ende neigt die Art von Besessenheit dazu, nur die Website zu verletzen. Konzentrieren Sie sich auf das, was wichtig ist, und nicht Major bei den Minderjährigen, richtig? Schauen Sie sich die großen Probleme an, beheben Sie sie , machen Sie es besser, holen Sie den Samen und holen Sie das Geld, etc. und dann weiter. Das ist meine Empfehlung, Leute. Gehen wir nun zur nächsten Vorlesung im Kurs über. Und natürlich, wenn Sie irgendwelche Fragen haben, wird in der Q und A sein, aber wir werden etwas sehr Wichtiges in der nächsten Vorlesung als auch ansprechen. So sehen wir uns dort. 13. Unterstützung: Ordnung, Leute, in dieser Vorlesung möchte ich über etwas wirklich, wirklich Wichtiges reden . Und das wird in erster Linie für diejenigen von euch sein, die Blue Host benutzen, richtig? Wenn Sie nicht mit blue Host, Chancen sind, dass dies nicht gelten, können Sie auf die nächste Vorlesung gehen. Aber wenn Sie Blue-Host verwenden, möchte ich über Unterstützungen sprechen. Jetzt haben wir davon gesprochen, dass Blue Hosts nicht der schnellste Host mit den schnellsten Servern sind . - Richtig. Und das ist definitiv wahr. Und wenn Sie auf reine Geschwindigkeit zielen, können Sie für Standortboden gehen, zum Beispiel, die wir wissen, sind schneller als Blue Host. Aber eines der erstaunlichsten Dinge, was der Hauptgrund ist, warum wir Blue Host so sehr lieben, gibt es Unterstützung? Es gibt natürlich mehr Gründe, natürlich mehr Gründe, wie ihre SSL, und sie hören Krypton-Zertifikat. Aber die Unterstützung, die Sie von Blue Host bekommen, wenn Sie nur ein paar Dollar pro Monat bezahlen, ist absolut unglaublich. Jetzt kann ich nicht beginnen, Ihnen zu sagen, wie oft ich eine Website auf blauen Host-Servern auf Lee gebrochen habe , um an die Unterstützung zu gehen, um einige Kerl verbringen manchmal Stunden mit mir helfen, mir dies wiederzuerlangen . Ich sage mir, was ich falsch gemacht habe und korrigiere dann die Fehler für mich und Jungs. Ich nehme Stunden und Stunden frei von der Zeit eines anderen, indem ich ein paar Dollar pro Monat bezahle . Weißt du, wie viel es kosten wird? Wenn du eins zu eins mit jemandem hast und du von unserem bezahlen wirst, das kann sein, wie 70 oder 80 Mäuse auf unserem und hier zahlst du ein paar Off-Box pro Monat und du kannst im Grunde so viele Stunden haben , wie du willst. Daher empfehle ich dringend, wenn es irgendwelche Probleme mit Ihrer Website gibt, gehen Sie zum blauen Host-Support. Nun, wenn Sie Fragen für Ihr Unternehmen haben, wie Sie es zum nächsten Schritt für dieses Zeichen bringen oder, wissen Sie, gehen vorwärts als von Kurs wird in der Q und A sein und Sie haben die 24-Stunden-Regel waren immer im Begriff, innerhalb von 24 Stunden zu antworten. Aber für diese technischen Angelegenheiten kann ich den empfohlenen Blue-Host-Support so stark machen und es ist auch sehr einfach. Alles, was Sie tun, ist Ihre anklickbare wieder. Sie gehen voran und loggen Sie sich ein und klicken Sie dann auf das Fragezeichen hier oben und dann gehen Sie über zum Chat. Du kannst natürlich anrufen, natürlich anrufen, aber ich mach gern die Klappe. Und dann schreiben Sie hier Ihren Namen, Ihre Domain und den Domainnamen ein. Als nächstes erhalten Sie, um Ihr Problem zu beschreiben, und dann werden Sie auf den Schuss mit jemandem gebracht werden könnte ein paar Minuten dauern. Hängt davon ab, wie viele Leute den Dienst nutzen, und das könnte wie ein No Brainer erscheinen. Aber ehrlich gesagt, ah, viele Leute bekommen diesen Service, aber sie benutzen die Unterstützung nicht richtig. Und wieder einmal habe ich so viele Stunden in der Unterstützung verbracht, dass es mir so sehr bei Problemen beim Lernen und Verstehen geholfen hat . Ich kann das nicht genug empfehlen. Und deshalb empfehle ich dringend, nicht nur Blue-Host zu verwenden, sondern auch ihre Unterstützung verwendet . Okay, also keine Panik, wenn Sie irgendwelche Probleme mit Ihrer Website haben. Wenn es etwas gibt, das du nicht verstehst, funktioniert es nicht. Gehen Sie weiter und nutzen Sie die Blue-Host-Unterstützung. Jetzt kann Blue Host nur für die Blue Host-Dienste sprechen. Wenn es Plug Ins usw. gibt , wirst du stattdessen mit uns in der Q und A reden wollen, weil sie nicht für all diese Dinge verantwortlich sein können. wirst du stattdessen mit uns in der Q und A reden wollen, weil sie nicht für all diese Dinge verantwortlich sein können Aber was ich sagen will, ist, dass Sie eine Menge Unterstützung haben. Ihr blauer Schlauch , der wirklich Experten für die technischen Angelegenheiten sind. Alles. Blauer Schlauch. Und dann haben Sie uns in der Q und A für alles über die Plugs Ins für das Geschäftszeichen Plugs , etc. Also nehmen Sie weg Nachricht Jungs verwendet, um blaue Host-Support Sie gekauft Wenn Sie Blue Hose gekauft haben, Sie haben es enthalten. Nutzen Sie es gut. Du wirst es nicht bereuen. Okay, sehen Sie ihn bei der nächsten Vorlesung. 14. Mobiles Design UI: Alles klar, meine Freunde, machen wir die Benutzeroberfläche absolut schön für alle Leute, die unsere Website auf ihrem Handy besuchen. Okay, das erste, was wir machen, hat die Größe unseres Logos geändert weil wir uns von früher erinnern, dass es einfach zu groß war. Wir bekommen zwei Reihen, wenn es um die Speisekarte und das Logo ging. Also, was ich tun werde, ist hier oben angefertigt zu klicken, und dann werde ich hier oben klicken, was mich zum Header und dann Logo bringen wird. Da gehen wir. Und jetzt werde ich voran gehen und sehen, wie die Website auf unserem Handy aussieht, schreibt ich klicke hier unten, und wir können sehen, dass wir dieses Problem haben, richtig? Das Logo ist also einfach zu groß. Das Menü wird auf die Reihe darunter gelegt und wir bekommen all diesen verschwendeten Platz und der ganze Raum ist absolut Druck, wenn es um alles geht, aber noch mehr. Einige Handys, weil die Bildschirme so klein sind. Wie Sie auf dem Desktop sehen können, ist diese Größe tatsächlich 280. Und wenn ich hierher zum Handy ziehe. Sie können auch dort hinuntergehen. Das wird auch auf 280 sein. Aber das wird zu groß für uns sein. Also werden wir weitermachen und das etwas ändern. Sie können sehen, dass, wenn ich ein 280 wie vorher bin, einfach zu groß ist. Wir gehen runter. Wir werden gehen. Da gehen wir. Also gehen wir mit, sagen wir, 200. Jetzt können wir sehen, dass wir unser Logo und unsere Speisekarte nebeneinander sind. Und wir sparen so viel Platz. Sehen Sie sich das noch einmal an. Sehen Sie sich Wenn ich vergrößere, bekommen wir all diesen verschwendeten Platz, gehen Sie zurück auf 200 und sehen viel besser aus. Also bin ich super glücklich damit. Ich gehe einfach weiter und klicke auf Veröffentlichen. Da gehen wir. Jetzt gehen wir zurück in L, einen Mentor. Na gut, Leute, die sind wieder in Ich. ein Mansour. Und das erste, was ich tun werde, ist, wieder nach unten zu gehen, klicken Sie auf einen Responsive-Modus und ändern Sie ihn in den mobilen Modus. Da gehen wir. Und ich bin super zufrieden damit gerade jetzt mit dem Logo und die Speisekarte sieht perfekt aus. Wir können sogar auf das Menü klicken. Mal sehen, wie das aussieht. Sieht wirklich nett aus. Um ehrlich zu sein, ich liebe das. Also werden wir hier ein paar Änderungen vornehmen, wie wir jetzt sehen können, dass ich denke, dass dieser Text hier ein bisschen mehr Platz braucht . Ich werde das ändern. Also werde ich hier klicken, und dann werde ich zum Stil übergehen, und wir werden zur Typografie übergehen, und dann werden wir hier auf die Zeilenhöhe gehen, und wir gehen einfach weiter und erweitern das ein wenig Bit. So etwas. Da gehen wir. Sie können sehen, dass es wächst. Sie tauschen die gesamte Schnittstelle aus. Vielleicht ist das ein bisschen viel. Da gehen wir. Also wollen wir immer noch diese Dinge im Hinterkopf behalten, dass wir den Learn More Button haben leicht zugänglich ist, was wirklich, wirklich nett und oh, so wichtig ist. Gleichzeitig die Speisekarte etwas schwieriger zu erreichen, da ist die Speisekarte etwas schwieriger zu erreichen, da der Daumen dort nicht so leicht hinaufgeht. Aber hier müssen Sie die Wahl treffen. Du wirst das Menü leicht zu erreichen haben, und das kostet etwa 15% des Bildschirms. Meiner Meinung nach ist das absolut nicht wert. Es ist also viel besser, das Menü ein wenig höher zu stellen und ihnen mehr vom Inhalt zu geben . Richtig? Also gehen wir hin. Jetzt ist hier mehr Platz dazwischen. gefällt mir, vielleicht sogar ein bisschen weniger. Eigentlich kann die Zeilenhöhe ein bisschen mehr sein. Sie dort ist unser Sweet Spot. Da gehen wir. Also werde ich nach unten scrollen und sehen, ob es noch etwas gibt, dass ich kein großer Fan bin. So können wir hier zum Beispiel sehen , dass dieser Text ziemlich aufrecht wird, aber es ist immer noch sehr wichtige Informationen. Was ich also gerne tun möchte, ist das Aussehen dieses gesamten Abschnitts zu ändern. Also werde ich voran gehen und auf den Editierbereich hier klicken, und ich werde weitermachen und einige von der Polsterung entfernen, weil Sie sehen können, dass hier viel Platz verschwendet wird. Es ist eine Menge verschwendeter Platz hier, und das sah wirklich gut aus auf dem Desktop, aber das sieht nicht ganz so schön auf dem Handy aus. Das bedeutet nur, Druckraum zu verschwenden. Also, was ich vorgehen und tun werde, ist zu überprüfen, wie viel von der Polsterung tatsächlich oben hier gerade jetzt ist , so dass wir diese Polsterung den Raum zwischen den verschiedenen Abschnitten halten können , aber dann die Polsterung an den Seiten entfernt. Okay, um das zu tun, klicke ich auf die Polsterung und gehe dann auf den Desktop und wir können sehen, dass es zu 50. Und was das bedeutet, ist, dass diese, obwohl es keine Zahlen gibt, diese auch automatisch auf 50 gesetzt werden. So funktioniert der automatische mobile Responsive Modus. Es setzt nur die gleichen Zahlen. Nun, die Website ist schön, auch auf einem Handy, aber es nüsse vollständig optimiert. Also, was ich tun werde, ist, diese Werte zu lösen und dann werde ich die Spitze auf 50 so lassen . Wir haben also immer noch die gleiche Menge an Platz, um das Syrien so zu entfernen. Und dann klicke ich einfach auf und schreibe einen hier drin und einen hier drin, einen hier drin. Nun, das sieht schon viel besser aus, aber ich denke immer noch, dass die Polsterung hier ein bisschen zu viel für das Handy ist. Also werde ich voran gehen und verringern, um sagen wir, 25 könnte ein bisschen besser aussehen. Wenn wir also nach unten gehen und nach oben schauen, können wir sehen, dass dies das Beste ist. Eigentlich taucht hier oben auf, und das gefällt mir. Du kommst also in diesen ganzen Bildschirm, richtig, und wir bekommen diesen Text unten. Nun, es gibt zwei Dinge, die wir tun können. Entweder können Wir das so lassen, wie es ist, und wir können bekommen. Dies ist die beste und die meisten nimmt auf unserem Telefon. Oder wir können tatsächlich die Größe von diesem Hintergrund erhöhen, die jetzt nach unten scrollen. Ich bin wirklich glücklich damit. Sie können sehen, dass hier viel weniger Platz verschwendet wird, und wir haben immer noch dieses wunderbare Zitat hier. Nun, ich werde immer noch das ganze über dem Faltabschnitt mit diesem Hintergrund abdecken wollen, also werde ich hier rüber gehen, auf den Abschnitt klicken und dann auf die minimale Höhe übergehen, richtig? Und ich werde es ein bisschen erhöhen, einfach so. Da gehen wir. Jetzt können wir sehen, dass es die gesamte erste Partier abdeckt. Das wirkt sich auf den Rest der Beschlüsse aus. Jetzt möchten wir vielleicht wieder hierher gehen, zur Typografie gehen und die Zeilenhöhe ein wenig ändern. Da gehen wir, sehen besser aus und vielleicht ein bisschen mehr Abstand zwischen diesen Spalten. Richtig? Also lasst uns gehen, um hier oben zu stylen, und lasst uns zur Typografie übergehen und ein wenig mit den Zeilenhöhen spielen . Da gehen wir. So etwas. Also, das sieht jetzt wirklich gut aus. Ich möchte vielleicht noch etwas mehr gebrauchen. Da gehen wir. Business leicht gemacht Briefe zeigen Ihnen, wie. Okay, Okay, wenn wir uns den Hintergrund ansehen, können wir sehen, dass der Mond tatsächlich vertuscht. Das dauert ein bisschen. Was wir tun könnten, ist die Position außerhalb des Hintergrunds zu ändern, um zu sehen, ob wir einen besseren Blick bekommen . Aber ich bin wirklich sehr glücklich darüber. Also gehen wir weiter und scrollen nach unten und wir können sehen, dass das Zitat Haar immer noch wirklich gut aussieht . Jetzt haben wir den Raum dazwischen entfernt. Eigentlich haben wir hier vielleicht ein bisschen viel hinzugefügt, aber ich denke, es ist gut. Es wird auch von der Auflösung auf dem Handy abhängen. Also werden wir nach unten scrollen. Da steht: Holen Sie sich digitale Marketing-Hacks kostenlos, oder? Holen Sie sich die faulen Marketing-Hacks. Und das sieht eigentlich schon richtig gut aus. Nun, es gibt ein paar Dinge, die Sie vielleicht ändern möchten. Jetzt klicken Sie einfach hier Art von aktualisierten Teil. Es gibt Veränderungen, weil wir uns um die verschiedenen Bits bewegen. Und ich mag diese große Zeit, dass wir diesen vollen $99 Wert genau hier haben. Melden Sie sich unten an, und wir werden es Ihnen zuschicken lassen. Ok. Sieht wirklich gut aus. Super glücklich darüber. Was ich vielleicht tun möchte, denn jetzt haben wir ihren Rücken , der ziemlich dunkel ist, gegen unsere dunklen Takes aufgestellt, was hier richtig gut funktioniert. Aber nicht so gut hier unten. Zum Beispiel möchten wir diesen Teil tatsächlich fett machen. Richtig? Also werde ich hier reingehen, ich wähle das aus, und ich werde es mutig machen. Jetzt ist es ein bisschen einfacher zu lesen und zu sehen, und ich grabe dieses Design dort. Wir gehen, und diese Form sieht super nett aus. Wir wissen, dass es tatsächlich Seite an Seite auf dem Desktop auf der mobilen Version gibt unten , wo wir auch wissen, dass der Daumen leicht erreichen wird, um auf meine erste Nacht per E-Mail klicken und auch leicht zu erreichen, um zu klicken. Schicken Sie mir den Hack. Also ist das eigentlich wirklich gutes Design? Ja. Wir gehen weiter und scrollen nach unten und diese Luft sieht absolut schrecklich aus. Das ist das nicht gut. Und das liegt an der Polsterung, die wir im Padding verwenden. Sie machen auf dem Desktop viel Sinn. Sie sehen auf dem Desktop schön aus, aber sie übersetzen nicht gut auf die Handy-Version. Also, was ich hier tun werde, ist anfangen, diese ein wenig zu bearbeiten. Also werde ich anfangen, indem ich auf die Bearbeitung klicke, den Abschnitt hier oben, und beginne ein wenig mit dem Patty herumzuspielen. Ich werde zum Fortgeschrittenen überziehen. Und jetzt sind wir im Handy-Modus. Und zuerst müssen wir schütteln, was die Polsterung derzeit auf dem Desktop ist, und wir können sehen, dass sie auf 70 eingestellt ist. Richtig? Ok. Es ist auf 17 eingestellt. Jetzt gehen wir rüber. Zurück zum Handy. 70 könnte hier ein wenig übertrieben sein, also werde ich nur diese noch einmal, weil ich die Polsterung auf der Oberseite will. Und ich werde das auf 50. Oder lasst uns mit 20 gehen. Lasst uns diesmal mit 40 gehen. Okay, also werden wir das vorher einstellen. Sie wollten auch diese Größe ein wenig ändern, also sieht es jetzt besser aus für diese. Vielleicht wollen wir sie auf einen setzen. Wir konnten sehen, dass sie sich verändern, wenn wir miteinander verbunden sind. Also werden diese tatsächlich begonnen, sich ein wenig zu korrigieren. Wenn wir nach unten scrollen, können wir sehen, dass wir einen Kurs bekommen, der den gesamten Bildschirm auf einmal abdeckt. Und ehrlich gesagt, Leute, das sieht ziemlich nett aus. Das ist ziemlich solide. Also alles, was ich wirklich tun musste und mit diesem Hintern und auch. Also alles, was ich wirklich tun musste, war, dies zu verknüpfen und das änderte die Polsterung für die Handy-Version und alles sieht schon viel besser aus. Also grabe ich das jetzt definitiv. Was wir tun könnten, ist oder sollten, sogar ist verändert. Die Überschrift hier The Header, weil er absolut schrecklich aussieht und was wir anfangen werden , indem wir uns ändern, ist die Größe, weil sie in dieser Größe nicht gut aussehen. Also lasst uns weitermachen und ein wenig damit herumspielen. Wolltest du jetzt ein oder zwei Reihen haben? Ich wollte auf zu sein, wie diese meistverkauften Kurse. Also, jetzt wird es viel mehr Sinn machen, richtig, weil man es lesen kann, und es gibt weniger Platz dazwischen, und das sieht viel besser aus. Ich ziehe es vor, mit 50 oder 70 in der Polsterung zu gehen, wenn es um Desktop um 22 14 geht. Wenn es um Mobile geht, hängt vollständig vom Design ab, aber hier denke ich, es sieht wirklich gut so aus. Wir haben also die meistverkauften Kurse, und dann werden wir den Kurs so einrollen lassen. Die Tasten oder es gibt einen Kurs nach dem anderen. Wir haben ein wenig Platz an den Seiten, aber das ist nur ein guter Teil. Das Design sieht Pracht nach unten scrollen. Wir haben die Ansicht, alle Kurse, die so ziemlich den gesamten Bildschirm abdecken und dann unten unten hatten die Datenschutzrichtlinie in den Allgemeinen Geschäftsbedingungen. Also, Leute, Moment bin ich wirklich glücklich mit diesem Design, richtig? Das sieht wirklich gut aus. Wirklich nett. Wir haben hauptsächlich den Abstand zwischen den Buchstaben und der Polsterung geändert. Wenn es darum geht, dein Design zu brechen, wird es normalerweise die Polsterung sein. Und das wird sehr individuell für Ihre Website sein. Was meinst du? Sieht nett aus, etcetera. Jetzt mache ich das sehr intuitiv, was bedeutet, dass es keinen Plan hinter dem gibt, was ich tue. Oder besser gesagt, es gibt keine Vorbereitung auf das, was ich tue. Ich entscheide mich nur, was ich denke, sieht nett aus und fragte, Ich gehe und ich weiterhin die Website zu unterzeichnen. Ich komme vielleicht zurück und mache einige Änderungen, aber im Moment denke ich, dass das wirklich gut aussieht. Wir haben die freie in einer eigenen Reihe, was ich denke, sieht ziemlich schön aus. Aber was wir auch tun könnten, ist diese Kopfzeile geändert, gehen Sie zu Stil Typografie und spielen Sie ein wenig mit der Größe, zum Beispiel, wird gut aussehen, wenn sie auf drei Braten sind. Was ist mit zwei Rose, zwei Rosen zu klein, drei Reihen Sieht OK aus, aber eigentlich denke ich, das könnte ein bisschen besser sein. Also werde ich sie in drei Reihen behalten. Sie würden gehen, und das gefällt mir wirklich. Also, Leute, so machst du es. Alles, was Sie tun müssen, ist zunächst, wenn Sie ein Problem mit dem Menü haben, tun, wie wir es am Anfang des Kurses getan haben, dann gehen Sie zu L. Ein Mentor, gehen Sie in dann gehen Sie zu L. Ein Mentor, den Responsive-Modus und wechseln Sie zu mobil. Und dann werden die wichtigsten Dinge, die Sie unseren Wunsch ändern wollen, der Buchstabenabstand, der Abstand zwischen den Buchstaben, wie wir es am Anfang hier getan haben, auf diese Größe aus den Takes, die Kopfzeilen, etcetera, und drei die Polsterung. Jetzt ist die Polsterung ein großer Brecher aus schönen Designs. Wenn Sie also verknüpfen, ändert sich die Polsterung einfach die gesamte entscheidende große Zeit. Also bin ich wirklich glücklich mit diesem Kerl. Und jetzt, keine Sorge, das wird sich nicht auf Ihr Desktop-Design auswirken. Was im Handy-Modus passiert, bleibt im Handy-Modus. OK, mobile Motive für den mobilen Modus und Desktop ist für den Desktop, oder? Also hat sich hier nichts geändert. Wir haben immer noch so schön schön. Dieses Schild. Was wir jetzt machen werden, ist zur nächsten Vorlesung zu gehen. Wir werden über das Tablet-Design sprechen. Ok? Das ist auch sehr wichtig, was zu tun ist. Aber bei weitem sind primäre Desktop- und Mobiltelefone, mit einem zusätzlichen Schwerpunkt auf Handy. Denn mehr als die Hälfte Ihres Traffics wird von dort kommen. Wenn Sie irgendwelche Fragen haben, wird in der Q und A so sehen in der nächsten Vorlesung, Jungs. 15. Tablet Design UX: Okay, Leute, Leute, lasst uns über das Tablet sprechen, das für die Benutzererfahrung entwickelt wurde. In der nächsten Vorlesung werden wir uns auf das Tablet konzentrieren, das für die Verwendung oder Schnittstelle entwickelt wurde. Aber das erste ist das Erste. Was ist so besonders an einem Tablet zu unterschreiben? Nun, wie wir es wissen, sieht Tablet jetzt so aus. Sie tun gemeinsame unterschiedliche Bildschirmgröße, die wir wirklich kleine Tabletten haben können. Wir können wirklich große Tabletten haben. Wir können vertikal haben, und wir können horizontale Tabletten haben. Was ist interessant zu wissen, obwohl, obwohl, im Gegensatz zu den anderen Geräten wie Mobile ist in der Regel und Desktop ist, dass sie zwei sehr häufige Modi aus mit ihnen haben . Jetzt. Die 1. 1 wird eigentlich die Porträtausrichtung genannt, und das ist, wenn Sie es in dieser Art von vertikalen Modus halten, wie wir auf dem Bild sehen . Moment ist der zweite Weg, den Sie es auch verwenden können, es so zur Seite zu stellen, und dies wird als Landschaftsausrichtung bezeichnet. Und das ist auch sehr wichtig zu wissen, denn je nachdem, wie sie ihr Tablet verwenden, wird das das Design von Ihrer Website beeinflussen. Jetzt ist es wert, das zu wissen, wenn es um mobile Benutzer geht. Etwa 90 denken, es ist 93% aller Benutzer tatsächlich verwenden es im Portrait-Modus, was bedeutet, dass sie das Telefon aufrecht mit ihrer einen Hand so halten. Nun, wenn es um die Tabletten geht, sind die Partituren ein wenig anders. Zunächst einmal, je kleiner das Tablet ist, desto wahrscheinlicher ist es, im Hochformat verwendet werden, richtig, richtig, so dass je größer der Bildschirm dann wird, mehr kommentiert, ist, dass die Leute es in einem Landschaftsausrichtung. Jetzt gibt es zwei gemeinsame Hersteller. Das ist Android, richtig? Die Android-Versionen der Tabletten und dann haben wir Apple und Äpfel neigen dazu, viel größer als Androids zu sein . Apple-Benutzer sind also die einzigen Benutzer, die tatsächlich mehr Querformat als das Porträt verwenden . Aber hier ist der Vorbehalt, Jungs, die die meisten bei weitem die Gewohnheit Lot tatsächlich Android-Tabletten. Das bedeutet auch, dass der Gleichtaktmodus mit ihrem Tablet der Portraitmodus ist. Also werden wir das jetzt für unser Design im Hinterkopf behalten. Auf Lee, 4% Rabatt auf den Verkehr zu einer Website kommt von der Tablette ist es wert zu wissen, dass, wenn Menschen ihren mobilen Verkehr berechnen. Sie enthalten in der Regel den Tablet-Verkehr in der mobilen Umfrage, nicht wahr? Also die vorherige Vorlesung, die wir mit dem mobilen Verkehr durchgemacht haben, der normalerweise das Tablet enthalten wird . Aber der Tablet-Traffic ist allgemein so klein, dass es keinen großen Unterschied macht, ist immer noch über die Hälfte des gesamten Verkehrs. Es verwendet Handy, was bedeutet, dass Ihr Handy anstatt nur die Tablets oder den Desktop. Aber ich habe noch nie eine Studie gesehen, die jemals gezeigt, dass mehr als 10% des Verkehrs wert Tabletten . So wissen wir, dass ein sehr winziger Teil des Traffics zu Ihrer Website allgemein von der Tablette kommen . Aber hier ist, wo es sehr interessant wird, weil sie die doppelte Retentionszeit auf Tabletten im Vergleich zum Mobil Recht haben . Und das macht Sinn, weil Menschen, die auf ihren Handys auf eine Website gehen, viel eher geneigt sind , nach etwas zu suchen, das durchblättern und dann zurück geht. So sind die Bounce-Raten auf Mobilgeräten viel höher als auf Tablets, in der Regel auf Tablets. Die Leute sind eigentlich auf der Suche nach Unterhaltung oder sie wollen etwas lesen. Sie sind mehr abgewickelt. Was bringt mich auch zum nächsten Punkt, der ist , dass 60% aller Menschen, die ein Tablet verwenden, sie tatsächlich montieren ihr Tablet richtig? Das bedeutet, dass sie ihre Tablette auf etwas setzen, so dass sie beide Hände auf die anderen 40% verwenden können . Sie werden immer noch das Tablet betrachten und dann mit ihrer älteren Hand den Talbot verwenden und durch scrollen und klicken etcetera. Das bedeutet also, dass etwa 100% aller Tablet-Nutzer beide Hände benutzt haben. Und das macht viel Sinn, wenn man die Größe von diesen Dingern bedenkt. Aber das ist gut für uns zu wissen, denn das bedeutet, dass die Menschen im Gegensatz zu Handys eine einfachere Zeit haben werden, um alle Orte auf dem Bildschirm zu erreichen, wo es auf einem Handy ist. Es wird leichtere und schwierigere Orte geben, auf die man erreichen kann. Das bedeutet nicht, dass Sie mit den Designs völlig freie Reichweite haben. Sie werden immer noch mehr sein, wenn sie nicht zugänglich sind. Dies signiert, wo Sie Ihren Aufruf zu Action-Buttons setzen, wo Sie Ihre wichtigen Informationen setzen, etc., um Ihre Website für die Konvertierung auf Handys zu optimieren, auf Tablets und auf dem Desktop, sie sind alle drei verschiedene Geräte und Schnittstellen und natürlich Benutzererfahrungen. Jetzt, mit einem Tablet, im Gegensatz zu einem Handy, haben Sie tatsächlich viel mehr Platz, oder? Aber die eine Sache, die hier gemeinsam zu halten, dass es ein sehr häufiger Fehler ist, wenn es um die Benutzererfahrung geht . Dieses Zeichen für Tablet ist es die Menschen setzen zu viel Müll auf ihrer Website. Für dieses Design ist weniger noch mehr. Jetzt müssen Sie wirklich vorsichtig sein, wenn Sie sich auf Benutzererfahrung und Benutzeroberfläche für ein Handy konzentrieren , weil Sie nicht so viel Basis hier haben. Die Geschichten anders haben tatsächlich ein bisschen mehr Platz, aber es ist einfach, zu viel Müll auf dem Bildschirm zu setzen, eine Überlastung von Inhalten und Informationen zu bekommen. Halten Sie es sauber, halten Sie es wirklich schön und sauber und denken Sie es wie ein zugänglicher Teil von einem Handy . Aber Sie müssen es immer noch anders aussehen und gut aussehen lassen, aber nicht überladen. Verwirren Sie es nicht. Legen Sie nicht zu viel unnötiges Zeug. Halten Sie es sauber, halten Sie es zugänglich und priorisieren Sie Ihre Inhalte. Und schließlich, obwohl die Mehrheit der Verwendungen in der Portraitausrichtung verwendet wird, was bedeutet, dass sie es vertikal auf ihren Tablets halten, wenn sie es verwenden müssen Sie immer noch sicherstellen, dass Sie für die Landschaft Orientierung? Und was ich damit meine, ist, dass zum Beispiel denken könnte, man zum Beispiel denken könnte,dass das Erstellen einer Liste wie dieser eine gute Idee ist, weil es wirklich schön aussieht . Sie können durch die Liste mit Ihren Inhalten blättern und es sieht gut aus. Nun, das Problem mit dieser Liste ist, dass, wenn Sie von einem Hochformat in den Querformat wechseln, es einfach nicht mehr so schön aussieht. Wir können sehen, dass es eine Menge Platz auf der rechten Seite gibt, die entweder mit nichts gefüllt sein wird oder B wird mit einem Haufen von Inhalten gefüllt werden, die nur Inhalte überladen werden . Also diese Art von Liste, das Zeichen wird einfach nicht funktionieren jetzt. Wenn wir ein anderes Design verwenden, ein klassisches Blockdesign, zum Beispiel, wo Sie Ihre großen Inhalte in der Front haben und dann haben Sie kleinere Stücke unten mit, zum Beispiel, Ihre letzten Beiträge mit Ihre Artikel mit Tutorials oder Ihre Produkte, was auch immer es für Sie ist, es wird wirklich gut aussehen in einem Landschaftsmodus richtig, weil wir sehen können, dass es wirklich gut aussieht dort auf dem Bildschirm als auch. Und wenn du es ins Porträt umdrehst, wird es immer noch richtig gut aussehen. Es wird nur ein bisschen anders aussehen. Es wird nur allgemein, wenn es ein bisschen mehr und ein bisschen kleiner ist, aber es wird immer noch richtig gut aussehen, und Sie könnten das Schild ändern wollen. Da ist gut. Statt also sechs verschiedene Produkte auftauchen zu lassen, vielleicht nur, wenn ich sechs zeige, weil Sie sie größer machen wollen , und so weiter. Aber der Punkt ist, Sie müssen sicherstellen, dass Sie den gefragten Landschaftsmodus berücksichtigen. Nun, also verwenden Sie nicht das Listendesign. Nun gehen wir zum nächsten Vortrag über und wir werden unsere Website für Tablets anpassen, obwohl es nur 4% des Traffics ist, 4%, wenn Sie Tausende und Tausende von Besuchern haben, das wird groß, vor allem, wenn wir wissen, dass wir die Beibehaltung auf der Website verdoppelt haben. Für diese Benutzer, und Bindung wissen wir bedeutet, wie lange Menschen bleiben und interessanterweise mobile Benutzer. Sie ziehen es vor, für etwa vier Minuten im Durchschnitt zu bleiben, während Tablet-Benutzer dort zufällig zwei bis zu acht Minuten und über sehr interessante Statistiken bleiben. Gehen wir also zur nächsten Vorlesung über und beginnen mit dem Entwerfen von Tablets. 16. Tablet Design UI: Alles klar, Leute. In diesem Vortrag werden wir uns auf das Benutzerdesign auf unserer Homepage und Website für Tablets konzentrieren . Okay, also kennst du den Bohrer. Wir werden elementar benutzen. Wir gehen weiter und gehen in den Responsive-Modus und klicken auf Tablet. Und hier sind wir jetzt, ich werde nicht verrückt auf diesen hier. Ich werde sehr intuitiv sein. Und eigentlich nicht zu viel mischen, wenn es nicht nötig ist. Denn denken Sie daran, wir werden eine Menge Seiten zu optimieren und zu entwerfen haben, vor allem für Desktop und sehr viel vor allem für mobile und Tablet-PCs. Du willst es gut aussehen lassen, aber trotzdem 4% Rabatt auf deinen Verkehr, richtig? Also machen Sie es gut aussehen, aber gehen Sie nicht verrückt hier für das Design. Nicht Major in den Minderjährigen ist meine Meinung. Also lasst uns voran gehen und das überprüfen. Nun, ich bin eigentlich ziemlich zufrieden mit diesem hier. Ich genieße das Design. Wir kommen direkt auf den Punkt. Am Anfang müssen wir mehr lernen. Wir haben den nächsten Abschnitt. Es gibt nichts, was ich intuitiv wirklich ändern möchte. Also werde ich nach unten scrollen und das Handgelenk überprüfen. Ich denke, das sieht wirklich gut und schön aus, jetzt diese. Ich bin nicht so groß von einem Fan von. Wir können sehen, dass hier drin viel Platz los ist. Wir können sehen, dass hier drin viel Platz los ist, also macht für mich nicht zu viel Platz. Was ich vorangehen werde, ist eigentlich die Größe von diesem Hintergrundbild zu hören. Nun, ich denke, es ist wirklich schön und schön, weil es den gesamten Bildschirm so bedeckt. Aber ich denke immer noch, dass zwischen den Abschnitten etwas zu viel Platz ist. Also geh ich weiter und klicke hier rauf, und dann werde ich zum Stil übergehen. Da gehen wir. Und dann werde ich voran gehen und gehen, um nach dem Aufenthalt im Layout zu liegen, eher, eher, und ich werde anfangen, mit der minimalen Höhe herumzuspielen. Richtig. Also werde ich voran gehen und sehen, was gut aussieht, so etwas. Da gehen wir. Wenn wir also jetzt durch das scrollen, können wir sehen, dass es nicht den gesamten Bildschirm bedeckt, wie es vorher getan hat, was wirklich schön ist. Ein Special auf dem Desktop und auf dem Handy, meiner Meinung nach. Aber wir müssen auch berücksichtigen, ob wir das Portrait oder den Querformat verwenden. Jetzt möchte ich ein bisschen direkter auf den Punkt hier sein. Wenn wir also nach unten scrollen, bewegen wir uns tatsächlich über. Wir haben die E-Mail offen, dass wir umziehen oder zu den meistverkauften Kursen. Vielleicht ein bisschen größer. Da gehen wir. Also haben wir nicht die gleiche verrückte Menge an Platz, aber es ist da, wo wir gehen. Okay, das ist der Sweet Spot. Also nichts zu tun, um den Text zu hören, sieht gut aus. Alles sieht so aus, wie es sollte. Wirklich glücklich darüber. Was jetzt? Wir könnten auch voran gehen und tun, wie wir in der mobilen Version getan haben, ist dieser Teil fett machen. Richtig? Also gehen wir einfach hier rein und klicken auf das B, machen diesen Teil mutig, weil wir auf sie zurück hier drinnen sind. Das ist also plötzlich einfacher zu lesen. Wirklich graben das so nach unten scrollen? Würden Sie unsere Kurse hier haben? Nun, es sieht ziemlich nett aus, um ehrlich zu sein. Nun, ich denke, es geht etwas zu viel Weiß um diese herum. Also werde ich voran gehen und die Polsterung für die weißen entfernen, die in den Spalten erscheint. Also, was ich tun werde, ist auf ein Paar für die Bearbeitung klicken und diese Spalte bearbeiten, und dann werde ich gehen, um hier voranzukommen. Und jetzt, um das richtig zu bearbeiten, was ich tun muss, ist zu wissen, was die ursprünglichen Größen organisch hier kommen Desktop und wir können sehen, dass die Polsterung 50 oder? klopfte seine 50. Also gehen wir zurück zum Tablet. Wenn ich 50 schreibe, wird nichts passieren, weil das das Original ist. Es taucht einfach nicht hier auf. Ich werde wahrscheinlich etwa die Hälfte gebrauchen wollen, also werde ich 25 so etwas schreiben. Ich werde wahrscheinlich etwa die Hälfte gebrauchen wollen, Es braucht also nicht ganz so viel Platz, wie sie waren. Ich mag dieses Design, also werde ich nur auf dieses klicken. Gehen Sie voran, gehen Sie über zum Padding und schreiben Sie 25 hier. - Schwellen. Mach das Gleiche hier. Hier drüben. Erweiterte Polsterung 25. Da gehen wir. Etwas sauberer. Ich grabe diesen Blick viel mehr. Schön. Direkt auf den Punkt. Nun würde ich es vorziehen, zwischen diesen Kursen etwas mehr Platz zu geben. Was ich also voran machen werde, ist tatsächlich die Marge zwischen den Kursen zu erhöhen und der einfachste Weg, das wirklich zu tun. Um ehrlich zu sein, klicken Sie hier, um die mittlere Spalte zu bearbeiten. Ich werde gehen, um voranzukommen, und dann werde ich ihre regionalen überprüfen. Diese Marge ist 30. Okay, ich weiß, das geht zurück. Stellen Sie sicher, dass ich noch hier bin. Und jetzt werde ich so etwas wie Safe 50 50 schreiben. Könnte gut sein. Okay, vielleicht sogar 70. Da gehen wir. Also denke ich 70. Nun, vielleicht ist das vorbei, es ein bisschen zu tun. Ich werde 50 so machen. Ich denke, das sieht ganz schön aus. Es ist also ein bisschen mehr Platz los. Und auch, diese Box wird etwas kleiner, also werde ich das auf alle Spalten anwenden. Sie gehen rechts Rand 50. Und ich werde auch hier die Marge schreiben. Fünfziger, ich trage zwei Vögel mit einem Stein. Dieser schreckliche Ausdruck übrigens. Und ich mache ein bisschen mehr Platz dazwischen und mache dies auch kleiner. Also gräbe ich das. Ich finde, das sieht wirklich schön aus. Ich denke, es braucht direkt auf den Punkt. Ich bin ein großer Fan davon. Sieht sehr schön aus, ehrlich und stolz zu sein, es zu sehen. So wurde das mein Tablet für die Benutzeroberfläche entwickelt. Jetzt wird es an Ihnen liegen, wie Sie sich entscheiden, Ihre Entscheidung zu treffen. Es ist ein völlig Individuum. Behalten Sie die Benutzererfahrung im Hinterkopf, richtig, denn sie werden das umdrehen. Es wird anders aussehen, aber wir verwenden keine Liste. Zum Beispiel wird das immer noch gut aussehen. Das wird bei Mäusen immer noch gut aussehen. Halten Sie sie in der gleichen Reihe. Wir werden sehen. Aber jedenfalls wird nichts zu verrückt aussehen, weil wir das Design im Auge behalten haben. Nun, das letzte, was ich Ihnen zeigen möchte, ist, dass, wenn Sie zu einem Tablet wechseln, um zu signieren, oder vielleicht sogar zu einem mobilen Design, was manchmal passieren könnte, ist, dass die, wenn Sie mehrere Spalten verwenden, in einem Abschnitt sie könnten die Plätze wechseln. Nun, es ist nichts in Sicht von dieser Spalte, richtig, denn wenn Sie sich erinnern, als wir bei der Scheibenabtreibung waren, haben wir tatsächlich einen zusätzlichen Anruf sie hier benutzt, um dies mehr nach links. Also dieser Kolumnist leer und das ist perfekt für Desktop. Wenn du auf Tablet gehst, legt es unten unten. Okay, jetzt, weil wir ein Tablet benutzen und in der Reaktionsfähigkeit des Handys verwendet wurden. Sind das Stapel? Richtig? Wir können sehen, dass sie stapeln, weil das oben ist. Das ist unten. Wenn wir also Inhalte hier drin hätten, werde ich nur hier zeigen, sagen wir, dass wir diese SMS hier hatten, aber sie stapelten sich in der falschen Reihenfolge, richtig? haben wir nicht gemocht. Alles, was wir tun müssten, um dies richtig zu stapeln, ist Abschnitt ein Paar zu bearbeiten und dann zu fortgeschritten und dann unten bei ansprechender hier. Und diesmal gibt es etwas, das Reverse-Säulen für das Tablet sagt. Also, wenn Sie diese fühlen würden, dann würden sie rückwärts für das Tablet und für das Handy. Richtig? Jetzt können wir sehen, dass dieser hier tatsächlich an der Spitze ist. Das hier ist unten, und alles, was wir brauchen, um es zu tun, ist, diese umzukehren und diese oft zu setzen, werden sie wieder in ihre ursprüngliche Position wechseln. Und wieder, das liegt daran, dass die Reaktionsfähigkeit wird eine Menge von Ihren Inhalten zu stapeln, die schön aussieht, um ehrlich zu sein, sehr flüssiges Design. Es hilft uns sehr, aber sie haben nicht immer so gestapelt, wie wir es wollen. Tolle Job-Jungs. Jetzt wissen wir über die Benutzererfahrung und Benutzeroberfläche für Desktop, für Mobil und für Tablets. Es ist Zeit, weiterzumachen und mit der Bearbeitung und Gestaltung weiterer Seiten auf unserer Website beginnen. Und jetzt werden wir anfangen, Vorlagen zu verwenden und zu erforschen, wie wir diese anpassen können, um Seiten einfacher, schneller und abseits von Kurs zu erstellen und sie absolut atemberaubend aussehen zu lassen. Siehst du in der nächsten Vorlesung, Leute.