Entspannt zu Google PageSpeed 100% (Lighthouse ), damit es keine Qual wird. Diskussionen, ob die Erreichung von Google PageSpeed Insights Werten mit 100% anzustreben sind, gibt es viele. Google ist jedoch nicht der alleinige Wert, der zählt. Es geht auch um Ladezeiten, SEO, Requests, Schriften und viele andere Puzzleteile, die eine Website ausmachen. Wer aber das Optimale nicht erreicht, kann nicht bewusst zugunsten von Usability und User Experience(UX) die PageSpeed (Lighthouse) Werte reduzieren.
1. Zum Einstieg
Google PageSpeed 100% (Lighthouse) ist nicht nur eine Sache des persönlichen Ehrgeizes, sondern eine Notwendigkeit, um beurteilen zu können, ob hinzugefügte Usability und User Experience (UX), in Form von Plugins oder CSS Variation, den eventuellen Verlust an wichtigen Kennzahlen von Google PageSpeed, Lighthouse, SEO und Co., die Einbindung wert sind.
Es gibt Funktionalitäten, die müssen erfüllt werden, wenn der Besucher sich wohlfühlen soll, und es gibt Funktionalitäten, die können nicht erfüllt werden, wenn Google sich wohlfühlen soll. mediendr.de
Auch das Design muss Federn lassen, wenn 100% SEO mit Lighthouse in der Mobile-Version erreicht werden sollen, weil Lighthouse Tippziele meist anmeckert. Die Links werden wegen Schriftgröße und Abstand an verschiedenen Stellen beanstandet. Dies wird dem Designer nicht gefallen, aber es muss eine Entscheidung her, wie weit Lighthouse SEO hier Einfluss nehmen darf, denn schöner wird es nicht.
Wer hat hier das Sagen, der Designer, die Funktionalität oder Google.
Diese Frage muss vor allen anderen Festlegungen grundsätzlich geklärt werden, damit Sackgassen vermieden werden und keine Arbeitszeit verbrannt wird.
Die festgelegten Ziele darf man nicht aus den Augen verlieren:
- Google PageSpeed 100%
- Lighthouse 100%
- Experience(UX)
- Usability
- Ladezeiten <1s
- Bildoptimierung
2. Definitionen für diesen Beitrag
Damit in den weiteren Kapiteln nicht immer wieder Begriffe oder Schlagwörter erklärt werden oder externe Verlinkungen erfolgen – das wird ja dann auch langweilig – werden hier einige Definitionen/Festlegungen getroffen, die manchmal eigenwillig sind, aber den Zweck der Vereinfachung des nachfolgenden Textes erfüllen.
2.1 Google PageSpeed 100%
Google PageSpeed 100% sind die Werte, die ausgespuckt werden, wenn mit Google PageSpeed Insights und Lighthouse – die Tools werden nachfolgend erklärt – der Beitrag getestet wird. Wenn die Ergebnisse alle 100% zeigen, wird gefeiert, weil ja das Ziel Google PageSpeed 100 % erreicht ist. Das Wort Google wird auch für die Zukunft möglichst weggelassen – es wäre sonst zu viel Reklame für die Firma, dessen Wort nicht mehr erscheinen soll – zumindest für diesen Beitrag.
3. Aller Anfang ist schwer
Die Auswahl eines Standard Theme wird nicht zum Erfolg führen, weil es einfach nicht den Strukturen folgt, die erforderlich sind, um das Ziel Lighthouse 100% zu erreichen. Bildgrößen, Content-Bereiche, Sidebar etc. sind wenig oder gar nicht anpassbar. Hier trifft man einfach auf zu starre Strukturen, die Individualität nicht gestatten.
Eine Website sollte individuell und persönlich sein und das Widerspiegeln, was den Websiteinhaber – Person oder Firma – ausmacht.
Es ist wichtig, ein geeignetes Starter-Theme auszuwählen, um die erforderlichen Strukturen implementieren zu können.
Ein Wermutstropfen ist es natürlich, dass man sich dann mit CSS und PHP herumschlagen muss – wobei es irgendwann doch zum Spaß ausartet. Beides ist nicht unbedingt schwer zu erlernen, um gewisse Grundlagen beherrschen zu können, zum Profi muss jedoch viel Ehrgeiz investiert werden. Wenn das Ergebnis jedoch eine individuelle Website mit großartigen PageSpeed Werten ist, wird der Aufwand gerechtfertigt.
3.1 Warum und wieso dieses Theme
Mit underscores.me als Starter Theme ist eine Top Grundlage gegeben, weil alle Strukturen enthalten sind, die zum Aufsetzen einer tollen Anwendung enthalten sind – es ist eben von den Leuten die auch WordPress geschrieben haben.
Wenn die Website das erste Mal mit diesem Theme aufgerufen wird, ist das Aussehen erschreckend und zeigt eigentlich, dass man einiges zu tun hat, um sie zu einem Erlebnis zu machen.
3.2 Auswahl von Plugins
Plugins sind unbestritten erforderlich, denn hier wird die Fachkompetenz geliefert, die man selbst nicht hat – und auch vom Arbeitsaufwand nicht realisieren kann. Einige sind mit recht kostenpflichtig, weil hier ganze Teams ihren Lebebenunterhalt verdienen. Inwieweit der Preis angemessen ist, muss jeder selbst einschätzen.
Die Entwickler der freien Plugins haben aber auch ganz sicher eine Spende oder einen Kommentar verdient, weil auch hier persönlicher Ehrgeiz und viel Zeit eingebracht wird um das Plugin leben zu lassen. Wir haben nichts von großartigen Plugins, die irgendwann sterben, weil der Schöpfer es aufgibt.
Zu viele Plugins können den Brei verderben, ein schlechtes Plugin verdirbt ihn garantiert.mediendr.de
Die Anzahl von guten Plugins ist nicht ausschlaggebend für das Ergebnis, wenn gewisse Regeln eingehalten werden.
3.3 Trennung von Mobile und Deskt
Eine Trennung von Mobile- und Desktop-Anwendung ist unbedingt erforderlich, damit man über Verzweigungen Einfluss nehmen kann.
Damit ist es möglich:
- Sidebars nur für Desktop
- Gezieltes Wegschalten von Sidebars
- Auswahl Bildgrößen für Desktop und Mobile
- Unterschiedliche Schriften
3.4 Auswahl Bildgrößen
Die Standardbildgrößen von WordPress passen nicht zum eigenen Layout – hier sind Anpassungen und Erweiterungen erforderlich. Vorgabe ist immer der zur Verfügung stehenden Content-Bereich, damit nicht der Internet Explorer die Bilder anpassen muss – dies ist dann meistens der Grund für schlechte Ladezeiten.
4. Verwendete Plugins
Nr.
Name
Plugin-Link
Version
Desciption
1
Query Monitor
3.12.3
The developer tools panel for WordPress.
2
Shortcodes Ultimate
5.13.0
A comprehensive collection of visual components for WordPress
3
Delete webp files with image attachments
-
-
-
4
ACF Content Analysis for Yoast SEO
https://wordpress.org/plugins/acf-content-analysis-for-yoast-seo/
3.1
Ensure that Yoast SEO analyzes all Advanced Custom Fields 5.7+ content including Flexible Content and Repeaters.
5
Advanced Custom Fields: Extended PRO
0.8.9.3
All-in-one enhancement suite that improves WordPress & Advanced Custom Fields.
6
Admin Columns Pro
6.2.2
Customize columns on the administration screens for post(types), users and other content. Filter and sort content, and edit posts directly from the posts overview. All via an intuitive, easy-to-use drag-and-drop interface.
7
Admin Menu Editor Pro
2.20
Lets you directly edit the WordPress admin menu. You can re-order, hide or rename existing menus, add custom menus and more.
8
Advanced Custom Fields PRO
https://www.advancedcustomfields.com
6.1.6
Customize WordPress with powerful, professional and intuitive fields.
9
AME Branding Add-on
https://adminmenueditor.com/branding-add-on/
1.3.5
Adds branding options to Admin Menu Editor Pro. It creates three new tabs on the "Settings → Menu Editor Pro" page: "Branding", "Login", and "Colors".
10
Borlabs Cookie - Cookie Opt-in
2.2.63
Borlabs Cookie is an easy to use cookie opt-in and content block solution for WordPress. Create detailed descriptions for cookies and sort them in customizable 'Cookie Groups'. Create specific 'Content Blockers' and block everything from YouTube media to Facebook posts. Let your visitors choose which cookies they want to allow and what content they want to see. Borlabs Cookie helps you to make your website ready for GDPR & ePrivacy regulations.
11
Disable Gutenberg
https://perishablepress.com/disable-gutenberg/
2.9
Disables Gutenberg Block Editor and restores the Classic Editor and original Edit Post screen. Provides options to enable on specific post types, user roles, and more.
12
Edit Author Slug
https://github.com/thebrandonallen/edit-author-slug/
1.8.4
Allows an Admin (or capable user) to edit the author slug of a user, and change the Author Base. i.e. - (WordPress default structure) http://example.com/author/username/ (Plugin allows) http://example.com/ninja/master-ninja/
13
FooBox Image Lightbox (Premium)
2.7.25
The best responsive lightbox for WordPress.
14
Justified Image Grid
4.4
Create beautiful photo grids from sources you already use.
15
Loco Translate
https://wordpress.org/plugins/loco-translate/
2.6.4
Translate themes and plugins directly in WordPress
16
Media Library Assistant
3.07
Enhances the Media Library powerful
17
Max Mega Menu - Pro Addon
2.2.8
Extends the free version of Max Mega Menu with additional functionality.
18
Max Mega Menu
3.2.2
An easy to use mega menu plugin. Written the WordPress way.
19
MetaSlider Pro
2.23.0
MetaSlider Pro unlocks the power of video slides, layer slides, post type slides as well as many other features.
20
MetaSlider
3.31.0
Easy to use slideshow plugin. Create SEO optimised responsive slideshows with Nivo Slider, Flex Slider, Coin Slider and Responsive Slides.
21
Optimus
1.6.3
Smart compression and optimization of uploaded images in WordPress. Automatic, reliable, effective.
22
Page scroll to id
http://manos.malihu.gr/page-scroll-to-id
1.7.7
Page scroll to id is an easy-to-use jQuery plugin that enables animated (smooth) page scrolling to specific id within the document.
23
Relevanssi Premium
2.23.0
This premium plugin replaces WordPress search with a relevance-sorting search.
24
Shortcodes Ultimate: Extra Shortcodes
1.8.3
Extra set of shortcodes for Shortcodes Ultimate
25
Shortcodes Ultimate: Additional Skins
1.6.2
Set of additional skins for Shortcodes Ultimate
26
Smart Custom Display Name
https://petersplugins.com/free-wordpress-plugins/smart-custom-display-name/
5.0.0
Set users "Display Name" to any custom value
27
Mobile Detect
https://www.tinywp.in/wp_is_mobile-exclude-ipad/
1.5.0
Excludes tablets, such as iPad, from being detected as mobile in wp_is_mobile!
28
UpdraftPlus - Backup/Restore
2.23.4.26
Backup and restore: take backups locally, or backup to Amazon S3, Dropbox, Google Drive, Rackspace, (S)FTP, WebDAV & email, on automatic schedules.
29
User Switching
https://wordpress.org/plugins/user-switching/
1.7.0
Instant switching between user accounts in WordPress
30
Wordfence Security
7.9.3
Wordfence Security - Anti-virus, Firewall and Malware Scan
31
Yoast SEO
20.8
The first true all-in-one SEO solution for WordPress, including on-page content analysis, XML sitemaps and much more.
32
WP Links
5.27
Check & scan all links + open external links in a new tab or window, control "nofollow" and "noopener", set font icon; SEO friendly.
33
WP Rocket
3.13.3
The best WordPress performance plugin.
34
WordPress Toolbar Editor
1.4.2
Lets you edit the WordPress Toolbar (a.k.a. Admin Bar) - the horizontal menu at the top of your page that shows up when you're logged in. You can hide, move, rename and edit existing items, as well as create new menu items. Requires Admin Menu Editor Pro.
35
WPFront Scroll Top
http://wpfront.com/scroll-top-plugin/
2.0.7.08086
Allows the visitor to easily scroll back to the top of the page.
5. Prüfung der Anwendung und Beiträge
Es ist darauf zu achten, dass die Anwendung und die Beiträge programmtechnisch in Ordnung sind und nicht PageSpeed 100% verlieren. Hierzu ist es erforderlich, jeder Änderung und Anpassung einen abschließenden Test zu unterziehen.
Nachfolgende Tools sollte man verinnerlichen:
6. Fazit: Google PageSpeed (Lighthouse) 100% ganz entspannt
Das Ziel ist mit Strukturen und einigen Arbeitsaufwand grundsätzlich zu erreichen. Unbestritten ist viel Energie – auch einige Sackgassen – erforderlich, um den richtigen Weg dorthin zu finden. Das Ergebnis ist eine Website, die individuell, persönlich und mit eigenem Design aufwartet.
